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 la procedura di pittura che esegue il rendering dei pixel sullo schermo. L'ottimizzazione di ciascuno di questi passaggi è fondamentale per ottenere un rendimento ottimale del rendering.
Nella sezione precedente sulla costruzione del modello di 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 e fare in modo che il browser mostri i pixel sullo schermo?
Riepilogo
- Le strutture DOM e CSSOM si combinano per formare la struttura 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 acquisisce la struttura ad albero di rendering finale e la visualizza sullo schermo.
Innanzitutto, il browser combina il DOM e il CSSOM in una "struttura ad albero di rendering", che acquisisce tutti i contenuti DOM visibili nella pagina e tutte le informazioni sugli stili CSSOM per ogni nodo.
Per costruire la struttura di rendering, il browser esegue approssimativamente i seguenti passaggi:
A partire dalla radice dell'albero DOM, attraversa ogni nodo visibile.
- Alcuni nodi non sono visibili (ad esempio i tag script, i meta tag e così via) e vengono omessi perché non sono riportati nell'output visualizzato.
- Alcuni nodi vengono nascosti utilizzando CSS e sono anche omessi dalla struttura di rendering. Ad esempio, il nodo span nell'esempio riportato sopra non è presente nella struttura 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.
Emette i nodi visibili con i contenuti e gli stili calcolati.
L'output finale è una struttura ad albero di rendering che contiene sia i contenuti sia le informazioni sullo stile di tutti i contenuti visibili sullo schermo. Una volta impostata la struttura di rendering, 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 esatta all'interno dell'area visibile del dispositivo, ovvero la fase di "layout", nota anche come "riallocazione".
Per capire le dimensioni e la posizione esatte di ogni oggetto nella pagina, il browser inizia dalla radice della struttura ad albero di rendering e la 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) imposta le dimensioni di visualizzazione del nodo su 50% della larghezza dell'area visibile e il secondo <div>, contenuto nel principale, imposta il proprio width su 50% del principale, ovvero il 25% della larghezza dell'area visibile.<div>
L'output del processo di layout è un "modello a casella", 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 della struttura di rendering in pixel effettivi sullo schermo. Questo passaggio è spesso indicato come "tinta" o "rasterizzazione".
L'operazione potrebbe richiedere del tempo perché il browser deve eseguire diverse operazioni. 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 "Hello World" originale:
- L'evento "Layout" acquisisce la costruzione dell'albero di rendering, la posizione e il calcolo delle dimensioni nella sequenza temporale.
- Al termine del layout, il browser emette gli eventi "Paint Setup" e "Paint", che convertono la struttura di rendering in pixel sullo schermo.
Il tempo necessario per eseguire la costruzione dell'albero di rendering, il layout e la pittura 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 è il tempo necessario per la pittura (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.
- Elabora il markup CSS e crea l'albero CSSOM.
- Combina il DOM e il CSSOM in un'albero di rendering.
- Esegui il layout sulla struttura ad albero di rendering per calcolare la geometria di ciascun nodo.
- Dipingi i singoli nodi sullo schermo.
La pagina di demo può sembrare di base, ma richiede un bel po' di lavoro da parte del browser. Se il DOM o il CSSOM sono stati modificati, devi ripetere la procedura per capire quali pixel devono essere visualizzati 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 viene ridotto anche il tempo tra gli aggiornamenti dello schermo dopo il rendering iniziale, ovvero vengono raggiunte frequenze di aggiornamento più elevate per i contenuti interattivi.