La composizione è il processo in cui le parti della pagina che sono state dipinte vengono messe insieme per essere visualizzate sullo schermo. Le animazioni non composite richiedono più lavoro e possono apparire scadenti (non fluide) su smartphone di fascia bassa o quando vengono eseguite attività ad alte prestazioni sul thread principale.
In quest'area, due fattori chiave influiscono sulle prestazioni della pagina: il numero di livelli del compositore che devono essere gestiti e le proprietà che utilizzi per le animazioni.
Riepilogo
- Limita le animazioni alle modifiche di trasformazione e opacità.
- Promuovi gli elementi in movimento con
will-changeotranslateZ. - Evita di utilizzare eccessivamente le regole di promozione; i livelli richiedono memoria e gestione.
Utilizza le modifiche di trasformazione e opacità per le animazioni
La versione con il rendimento migliore della pipeline di pixel evita sia il layout che la pittura e richiede solo modifiche alla composizione:
Per farlo, dovrai limitarti a modificare le proprietà che possono essere gestite solo dal compositore. Oggi esistono solo due proprietà per cui questo è vero: transform e opacity:
L'avvertenza per l'utilizzo di transform e opacity è che l'elemento su cui modifichi queste proprietà deve trovarsi sul proprio livello di composizione. Per creare un livello, devi promuovere l'elemento, un'operazione che illustreremo di seguito.
Promuovi gli elementi che prevedi di animare
Come accennato nella sezione "Semplifica la complessità della pittura e riduci le aree di pittura", devi promuovere gli elementi che prevedi di animare (entro limiti ragionevoli, non esagerare) al loro livello:
.moving-element {
will-change: transform;
}
In alternativa, per i browser meno recenti o che non supportano will-change:
.moving-element {
transform: translateZ(0);
}
Gestisci i livelli ed evita le esplosioni dei livelli
Sapendo che i livelli spesso migliorano le prestazioni, potresti essere tentato di promuovere tutti gli elementi della pagina con un codice simile al seguente:
* {
will-change: transform;
transform: translateZ(0);
}
In altre parole, vuoi promuovere ogni singolo elemento della pagina. Il problema è che ogni livello creato richiede memoria e gestione, e questo ha un costo. Infatti, sui dispositivi con memoria limitata, l'impatto sulle prestazioni può superare di gran lunga qualsiasi vantaggio della creazione di un livello. Le texture di ogni livello devono essere caricate sulla GPU, quindi esistono ulteriori vincoli in termini di larghezza di banda tra CPU e GPU e di memoria disponibile per le texture sulla GPU.
Utilizza Chrome DevTools per comprendere i livelli della tua app
Per comprendere i livelli della tua applicazione e il motivo per cui un elemento ha un livello, devi attivare il profiler di pittura nella cronologia di Chrome DevTools:
Con questa opzione attivata, dovresti effettuare una registrazione. Al termine della registrazione, potrai fare clic sui singoli frame, che si trovano tra le barre dei frame al secondo e i dettagli:
Se fai clic su questa opzione, nei dettagli verrà visualizzata una nuova opzione: una scheda dei livelli.
Questa opzione visualizza una nuova vista che ti consente di eseguire la panoramica, la scansione e lo zoom su tutti i livelli durante quel frame, oltre ai motivi per cui è stato creato ogni livello.
Utilizzando questa visualizzazione, puoi monitorare il numero di livelli che hai. Se dedichi molto tempo alla composizione durante azioni critiche per le prestazioni, come lo scorrimento o le transizioni (dovresti puntare a circa 4-5 ms), puoi utilizzare le informazioni riportate qui per vedere quanti livelli hai, perché sono stati creati e, da lì, gestire il numero di livelli nella tua app.