Come viene visualizzata una pagina: parsing, DOM, CSSOM, layout e paint
Scopra cosa fa il browser con i byte HTML e CSS: costruisce il DOM e il CSSOM, calcola il layout e disegna i pixel.
Come viene visualizzata una pagina: parsing, DOM, CSSOM, layout e paint è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Dai byte ai pixel
Quando il browser riceve i byte HTML dal server, un processo composto da più passaggi li converte nei pixel visualizzati sullo schermo. Conoscere questa pipeline aiuta a ottimizzare le prestazioni e a comprendere le cause dei problemi visivi.
Passaggio 1 — Analisi dell'HTML: costruzione del DOM
Il parser HTML del browser legge il flusso di byte e costruisce il Document Object Model (DOM): un albero di nodi che rappresenta ogni elemento HTML, nodo di testo e commento presenti nel documento.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'Passaggio 2 — Analisi del CSS: costruzione del CSSOM
Contemporaneamente, i byte CSS vengono analizzati e convertiti nel CSS Object Model (CSSOM): un albero di regole di stile. Il CSS è render-blocking: il browser non dipinge i pixel finché non ha calcolato gli stili per i contenuti visibili.
Passaggio 3 — L'albero di rendering
Il browser combina DOM e CSSOM nell'albero di rendering. Sono inclusi solo i nodi visibili: gli elementi con display:none vengono esclusi. Ogni nodo dell'albero di rendering contiene lo stile calcolato con cui verrà dipinto.
Passaggio 4 — Layout (Reflow)
Layout calcola la posizione e le dimensioni esatte di ogni nodo nell'albero di rendering utilizzando il box model e la larghezza del viewport. Questa operazione è chiamata anche reflow. Il layout è costoso: eviti di attivarlo ripetutamente in JavaScript.
Passaggio 5 — Painting
Il painting converte il layout in pixel effettivi sullo schermo. Il browser disegna sfondi, bordi, testo e immagini livello dopo livello. Alcuni elementi creano compositing layers proprie per il rendering accelerato dalla GPU.
Passaggio 6 — Compositing
Il compositor del browser combina i livelli dipinti nel frame finale e lo invia allo schermo. Utilizzare transform e opacity per le animazioni consente al compositor di eseguirle sulla GPU, evitando completamente layout e painting.
Che cosa blocca il rendering?
Il CSS nel <head> blocca il rendering. Per impostazione predefinita, JavaScript blocca sia il parser sia il rendering. Utilizzi defer nei tag script per analizzare il JS dopo l'HTML senza bloccare il rendering.
<script src="app.js" defer></script>Critical Rendering Path
La Critical Rendering Path è la sequenza che va dalla ricezione dei byte HTML alla visualizzazione del primo pixel. Ottimizzarla significa ridurre al minimo il numero e le dimensioni delle risorse che bloccano il rendering e rimandare l'esecuzione del JS e del CSS non critici.
Reflow e Repaint
La modifica delle proprietà del layout (width, margin, position) attiva un reflow e un repaint. La modifica delle sole proprietà visive (color, background) attiva solo un repaint. La modifica di transform o opacity attiva solo il compositing. Preferisca l'operazione meno costosa.
DevTools: visualizzare la sequenza di painting
In Chrome DevTools, apra il pannello Performance, registri il caricamento di una pagina e analizzi il diagramma a cascata. Vedrà gli eventi Painting in verde e potrà individuare quali elementi causano layout costosi.
Verifica rapida
Quale passaggio calcola le dimensioni e la posizione esatte di ogni elemento della pagina?
Riepilogo: la pipeline di rendering
HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite. Ogni passaggio alimenta quello successivo. Ottimizzare la pipeline di rendering critica significa accorciare questa sequenza, così il primo contenuto visibile appare il più rapidamente possibile.
Domande Frequenti
La lezione «Come viene visualizzata una pagina: parsing, DOM, CSSOM, layout e paint» è gratuita?
Sì — il testo completo di «Come viene visualizzata una pagina: parsing, DOM, CSSOM, layout e paint» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Come viene visualizzata una pagina: parsing, DOM, CSSOM, layout e paint»?
Scopra cosa fa il browser con i byte HTML e CSS: costruisce il DOM e il CSSOM, calcola il layout e disegna i pixel. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Come viene visualizzata una pagina: parsing, DOM, CSSOM, layout e paint»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Browser, DNS e HTTP: il ciclo di vita di una richiesta
- HTML, CSS e JavaScript: il ruolo di ogni livello
- Come viene visualizzata una pagina: parsing, DOM, CSSOM, layout e paint
- Strumenti per sviluppatori: apertura e utilizzo di DevTools