In questo breve ciclo di script proveremo a capire come il browser esegue il rendering delle pagine web e come evitare operazioni costose per migliorare le prestazioni. Perchè a volte i problemi di latenza o aggiornamento non sono sempre da imputare alla connessione internet.

Ogni volta che viene visualizzata una pagina, il browser esegue i seguenti passaggi:

• Parsing: Converte l'HTML in un DOM Tree e il CSS in un CSSOM Tree.
• Style Calculation: Applica gli stili ai nodi del DOM.
• Layout (Reflow): Calcola le dimensioni e la posizione degli elementi.
• Paint (Repaint): Disegna i pixel sullo schermo.
• Compositing: Combina i diversi livelli per visualizzare la pagina finale.

Di questa lista solo degli ultimi tre passaggi sono importanti per le prestazioni:

Reflow ricalcola le dimensioni e la posizione degli elementi nel layout. Avviene ogni volta che vengono aggiunti elementi al DOM o modifiche al CSS che influenzano il layout, come width, height o position. È il più costoso in termini di tempo/risorse.

Repaint come dice il nome si occupa di ridisegnare gli elementi, nel momento in cui avviene un Reflow o vengono modificate proprietà come color, backgroud o visibility.

Compositing è l'ultimo step, ed il meno dispendioso dei tre, si occupa di combinare i vari layer della pagina e applicare trasformazioni come transform e opacity

Accedendo alla scheda performance dei DevTools possiamo già capire quanto questi processi vadano ad inficiare sul tempo effettivo di caricamento della pagina. Utiliziamo questo codice per isolare gli eventi

const box = document.createElement("div");
box.style.width = "100px";
box.style.height = "100px";
box.style.backgroundColor = "red";
box.style.margin = "10px";
document.body.appendChild(box);

// Modifica la larghezza dopo 2 secondi (Reflow + Repaint)
setTimeout(() => {
    box.style.width = "200px";
}, 2000);

// Cambia il colore dopo 5 secondi (Repaint)
setTimeout(() => {
    box.style.backgroundColor = "blue";
}, 5000);

Se analizziamo le prestazioni, che saranno leggermente diverse in base al dispositivo, ma manterranno una certa proporzione tra i numeri, notiamo che per ottimizzare la pagina è bene ridurre al minimo le modifiche che causano il Reflow in favore di eventi di Repaint. Nel prossimo script analizzeremo caso per caso tutte le best practices!