Middle
Cos'è il percorso critico di rendering delle pagine web?
sobes.tech AI
Risposta dell'AI
Il percorso critico di rendering (Critical Rendering Path - CRP) è la sequenza di passaggi che il browser esegue per trasformare HTML, CSS e JavaScript in pixel visualizzabili sullo schermo. L'ottimizzazione del CRP consente di accelerare il rendering del contenuto e migliorare il tempo fino a quando la pagina diventa interattiva.
Le fasi principali del CRP:
- Costruzione del DOM (Document Object Model): Il browser analizza il codice HTML e crea una struttura ad albero che rappresenta il contenuto della pagina.
- Costruzione del CSSOM (CSS Object Model): Il browser analizza le regole CSS (da tag
<style>o file CSS esterni) e crea una struttura ad albero che rappresenta gli stili per ogni elemento del DOM. Il CSS è una risorsa bloccante per il rendering, poiché il browser non può costruire l'albero di rendering senza le informazioni sugli stili. - Costruzione dell'albero di rendering (Render Tree): Unione del DOM (solo nodi visibili) e del CSSOM. Questo albero contiene tutti gli elementi visibili della pagina e i loro stili pronti per essere renderizzati.
- Layout (Disposizione o Calcolo): Il browser calcola la posizione e le dimensioni esatte di ogni elemento sulla pagina.
- Paint (Pittura): Il browser trasforma ogni elemento dell'albero di rendering in pixel effettivi sullo schermo.
- Composite (Composizione): Il browser combina gli strati renderizzati in un'immagine finale.
Le risorse che bloccano il rendering (come CSS e JavaScript sincrono nell'intestazione <head>) aumentano il tempo di costruzione del CRP. L'ottimizzazione del CRP include la minimizzazione o il caricamento asincrono delle risorse bloccanti, nonché la priorità nel caricamento dei contenuti critici (sopra la "linea di piegatura").