La guida per principianti al CSS Object Model (CSSOM)
Succede molto tra il prima richiesta HTTP e il Consegna finale di una pagina web. La trasmissione dei dati e la pipeline di rendering del browser richiedono molte tecnologie diverse, una delle quali è la Modello a oggetti CSS, o il CSSOM.
Il CSS Object Model prende il codice CSS e rende ogni selettore in una struttura ad albero per semplificare l'analisi. Forse non è fondamentale per gli sviluppatori comprendere appieno questo concetto, ma è un argomento prezioso da studiare se vuoi saperne di più come i browser rendono il codice in un sito Web funzionante.
In questo post illustrerò le basi del CSS Object Model e mostreremo come funziona.
Cos'è CSSOM?
Il termine CSS Object Model descrive a mappa di tutti i selettori CSS e proprietà pertinenti per ciascun selettore. Questi stili possono essere elementi di root o avere figli nidificati.
CSSOM è molto simile al DOM in HTML, che sta per Document Object Model. Entrambi fanno parte del percorso di rendering critico che è una serie di passaggi che devono accadere rendere correttamente un sito web. Tutti questi processi accadono automaticamente, dietro le quinte.
Allora, perché CSSOM è importante? È la mappa utilizzata dal browser per rendere correttamente gli stili CSS su una pagina web. Non c'è un modo semplice per dire a un computer che tutti i paragrafi in a .contenuto principale div deve avere un'altezza di riga extra.
La soluzione è il modello a oggetti CSS che mappa tutti gli elementi e le proprietà dal tuo codice CSS.
CSSOM rende più facile per il browser renderizza stili sulla pagina. Il tutto è molto tecnico ma vale la pena capire un po 'del processo, specialmente se costruisci siti web.
Come funziona
Lo sono sia il DOM che il CSSOM usato estesamente da tutti i browser web per interpretare e rendere pagine web. Lo schema seguente è tratto dalla guida ai principi di base di Google Developers Web e spiega come DOM è reso in un browser web.
In entrambi i DOM e CSSOM, tutte le informazioni sono convertito da byte in mappe digitali che rende ogni elemento in un documento web. Il processo funziona come segue:
- Il browser scarica l'HTML per una pagina web.
- Durante l'elaborazione dell'HTML, il parser potrebbe imbattersi in un elemento di collegamento riferimento a un foglio di stile esterno.
- Questo foglio di stile CSS è quindi analizzato in una mappa utilizzando le specifiche del modello a oggetti CSS.
- Il codice risultante può quindi essere applicato agli elementi nel DOM.
Tutto ciò avviene molto rapidamente e si verifica con ogni singola richiesta di pagina. Questo altro diagramma qui sotto mostra un esempio struttura ad albero del CSSOM.
Nota come alcune proprietà nel diagramma hanno colori di caratteri più chiari. Queste proprietà sono ereditato dal genitore. Poiché il corpo ha una dimensione di carattere specifica, tutti gli elementi all'interno del corpo ottengono anche la dimensione del carattere, a meno che non venga sovrascritta.
Le stringhe HTML e CSS sono convertito in token che può quindi essere inteso come nodi dal browser. Questi nodi sono simili oggetti all'interno della struttura ad albero che definisce come deve essere costruita l'intera pagina.
Il CSSOM e il DOM sono completamente modelli di dati separati, quindi sono analizzati separatamente l'uno dall'altro. Ma entrambi hanno strutture ad albero simili, ed entrambi hanno lo stesso scopo: dare al browser una struttura per il rendering e l'identificazione di diversi elementi sulla pagina.
Perché gli sviluppatori Web dovrebbero prendersi cura di loro
Dal momento che tutto il rendering succede sul back-end, non devi davvero preoccuparti molto dell'albero CSSOM. Ma può essere utile capire come funziona.
Una cosa da ricordare è che il CSSOM deve essere completamente caricato prima che la pagina web venga visualizzata, come verrà definito come dovrebbe apparire ogni elemento della pagina. Se la pagina è stata caricata prima del CSSOM, appare prima come HTML semplice, seguita dagli stili pochi secondi dopo.
I browser lo evitano in modo specifico perché sarebbe fonte di confusione per gli utenti finali. E vale la pena notare che il CSSOM non può essere memorizzato nella cache; deve essere ricreato su ogni pagina.
I file CSS effettivi possono essere memorizzati nella cache in modo da caricare le risorse più rapidamente, ma il rendering di una pagina nel browser richiede sempre l'esecuzione del parser CSSOM. Ciò significa anche che JavaScript può avere un impatto negativo sul rendering e sulle prestazioni.
Consiglio vivamente di leggere questo articolo per ulteriori informazioni sulle risorse CSS / JS esterne e sui relativi tempi di caricamento.
Il modo migliore per ottimizzare il tuo sito è creare un cascata naturale di risorse che sono caricati in tandem.
È possibile manipolare CSSOM utilizzando JavaScript perché tecnicamente è un'API JS. Ma non è molto utile rispetto alla manipolazione del DOM JavaScript.
Il motivo più grande per conoscere il CSSOM è quello di istruirsi ulteriormente su come i siti web effettivamente funzionano.
Ci sono molte cose che diamo per scontato che mantengano Internet senza intoppi. Quando capisci un po 'di più sull'intero processo, puoi visualizzare il modo in cui l'intera faccenda si riunisce e, si spera, ottenere qualche apprezzamento per l'esistenza del World Wide Web.
Ulteriori letture
Spero che questa intro possa darti una solida idea di cosa sia il modello a oggetti CSS e come influisce sulle pagine web. Là non c'è molto da manipolare nel CSSOM, quindi differisce un po 'dal DOM.
Tuttavia è ancora una tecnologia critica nello sviluppo web, e dovrebbe chiarire i principali aspetti del rendering del browser.
Ci sono molte altre risorse che discutono del CSSOM e come funziona. Se stai cercando di saperne di più, ecco alcuni post che consiglio:
- Panoramica del modello a oggetti CSS
- Esplorazione del CSSOM: creazione di un Object Scanner CSS
- Cosa dovrebbe sapere di ogni sviluppatore di frontend sul rendering di pagine Web
