Data di pubblicazione: 31 marzo 2014
Prima che il browser possa eseguire il rendering della pagina, deve creare il DOM Alberi CSSOM. Di conseguenza, dobbiamo assicurarci di fornire sia il codice HTML 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 la costruzione e i costi 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. Come viene elaborata questa pagina dal browser?
- 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 stringhe di caratteri in
come specificato dallo standard W3C HTML5
ad esempio
<html>,<body>e altre stringhe in 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.
- Costruzione del DOM: infine, poiché il markup HTML definisce le relazioni tra i diversi tag (alcuni tag sono contenuti in altri tag), gli oggetti creati sono collegati in una struttura di dati ad albero che acquisisce anche le relazioni genitore-figlio definite nel markup originale: l'oggetto HTML è un genitore dell'oggetto body, body è un genitore dell'oggetto paragraph e così via fino a quando non viene creata l'intera rappresentazione del documento.
L'output finale dell'intero processo è il Document Object Model (DOM) della nostra semplice pagina, che il browser utilizza per tutte le ulteriori elaborazioni dei .
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'intera procedura 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, questa procedura 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.
Modello oggetto CSS (CSSOM)
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 nel markup HTML (incorporato), ma mantenere il nostro CSS indipendente dal codice HTML ci consente di trattare i contenuti e la progettazione come separatamente: i designer possono lavorare sui CSS, gli sviluppatori possono concentrarsi sull'HTML, oltre ad altri dubbi.
Come per HTML, dobbiamo convertire le regole CSS ricevute in qualcosa che il browser possa comprendere e utilizzare. Pertanto, ripetiamo il processo HTML, ma per CSS anziché HTML:
I byte CSS vengono convertiti in caratteri, poi in token e poi in nodi e finalmente vengono collegati in una struttura ad albero nota come "modello di oggetti CSS" (CSSOM):
Perché il CSSOM ha una struttura ad albero? Quando si calcola il set finale di stili per qualsiasi oggetto sulla pagina, il browser inizia con lo stile più generico applicabile al nodo (ad esempio, se è un elemento figlio di un elemento body, vengono applicati tutti gli stili di carrozzeria), quindi perfeziona in modo ricorsivo gli stili calcolati. applicando regole più specifiche; cioè le regole vengono "a cascata".
Per concretarla, consideriamo la struttura CSSOM descritta 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. Tutti i browser fornisce un insieme predefinito di stili, noti anche come "stili dello user agent", vediamo quando non ne forniamo uno di nostra proprietà e i nostri stili sovrascrivono i 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. Tuttavia, dov'è da cui provengono 8 elementi? CSSOM e DOM sono strutture di dati indipendenti. Il browser nasconde un passaggio importante. Successivamente, verrà esaminata la struttura di rendering, che collega il DOM e il CSSOM.