Pubblicato il 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 disegno che esegue il rendering dei pixel sullo schermo. L'ottimizzazione di ognuno di questi passaggi è fondamentale per ottenere prestazioni di rendering ottimali.
Nella sezione precedente sulla creazione 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 aspetti diversi del documento: uno descrive i contenuti e l'altro descrive le regole di stile che devono essere applicate al documento. Come possiamo unire i due e fare in modo che il browser esegua il rendering dei 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 è il disegno, che prende l'albero di rendering finale ed 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 creare 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 utilizzando 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" su di esso.
Per ogni nodo visibile, trova le regole CSSOM corrispondenti appropriate e applicale.
Emetti i nodi visibili con i contenuti e gli stili calcolati.
L'output finale è un albero di rendering che contiene sia i contenuti sia le informazioni di stile di tutti i contenuti visibili sullo schermo. Con l'albero di rendering, possiamo procedere alla fase di "layout".
Finora abbiamo calcolato quali nodi devono essere visibili e i relativi stili calcolati, ma non abbiamo calcolato la loro posizione e le dimensioni esatte all'interno della finestra di visualizzazione 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>
Dai un'occhiata a questo esempio HTML sottoposto a rendering come pagina web.
Il <body> dell'esempio precedente contiene due <div> nidificati: il primo (elemento principale) <div> imposta le dimensioni di visualizzazione del nodo sul 50% della larghezza della finestra di visualizzazione, mentre il secondo <div>, contenuto dall'elemento principale, imposta la relativa width sul 50% dell'elemento principale, ovvero il 25% della larghezza della finestra di visualizzazione.
L'output del processo di layout è un "modello a riquadri", che acquisisce con precisione la posizione e le dimensioni esatte di ogni elemento all'interno della finestra di visualizzazione: tutte le misurazioni relative vengono convertite in pixel assoluti sullo schermo.
Infine, ora che sappiamo quali nodi sono visibili, i relativi stili e la geometria calcolati, possiamo passare queste informazioni alla fase finale, che converte ogni nodo dell'albero di rendering in pixel effettivi sullo schermo. Questo passaggio viene spesso definito "disegno" o "rasterizzazione".
Questa operazione può richiedere un po' di tempo perché il browser deve svolgere un lavoro piuttosto impegnativo. Tuttavia, Chrome DevTools può fornire alcune informazioni dettagliate su tutte e tre le fasi descritte in precedenza. Esamina la fase di layout per l'esempio originale "Hello World":
- L'evento "Layout" acquisisce la creazione 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 l'albero di rendering in pixel sullo schermo.
Il tempo necessario per eseguire la creazione dell'albero di rendering, il layout e il disegno 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 per il disegno (ad esempio, il disegno di un colore uniforme è "economico", mentre il calcolo e il rendering di un'ombra esterna sono "costosi").
La pagina è finalmente visibile nella finestra di visualizzazione:
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 lavoro piuttosto impegnativo da parte del browser. Se il DOM o il CSSOM fossero stati modificati, dovresti ripetere la procedura per capire quali pixel dovrebbero essere sottoposti a rendering 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 sottoposti a rendering sullo schermo il più rapidamente possibile e si riduce anche il tempo tra gli aggiornamenti dello schermo dopo il rendering iniziale, ovvero si ottengono frequenze di aggiornamento più elevate per i contenuti interattivi.