Costruzione, layout e vernice di una struttura ad albero del rendering

Ilya Grigorik
Ilya Grigorik

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.

DOM e CSSOM vengono combinati per creare la struttura di rendering

Per costruire la struttura di rendering, il browser esegue approssimativamente i seguenti passaggi:

  1. 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".
  2. Per ogni nodo visibile, trova le regole CSSOM corrispondenti appropriate e applicale.

  3. 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>

Prova

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>

Calcolo delle informazioni sul layout

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:

Misurare il layout in DevTools

  • 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:

Pagina Hello World visualizzata

Ecco un breve riepilogo dei passaggi del browser:

  1. Elabora il markup HTML e crea l'albero DOM.
  2. Elabora il markup CSS e crea l'albero CSSOM.
  3. Combina il DOM e il CSSOM in un'albero di rendering.
  4. Esegui il layout sulla struttura ad albero di rendering per calcolare la geometria di ciascun nodo.
  5. 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.

Feedback