I browser moderni possono animare due proprietà CSS a basso costo: transform e opacity.
Se animi qualsiasi altro elemento,
è probabile che non raggiungerai i 60 frame al secondo (FPS) fluidi.
Questo post spiega il motivo.
Prestazioni e frequenza fotogrammi dell'animazione
È generalmente accettato che una frequenza fotogrammi di 60 FPS sia l'obiettivo quando si anima qualsiasi elemento sul web. Questa frequenza fotogrammi garantirà la fluidità delle animazioni. Sul web, un frame è il tempo necessario per eseguire tutte le operazioni richieste per aggiornare e ridisegnare lo schermo. Se ogni frame non viene completato entro 16,7 ms (1000 ms / 60 ≈ 16,7), gli utenti percepiranno il ritardo.
La pipeline di rendering
Per visualizzare qualcosa su una pagina web, il browser deve eseguire i seguenti passaggi sequenziali:
- Stile: calcola gli stili applicati agli elementi.
- Layout: genera la geometria e la posizione di ogni elemento.
- Dipingi: riempi i pixel di ogni elemento.
- Composito: separa gli elementi in livelli e disegna i livelli sullo schermo.
Questi quattro passaggi sono noti come pipeline di rendering del browser.
Quando animi un elemento su una pagina già caricata, questi passaggi devono essere ripetuti. Questo processo inizia dal passaggio che deve essere modificato per consentire l'animazione.
Come accennato in precedenza, questi passaggi sono sequenziali. Ad esempio, se animi un elemento che cambia layout, anche i passaggi di pittura e composizione devono essere eseguiti di nuovo. Animare qualcosa che cambia il layout è quindi più costoso che animare qualcosa che cambia solo la composizione.
Animare le proprietà del layout
Le modifiche al layout comportano il calcolo della geometria (posizione e dimensione) di tutti gli elementi interessati dalla modifica.
Se modifichi un elemento,
potrebbe essere necessario ricalcolare la geometria degli altri elementi.
Ad esempio, se modifichi la larghezza dell'elemento <html>, uno qualsiasi dei relativi elementi secondari potrebbe essere interessato.
A causa del modo in cui gli elementi si sovrappongono e si influenzano a vicenda,
le modifiche più in basso nell'albero possono a volte comportare calcoli del layout fino alla parte superiore.
Più grande è l'albero degli elementi visibili, più tempo è necessario per eseguire i calcoli del layout.
Animare le proprietà di pittura
Paint è il processo che determina l'ordine in cui gli elementi devono essere visualizzati sullo schermo. Spesso è l'attività con la durata più lunga di tutte le attività nella pipeline.
La maggior parte del rendering nei browser moderni viene eseguita in rasterizzatori software. A seconda di come gli elementi della tua app sono raggruppati in livelli, potrebbe essere necessario disegnare anche altri elementi oltre a quello modificato.
Animare le proprietà composite
Il compositing è il processo di separazione della pagina in livelli, conversione delle informazioni sull'aspetto della pagina in pixel (rasterizzazione) e unione dei livelli per creare una pagina (compositing).
Per questo motivo, la proprietà opacity è inclusa nell'elenco degli elementi facili da animare.
Se questa proprietà si trova nel proprio livello, le modifiche possono essere gestite dalla GPU durante il passaggio di composizione.
I browser basati su Chromium e WebKit creano un nuovo livello per qualsiasi elemento con una transizione o un'animazione CSS su opacity.
Che cos'è un livello?
Se posizioni gli elementi da animare o su cui applicare una transizione su un nuovo livello, il browser deve ridisegnare solo questi elementi e non tutti gli altri. Potresti avere familiarità con il concetto di livello di Photoshop, che contiene un insieme di elementi che possono essere spostati insieme. I livelli di rendering del browser sono simili a questa idea.
Anche se il browser prende decisioni corrette su quali elementi devono trovarsi in un nuovo livello, se ne manca uno, esistono modi per forzare la creazione del livello. Per saperne di più, consulta l'articolo Come creare animazioni ad alte prestazioni. Tuttavia, la creazione di nuovi livelli deve essere eseguita con attenzione perché ogni livello utilizza memoria. Sui dispositivi con memoria limitata, la creazione di nuovi livelli potrebbe causare un problema di prestazioni maggiore di quello che stai cercando di risolvere. Inoltre, le texture di ogni livello devono essere caricate sulla GPU. Pertanto, potresti riscontrare limitazioni della larghezza di banda tra la CPU e la GPU.
Rendimento di CSS e JavaScript
Potresti chiederti: dal punto di vista del rendimento, è meglio utilizzare CSS o JavaScript per le animazioni?
Le animazioni basate su CSS e le animazioni web (nei browser che supportano l'API) vengono in genere gestite su un thread noto come thread del compositore. Questo è diverso dal thread principale del browser, in cui vengono eseguiti lo stile, il layout, il rendering e JavaScript. Ciò significa che se il browser sta eseguendo alcune attività dispendiose sul thread principale, queste animazioni possono continuare senza essere interrotte.
Come spiegato in questo articolo, anche altre modifiche a trasformazioni e opacità possono, in molti casi, essere gestite dal thread del compositore.
Se un'animazione attiva il rendering, il layout o entrambi, il thread principale dovrà eseguire il lavoro. Ciò vale sia per le animazioni CSS che per quelle JavaScript e l'overhead di layout o pittura probabilmente supererà qualsiasi lavoro associato all'esecuzione di CSS o JavaScript, rendendo la domanda irrilevante.