Le strutture CSSOM e DOM vengono combinate in un albero di rendering, che viene quindi utilizzato per calcolare il layout di ogni elemento visibile e che funge da input per il processo di colorazione dei pixel sullo schermo. L'ottimizzazione di ciascuno di questi passaggi è fondamentale per ottenere prestazioni di rendering ottimali.
Nella sezione precedente relativa alla creazione del modello a oggetti, abbiamo creato le strutture DOM e CSSOM in base all'input HTML e CSS. Tuttavia, entrambi sono oggetti indipendenti che acquisiscono aspetti diversi del documento: uno descrive i contenuti e l'altro le regole di stile da applicare al documento. Come possiamo unire i due elementi e far sì che il browser visualizzi i pixel sullo schermo?
Riepilogo
- Le strutture DOM e CSSOM si combinano per formare l'albero di rendering.
- L'albero di rendering contiene solo i nodi necessari per il rendering della pagina.
- Layout calcola la posizione e le dimensioni esatte di ogni oggetto.
- L'ultimo passaggio è il disegno, che prende in considerazione l'albero di rendering finale e mostra i pixel sullo schermo.
Innanzitutto, il browser combina il DOM e il CSSOM in un "albero di rendering", che acquisisce tutti i contenuti DOM visibili nella pagina e tutte le informazioni sullo stile CSSOM per ciascun nodo.
Per creare la struttura di rendering, il browser esegue approssimativamente le seguenti operazioni:
A partire dalla radice dell'albero DOM, attraversa ogni nodo visibile.
- Alcuni nodi non sono visibili (ad esempio, tag di script, meta tag e così via) e vengono omessi perché non si riflettono nell'output visualizzato.
- Alcuni nodi sono nascosti tramite CSS e omessi dall'albero di rendering; ad esempio, il nodo span, nell'esempio sopra, non è presente nell'albero di rendering perché abbiamo una regola esplicita che imposta su di esso la proprietà "display: none".
Per ogni nodo visibile, trova le regole CSSOM corrispondenti e applicale.
Emetti nodi visibili con contenuti e i relativi stili elaborati.
L'output finale è un albero di rendering che contiene le informazioni sui contenuti e sullo stile di tutti i contenuti visibili sullo schermo. Una volta applicato l'albero di rendering, possiamo passare alla fase di "layout".
Fino a questo punto abbiamo calcolato quali nodi dovrebbero essere visibili e i relativi stili elaborati, ma non abbiamo calcolato la loro posizione e le loro dimensioni esatte all'interno dell'area visibile del dispositivo. Questa è la fase di "layout", nota anche come "adattamento dinamico del contenuto".
Per determinare le dimensioni e la posizione esatte di ciascun oggetto nella pagina, il browser inizia dalla radice dell'albero di rendering e la attraversa. Vediamo un esempio pratico e semplice:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
Il corpo della pagina precedente contiene due elementi div nidificati: il primo elemento div (principale) imposta le dimensioni di visualizzazione del nodo al 50% della larghezza dell'area visibile e il secondo div, contenuto dall'elemento principale, imposta la larghezza in modo che corrisponda al 50% dell'elemento principale; ovvero al 25% della larghezza dell'area visibile.
L'output del processo di layout è un "modello a forma di quadrato", che acquisisce con precisione la posizione e le dimensioni esatte di ogni elemento all'interno dell'area visibile: tutte le misurazioni relative vengono convertite in pixel assoluti sullo schermo.
Infine, ora che sappiamo quali nodi sono visibili, con gli stili e la geometria calcolati, possiamo passare questa informazione alla fase finale, che converte ciascun nodo nell'albero di rendering in pixel effettivi sullo schermo. Questo passaggio è spesso indicato come "pittura" o "rasterizzazione".
Questa operazione può richiedere del tempo perché il browser deve svolgere un bel po' di lavoro. Tuttavia, Chrome DevTools può fornire alcune informazioni su tutte e tre le fasi descritte in precedenza. Esaminiamo la fase di layout dell'esempio originale "Hello World":
- L'evento "Layout" acquisisce la struttura, la posizione e il calcolo delle dimensioni dell'albero di rendering nella sequenza temporale.
- Al termine del layout, il browser genera eventi "Paint setup" e "Paint" che convertono l'albero di rendering in pixel sullo schermo.
Il tempo necessario per eseguire la creazione, il layout e la colorazione dell'albero di rendering varia in base alle dimensioni del documento, agli stili applicati e al dispositivo su cui viene eseguito: più grande è il documento, maggiore è il lavoro del browser; più complicati sono gli stili, maggiore è anche il tempo impiegato per dipingere (ad esempio, un colore a tinta unita è "economico" da dipingere, mentre un'ombra è "costosa" da calcolare e visualizzare).
La pagina è finalmente visibile nell'area visibile:
Ecco un breve riepilogo dei passaggi del browser:
- Elabora il markup HTML e crea l'albero DOM.
- Elaborare il markup CSS e creare la struttura ad albero CSSOM.
- Combina il DOM e il CSSOM in un albero di rendering.
- Esegui il layout nell'albero di rendering per calcolare la geometria di ciascun nodo.
- Colora i singoli nodi sullo schermo.
La nostra pagina demo può sembrare semplice, ma richiede un po' di lavoro. Se il DOM o il CSSOM venisse modificato, dovrai ripetere la procedura per capire quali pixel devono essere sottoposti nuovamente a rendering sullo schermo.
L'ottimizzazione del percorso di rendering critico è il processo di riduzione al minimo del tempo totale dedicato all'esecuzione dei passaggi da 1 a 5 della sequenza precedente. In questo modo, i contenuti vengono visualizzati sullo schermo il più rapidamente possibile e anche il tempo tra gli aggiornamenti dello schermo dopo il rendering iniziale viene ridotto, ottenendo frequenze di aggiornamento più elevate per i contenuti interattivi.