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 unire i due elementi e fare in modo che il browser esegua il rendering 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.
- Layout calcola la posizione e le dimensioni esatte di ciascun 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 l'albero di rendering, il browser esegue approssimativamente la seguente procedura:
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. Con l'albero di rendering, possiamo passare al "layout" durante la fase di sviluppo.
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 determinare le dimensioni e la posizione esatte di ciascun oggetto sulla 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) 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.
L'output del processo di layout è un "modello box", che cattura con precisione la posizione e le dimensioni esatte di ogni elemento all'interno dell'area visibile: tutte le misure 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:
- Il "Layout" acquisisce la costruzione, la posizione e il calcolo delle dimensioni dell'albero di rendering nella sequenza temporale.
- Quando il layout è completato, il browser visualizza il messaggio "Configurazione colore" e "Paint" che convertono la struttura di rendering in pixel sullo schermo.
Il tempo necessario per eseguire la costruzione, il layout e la colorazione dell'albero di rendering varia in base alle dimensioni del documento, agli stili applicati e al dispositivo su cui è in esecuzione: 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 la struttura CSSOM.
- Combina DOM e CSSOM in un albero di rendering.
- Esegui il layout nell'albero di rendering per calcolare la geometria di ciascun nodo.
- Dipingi i singoli nodi sullo schermo.
La pagina demo può sembrare basilare, ma richiede un bel po' di lavoro da parte del browser. Se il DOM o il CSSOM sono stati modificati, dovrai ripetere la procedura per capire quali pixel debbano essere visualizzati di nuovo sullo schermo.
L'ottimizzazione del percorso di rendering critico consiste nel ridurre al minimo il tempo totale impiegato per eseguire i passaggi da 1 a 5 della sequenza precedente. In questo modo i contenuti vengono visualizzati sullo schermo il più velocemente possibile e si riduce anche il tempo che intercorre tra gli aggiornamenti dello schermo dopo il rendering iniziale. ottenere frequenze di aggiornamento più elevate per i contenuti interattivi.