Layout, paint e compositing: la pipeline di rendering

Dopo la creazione del render tree, il browser esegue tre fasi: Layout (calcolo delle dimensioni e delle posizioni degli elementi), Paint (riempimento dei pixel con colori, testo e immagini) e Composite (combinazione dei layer sottoposti a paint e visualizzazione sullo schermo).

Layout calcola la geometria, ovvero larghezza, altezza e posizione x/y, di ogni elemento. La modifica di proprietà che influiscono sulla geometria (width, margin, padding, font-size, position) attiva il layout per l'elemento e potenzialmente per l'intero sottoalbero: è la fase più costosa.

Paint riempie i pixel di ogni layer: sfondi, bordi, testo e ombre. La modifica di color, background-color, visibility o border-radius attiva un repaint senza un nuovo layout: è meno costosa del layout, ma può comunque essere onerosa se viene ridisegnata un'area estesa.

Il compositor combina i layer usando la GPU. Le proprietà CSS che influiscono solo sul compositing, transform e opacity, possono essere animate senza attivare layout o paint. La GPU le gestisce a 60fps con un coinvolgimento minimo della CPU.

csstriggers.com, oggi documentazione lato browser, descrive quali proprietà CSS attivano layout, paint e/o composite in ogni motore del browser. Lo utilizzi per verificare le proprietà delle animazioni. Preferisca transform e opacity per le proprietà animate.

Il layout thrashing si verifica quando JavaScript alterna la lettura delle proprietà di layout (offsetWidth) e la scrittura delle proprietà di stile all'interno di un ciclo. Ogni scrittura invalida il layout e ogni lettura forza un reflow sincrono. Raggruppi tutte le letture prima di tutte le scritture per evitare il thrashing.

Solo transform e opacity vengono gestite interamente dal compositor quando l'elemento si trova su un layer dedicato. Animare qualsiasi altra proprietà, anche left/top, attiva layout o paint sul main thread e può causare scatti.

I browser promuovono gli elementi su un layer GPU dedicato quando hanno will-change: transform, un'animazione CSS su transform/opacity, una posizione fixed con elementi adiacenti sottoposti a compositing oppure una trasformazione 3D. Ogni layer usa memoria GPU: un numero eccessivo di layer causa pressione sulla memoria.

Una paint storm si verifica quando un'ampia parte della pagina viene ridisegnata a ogni frame. Esegua il profiling in Chrome DevTools → Rendering → Paint flashing per identificare le aree ridisegnate. Isoli gli elementi animati frequentemente su layer propri per contenere l'area ridisegnata.

Registri un profilo delle prestazioni in Chrome DevTools. Il flame chart mostra gli eventi Layout, Update Layer Tree, Paint e Composite. Barre lunghe di layout o paint indicano colli di bottiglia. Punti a tempi di frame inferiori a 16 ms per mantenere 60 fps.

Quando possibile, animi con transform e opacity. Usi clip-path invece di width/height per le animazioni di rivelazione: nei browser moderni, clip-path è efficiente per il compositore. Eviti di animare box-shadow; usi invece opacity insieme a uno pseudo-elemento con un'ombra prerenderizzata.

Quali due proprietà CSS possono essere animate senza attivare il layout o il paint?

La pipeline di rendering — Layout, Paint, Composite — determina le prestazioni delle animazioni. Il layout è l'operazione più costosa, il paint ha un costo moderato e le proprietà che attivano solo il compositing (transform, opacity) vengono gestite dalla GPU. Comprendere i trigger consente di creare animazioni fluide a 60 fps senza layout thrashing o paint storm.