Prestazioni: proprietà trasformabili e soggette a repaint

I browser eseguono il rendering in tre fasi: Layout (dimensioni e posizione) → Paint (pixel) → Composite (unione dei livelli GPU). Animare proprietà che attivano le fasi precedenti è costoso.

Modificare queste proprietà obbliga il browser a ricalcolare il layout, potenzialmente per l'intera pagina. Eviti di animarle:

• width, height
• margin, padding
• top, left
• font-size
• display

Queste proprietà evitano il layout, ma ridisegnano i pixel. Hanno un costo moderato:

• background-color
• color
• box-shadow
• border

Queste proprietà evitano sia il layout sia il paint: il browser deve solo eseguire il compositing dei livelli prerasterizzati. Sono molto economiche e accelerate dalla GPU:

• transform
• opacity

Per animazioni fluide a 60 fps, animi solo transform e opacity. Utilizzi transform: translate() invece di top/left e opacity invece di dissolvenze ottenute con display.

will-change indica al browser di promuovere un elemento al proprio livello GPU prima dell'inizio dell'animazione, evitando un "lampeggio di promozione" durante l'animazione.

Imposti will-change: auto oppure rimuova completamente la proprietà al termine delle animazioni. Mantenere troppi elementi promossi spreca memoria GPU.

Utilizzi la scheda Performance di Chrome DevTools per registrare e analizzare i tempi dei frame. La scheda Rendering può attivare il lampeggiamento del paint (una sovrapposizione verde) per mostrare quali elementi vengono ridisegnati a ogni frame.

L'ottimizzazione più efficace consiste nel sostituire le animazioni posizionali con transform:

Le transizioni del colore di sfondo attivano il repaint, ma non il layout. Sono accettabili per gli elementi piccoli. Per gli sfondi di grandi dimensioni, valuti l'utilizzo di uno pseudo-elemento con una transizione di opacity:

La proprietà contain indica al browser che un elemento e il relativo sottoalbero sono indipendenti. In questo modo limita l'ambito dell'invalidazione del layout e migliora le prestazioni del repaint.

Quali due proprietà CSS possono essere animate nella fase di compositing senza attivare il layout o il paint?

Animare le proprietà del layout (width, top, margin) attiva ricalcoli costosi. Le proprietà del paint (color, background) sono più economiche. Solo transform e opacity vengono animate nella fase di compositing della GPU senza attivare il layout o il paint. Preferisca sempre queste proprietà per ottenere animazioni fluide e performanti.