I browser moderni possono animare due proprietà CSS a basso costo: transform
e opacity
.
Se animisci qualcos'altro,
è probabile che non raggiunga i 60 frame al secondo (FPS).
Questo post spiega il motivo.
Prestazioni dell'animazione e frequenza fotogrammi
È opinione diffusa che una frequenza fotogrammi di 60 FPS sia il target quando si animano elementi sul web. Questa frequenza fotogrammi garantirà la fluidità delle animazioni. Sul web, un frame è il tempo necessario per eseguire tutte le operazioni necessarie per aggiornare e ridipingere 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 in una pagina web, il browser deve seguire i seguenti passaggi sequenziali:
- Stile: calcola gli stili da applicare agli elementi.
- Layout: genera la geometria e la posizione di ogni elemento.
- Vernice: riempi i pixel di ogni elemento.
- Composto: separa gli elementi in livelli e disegnali sullo schermo.
Questi quattro passaggi sono noti come pipeline di rendering del browser.
Quando animiamo qualcosa in una pagina già caricata, dobbiamo ripetere questi passaggi. Questa procedura inizia dal passaggio che deve essere modificato per consentire l'animazione.
Come accennato in precedenza, questi passaggi sono sequenziali. Ad esempio, se animisci un elemento che cambia il layout, devono essere eseguiti di nuovo anche i passaggi di pittura e composizione. L'animazione di un elemento che cambia il layout è quindi più costosa dell'animazione di un elemento che cambia solo la composizione.
Animazione delle proprietà di layout
Le modifiche al layout comportano il calcolo della geometria (posizione e dimensioni) di tutti gli elementi interessati dalla modifica.
Se modifichi un elemento, potrebbe essere necessario ricalcolare la geometria di altri elementi.
Ad esempio, se modifichi la larghezza dell'elemento <html>
, potrebbe essere interessata una qualsiasi delle sue parti secondarie.
A causa del modo in cui gli elementi si sovrappongono e si influenzano a vicenda,
a volte le modifiche più in basso nell'albero possono comportare calcoli del layout fino in alto.
Maggiore è l'albero degli elementi visibili, più tempo occorre per eseguire i calcoli del layout.
Animazione delle proprietà di verniciatura
Paint è il processo che permette di determinare in quale ordine gli elementi devono essere visualizzati sullo schermo. Spesso è l'attività che richiede più tempo di tutte quelle nella pipeline.
La maggior parte delle operazioni di disegno nei browser moderni viene eseguita in rasterizzatori software. A seconda di come gli elementi della tua app sono raggruppati in livelli, potrebbe essere necessario dipingere anche altri elementi oltre a quello modificato.
Animazione delle proprietà composite
La composizione è il processo di separazione della pagina in livelli, di conversione delle informazioni sull'aspetto della pagina in pixel (rasterizzazione) e di unione dei livelli per creare una pagina (composizione).
Per questo motivo, la proprietà opacity
è inclusa nell'elenco degli elementi economici da animare.
Finché questa proprietà si trova nel proprio livello, le relative 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 animazione CSS su opacity
.
Che cos'è un livello?
Posizionando gli elementi che verranno animati o sottoposti a transizione su un nuovo livello, il browser deve solo ridipingere questi elementi e non tutto il resto. Probabilmente conosci il concetto di livello di Photoshop, che contiene una serie di elementi che possono essere spostati insieme. I livelli di rendering del browser sono simili a questa idea.
Anche se il browser prende buone decisioni su quali elementi devono trovarsi in un nuovo livello, se ne manca uno esistono dei modi per forzare la creazione del livello. Scopri di più in 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. Di conseguenza, potresti riscontrare limitazioni della larghezza di banda tra la CPU e la GPU.
Rendimento 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 in un thread noto come thread del compositore. È diverso dal thread principale del browser, in cui vengono eseguiti stile, layout, disegno e JavaScript. Ciò significa che se il browser sta eseguendo alcune attività complesse sul thread principale, queste animazioni possono continuare senza essere interrotte.
Come spiegato in questo articolo, in molti casi anche altre modifiche alle trasformazioni e all'opacità possono essere gestite dal thread del compositore.
Se un'animazione attiva la pittura, il layout o entrambi, il thread principale dovrà eseguire un'operazione. Questo vale sia per le animazioni CSS che per quelle JavaScript. Inoltre, il sovraccarico del layout o della pittura probabilmente supererà qualsiasi lavoro associato all'esecuzione di CSS o JavaScript, rendendo la domanda irrilevante.