La composizione è il luogo in cui le parti dipinte della pagina vengono assemblate per essere mostrate sullo schermo.
La composizione è il luogo in cui le parti dipinte della pagina vengono unite per essere mostrate sullo schermo.
In quest'area ci sono due fattori chiave che influiscono sulle prestazioni delle pagine: il numero di livelli del compositore che devono essere gestiti e le proprietà che utilizzi per le animazioni.
Riepilogo
- Attieniti alle modifiche per trasformare e opacità per le animazioni.
- Promuovi elementi in movimento con
will-changeotranslateZ. - Evita di utilizzare troppe regole di promozione, in quanto i livelli richiedono memoria e gestione.
Utilizzare le modifiche di trasformazione e opacità per le animazioni
La versione con le prestazioni migliori della pipeline di pixel evita sia layout che paint e richiede solo modifiche di composizione:
Per ottenere questo risultato, dovrai attenerti alla modifica delle proprietà che possono essere gestite solo dal compositore. Oggi esistono solo due proprietà per le quali questa regola è vera: transforms e opacity:
Il avvertimento per l'uso di transform e opacity è che l'elemento su cui modifichi queste proprietà deve trovarsi sul suo livello compositor. Per creare un livello, devi promuovere l'elemento, di cui parleremo più avanti.
Promuovere gli elementi che intendi animare
Come accennato nella sezione "Semplifica la complessità della colorazione e riduci le aree di colorazione", devi promuovere gli elementi che intendi animare (entro i limiti consentiti, senza esagerare) nel relativo livello:
.moving-element {
will-change: transform;
}
In alternativa, per i browser meno recenti o che non supportano, cambieranno:
.moving-element {
transform: translateZ(0);
}
Gestisci i livelli ed evita le esplosioni dei livelli
Sapere che i livelli spesso favoriscono il rendimento potrebbe avere la tentazione di promuovere tutti gli elementi della pagina con qualcosa come il seguente:
* {
will-change: transform;
transform: translateZ(0);
}
Si tratta di un modo inopportuno per indicare che vuoi promuovere ogni singolo elemento della pagina. Il problema qui è che ogni livello che crei richiede memoria e gestione, ma questo non è senza costi. 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 nella GPU, quindi sono previsti 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 nella tua app
Per comprendere i livelli della tua applicazione e il motivo per cui un elemento ha un livello, devi attivare il profiler Paint nella cronologia di Chrome DevTools:
Quando questa opzione è attiva, dovresti registrare una registrazione. Al termine della registrazione potrai fare clic sui singoli frame, che si trova tra le barre dei frame al secondo e i dettagli:
Se fai clic su questa opzione, verrà visualizzata una nuova opzione nei dettagli: la scheda del livello.
Questa opzione apre una nuova visualizzazione che ti consente di eseguire la panoramica, la scansione e lo zoom su tutti i livelli durante il fotogramma, insieme ai motivi per cui ogni livello è stato creato.
In questa visualizzazione puoi tenere traccia del numero di livelli disponibili. Se dedichi molto tempo alla composizione durante azioni critiche per le prestazioni come lo scorrimento o le transizioni (l'obiettivo dovrebbe essere di circa 4-5 ms), puoi utilizzare queste informazioni per vedere di quanti livelli hai, perché sono stati creati e da lì gestire il numero di livelli nella tua app.