Data di pubblicazione: 31 marzo 2014
Prima che il browser possa eseguire il rendering della pagina, deve creare le strutture DOM e CSSOM. Di conseguenza, dobbiamo assicurarci di inviare sia il codice HTML sia il codice CSS al browser il più rapidamente possibile.
Riepilogo
- Byte → caratteri → token → nodi → modello di oggetti.
- Il markup HTML viene trasformato in un Document Object Model (DOM); il markup CSS viene trasformato in un CSS Object Model (CSSOM).
- DOM e CSSOM sono strutture di dati indipendenti.
- Il riquadro Prestazioni di Chrome DevTools ci consente di acquisire e ispezionare i costi di costruzione e di elaborazione di DOM e CSSOM.
Document Object Model (DOM)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
Inizia con il caso più semplice possibile: una pagina HTML semplice con del testo e una singola immagine. In che modo il browser elabora questa pagina?
- Conversione: il browser legge i byte non elaborati dell'HTML dal disco o dalla rete e li traduce in singoli caratteri in base alla codifica specificata del file (ad esempio UTF-8).
- Tokenizzazione: il browser converte le stringhe di caratteri in token distinti, come specificato dallo standard HTML5 del W3C, ad esempio
<html>,<body>, e altre stringhe tra parentesi angolari. Ogni token ha un significato speciale e un proprio insieme di regole. - Analisi lessicale: i token emessi vengono convertiti in "oggetti", che ne definiscono le proprietà e le regole.
- Creazione del DOM: infine, poiché il markup HTML definisce le relazioni tra tag diversi (alcuni tag sono contenuti all'interno di altri tag), gli oggetti creati sono collegati in una struttura dati ad albero che acquisisce anche le relazioni padre-figlio definite nel markup originale. L'oggetto HTML è padre dell'oggetto body, body è un padre dell'oggetto paragraph, fino a quando non viene creata l'intera rappresentazione del documento.
L'output finale di questa intera procedura è il Document Object Model (DOM) della nostra pagina semplice, che il browser utilizza per tutta l'ulteriore elaborazione della pagina.
Ogni volta che il browser elabora il markup HTML, esegue tutti i passaggi definiti in precedenza: converte i byte in caratteri, identifica i token, li converte in nodi e crea la struttura ad albero DOM. L'intero processo può richiedere del tempo, soprattutto se abbiamo una grande quantità di codice HTML da elaborare.
Se apri Chrome DevTools e registri una sequenza temporale durante il caricamento della pagina, puoi vedere il tempo effettivo impiegato per eseguire questo passaggio. Nell'esempio precedente, ci sono voluti circa 5 ms per convertire un frammento di HTML in una struttura DOM. Per una pagina più grande, questo processo potrebbe richiedere molto più tempo. Quando crei animazioni scorrevoli, questo può diventare un collo di bottiglia se il browser deve elaborare grandi quantità di HTML.
La struttura DOM acquisisce le proprietà e le relazioni del markup del documento, ma non ci dice come sarà l'elemento al momento del rendering. È responsabilità del CSSOM.
CSSOM (CSS Object Model)
Durante la costruzione del DOM della nostra pagina di base, il browser ha rilevato un elemento <link> nel <head> del documento che fa riferimento a un foglio di stile CSS esterno: style.css. Anticipando che ha bisogno di questa risorsa per visualizzare la pagina, invia immediatamente una richiesta per questa risorsa, che restituisce i seguenti contenuti:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
Avremmo potuto dichiarare i nostri stili direttamente all'interno del markup HTML (in linea), ma mantenere il CSS indipendente dall'HTML ci consente di trattare i contenuti e il design come problemi distinti: i designer possono lavorare sul CSS, gli sviluppatori possono concentrarsi sull'HTML, nonché su altri problemi.
Come con l'HTML, dobbiamo convertire le regole CSS ricevute in qualcosa che il browser possa comprendere e utilizzare. Pertanto, ripetiamo la procedura HTML, ma per il CSS anziché per l'HTML:
I byte CSS vengono convertiti in caratteri, quindi in token, quindi in nodi e infine sono collegati in una struttura ad albero nota come "CSS Object Model" (CSSOM):
Perché il CSSOM ha una struttura ad albero? Quando calcola l'insieme finale di stili per qualsiasi oggetto nella pagina, il browser inizia con la regola più generale applicabile a quel nodo (ad esempio, se è un elemento secondario di un elemento body, vengono applicati tutti gli stili del body) e poi perfeziona in modo ricorsivo gli stili calcolati applicando regole più specifiche, ovvero le regole "si applicano in cascata".
Per fare un esempio più concreto, prendi in considerazione l'albero CSSOM descritto in precedenza. Qualsiasi testo
contenuto nel tag <span> inserito nell'elemento body ha un
carattere di dimensioni 16 pixel ed è in rosso. La direttiva font-size si applica
in cascata dal tag body al tag span. Tuttavia, se un span è un elemento secondario di un
tag paragrafo (p), i relativi contenuti non vengono visualizzati.
Inoltre, tieni presente che l'albero descritto in precedenza non è l'albero CSSOM completo e mostra solo gli stili che abbiamo deciso di sostituire nel nostro foglio di stile. Ogni browser offre un insieme predefinito di stili, noti anche come "stili dello user agent", che è quello che vediamo se non ne forniamo uno tuo. I nostri stili sostituiscono questi valori predefiniti.
Per scoprire quanto tempo richiede l'elaborazione del CSS, puoi registrare una sequenza temporale in DevTools e cercare l'evento "Ricalcola stile": a differenza dell'analisi DOM, la sequenza temporale non mostra una voce "Esegui analisi CSS" separata, ma acquisisce l'analisi e la costruzione dell'albero CSSOM, oltre al calcolo ricorsivo degli stili calcolati in questo singolo evento.
Il nostro foglio di stili banale richiede circa 0,6 ms per l'elaborazione e influisce su otto elementi della pagina. Non molto, ma ancora una volta, non è gratuito. Ma da dove provengono gli otto elementi? CSSOM e DOM sono strutture di dati indipendenti. A quanto pare, il browser nasconde un passaggio importante. Successivamente, verrà illustrata la struttura di rendering, che collega il DOM e il CSSOM.