Data di pubblicazione: 31 marzo 2014
Gli alberi CSSOM e DOM vengono combinati in un albero di rendering, che viene poi utilizzato per calcolare il layout di ogni elemento visibile e funge da input per il processo di pittura che esegue il rendering dei pixel sullo schermo. L'ottimizzazione di ciascuno di questi passaggi è fondamentale per ottenere prestazioni di rendering ottimali.
Nella sezione precedente sulla costruzione del modello a oggetti, abbiamo creato gli alberi DOM e CSSOM in base all'input HTML e CSS. Tuttavia, entrambi sono oggetti indipendenti che acquisiscono diversi aspetti del documento: uno descrive i contenuti e l'altro descrive le regole di stile da applicare al documento. Come facciamo a unire i due e a fare in modo che il browser visualizzi i pixel sullo schermo?
Riepilogo
- Gli alberi 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.
- Il layout calcola la posizione e le dimensioni esatte di ogni oggetto.
- L'ultimo passaggio è la pittura, che prende l'albero di rendering finale e esegue il rendering dei 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 di stile CSSOM per ogni nodo.
Per costruire l'albero di rendering, il browser esegue all'incirca le seguenti operazioni:
A partire dalla radice dell'albero DOM, attraversa ogni nodo visibile.
- Alcuni nodi non sono visibili (ad esempio, tag script, tag meta e così via) e vengono omessi perché non si riflettono nell'output di rendering.
- Alcuni nodi sono nascosti tramite CSS e vengono omessi anche dall'albero di rendering. Ad esempio, il nodo span nell'esempio precedente non è presente nell'albero di rendering perché abbiamo una regola esplicita che imposta la proprietà "display: none".
Per ogni nodo visibile, trova le regole CSSOM corrispondenti appropriate e applicale.
Emetti nodi visibili con contenuti e stili calcolati.
L'output finale è un albero di rendering che contiene le informazioni su contenuti e stile di tutti i contenuti visibili sullo schermo. Con l'albero di rendering in posizione, possiamo procedere alla fase di "layout".
Fino a questo punto abbiamo calcolato quali nodi devono essere visibili e i relativi stili calcolati, ma non abbiamo calcolato la loro posizione e dimensione esatte all'interno della finestra del dispositivo. Questa è la fase di "layout", nota anche come "reflow".
Per determinare le dimensioni e la posizione esatte di ogni oggetto nella pagina, il browser inizia dalla radice dell'albero di rendering e lo attraversa. Considera questo esempio:
<!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 <body> dell'esempio precedente contiene due <div> nidificati: il primo (principale) <div> imposta le dimensioni di visualizzazione del nodo su 50% della larghezza dell'area visibile, mentre il secondo <div>, contenuto nel principale, imposta il suo width su 50% del principale, ovvero il 25% della larghezza dell'area visibile.
L'output del processo di layout è un "modello a scatole", che acquisisce con precisione la posizione e le dimensioni esatte di ogni elemento all'interno del viewport: tutte le misurazioni relative vengono convertite in pixel assoluti sullo schermo.
Infine, ora che sappiamo quali nodi sono visibili e i relativi stili e geometria calcolati, possiamo passare queste informazioni alla fase finale, che converte ogni nodo nell'albero di rendering in pixel effettivi sullo schermo. Questo passaggio è spesso indicato come "pittura" o "rasterizzazione".
L'operazione può richiedere un po' di tempo perché il browser deve svolgere un lavoro piuttosto complesso. Tuttavia, Chrome DevTools può fornire alcune informazioni su tutte e tre le fasi descritte in precedenza. Esamina la fase di layout per il nostro esempio originale "Hello World":
- L'evento "Layout" acquisisce la costruzione, la posizione e il calcolo delle dimensioni dell'albero di rendering nella sequenza temporale.
- Al termine del layout, il browser genera gli eventi "Paint Setup" e "Paint", che convertono l'albero di rendering in pixel sullo schermo.
Il tempo necessario per eseguire la costruzione, il layout e il rendering 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, più lavoro deve svolgere il browser; più complessi sono gli stili, più tempo è necessario anche per il rendering (ad esempio, un colore solido è "economico" da eseguire, mentre un'ombra esterna è "costosa" da calcolare ed eseguire).
La pagina è finalmente visibile nell'area visibile:
Ecco un breve riepilogo dei passaggi del browser:
- Elabora il markup HTML e crea l'albero DOM.
- Elabora il markup CSS e crea l'albero CSSOM.
- Combina il DOM e il CSSOM in un albero di rendering.
- Esegui il layout sull'albero di rendering per calcolare la geometria di ogni nodo.
- Disegna i singoli nodi sullo schermo.
La pagina demo può sembrare semplice, ma richiede un bel po' di lavoro da parte del browser. Se il DOM o il CSSOM sono stati modificati, dovresti ripetere la procedura per capire quali pixel devono essere renderizzati di nuovo sullo schermo.
L'ottimizzazione del percorso di rendering critico è il processo di riduzione al minimo del tempo totale impiegato per eseguire i passaggi da 1 a 5 nella sequenza precedente. In questo modo, i contenuti vengono visualizzati sullo schermo il più rapidamente possibile e si riduce anche il tempo che intercorre tra gli aggiornamenti dello schermo dopo il rendering iniziale, ovvero si ottengono frequenze di aggiornamento più elevate per i contenuti interattivi.