La composizione è il punto in cui le parti dipinte della pagina vengono messe insieme per la visualizzazione sullo schermo.
La composizione è il punto in cui le parti dipinte della pagina vengono assemblate visualizzati sullo schermo.
Due fattori chiave in quest'area influiscono sulle prestazioni della pagina: il numero di livelli del compositore che devono essere gestiti e le proprietà che utilizzi per le animazioni.
Riepilogo
- Continua per trasformare e modificare l'opacità delle tue animazioni.
- Promuovi gli elementi in movimento con
will-changeotranslateZ. - Evita di fare un uso eccessivo delle regole delle promozioni. richiedono memoria e gestione.
Usa le modifiche di opacità e trasformazione per le animazioni
La versione della pipeline di pixel con le migliori prestazioni evita sia il layout che la colorazione e richiede solo le modifiche di composizione:
A tal fine, è necessario attenersi alla modifica delle proprietà che possono essere gestite solo dal compositore. Oggi esistono solo due proprietà per le quali questo è vero: transforms e opacity:
Un'avvertenza per l'uso degli attributi transforms e opacity è che l'elemento su cui modifichi queste proprietà deve trovarsi sul suo livello compositore. Per creare un livello, devi promuovere l'elemento, di cui parleremo più avanti.
Promuovere gli elementi che prevedi di animare
Come accennato nella sezione "Semplifica la complessità del colore e riduci le aree di pittura" , devi promuovere gli elementi che intendi animare (entro limiti ragionevoli, non esagerare!) al loro livello:
.moving-element {
will-change: transform;
}
Altrimenti, per i browser meno recenti o quelli che non li 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 essere allettante, quindi, promuovere tutti gli elementi della pagina con qualcosa di simile a quanto segue:
* {
will-change: transform;
transform: translateZ(0);
}
In altre parole, si vuole promuovere ogni singolo elemento della pagina. Il problema qui è che ogni livello che crei richiede memoria e gestione, e non è senza costi. Infatti, sui dispositivi con memoria limitata, l'impatto sulle prestazioni può di gran lunga superiore a qualsiasi vantaggio derivante dalla creazione di uno strato. Le texture di ogni livello devono essere caricate nella GPU, quindi ci sono ulteriori vincoli in termini di larghezza di banda tra CPU e GPU e memoria disponibile per le texture sulla GPU.
Usa Chrome DevTools per comprendere i livelli della tua app
Per comprendere i livelli nella tua applicazione e il motivo per cui un elemento ha un livello, devi attivare il profiler di colorazione in Chrome DevTools Sequenza temporale:
Quando questa opzione è attiva, dovresti registrare una registrazione. Al termine della registrazione, potrai fare clic sui singoli fotogrammi, che si trovano tra le barre dei fotogrammi al secondo e i dettagli:
Se fai clic su questa opzione, nei dettagli visualizzerai una nuova opzione: la scheda Livelli.
Questa opzione ti consente di visualizzare una nuova visualizzazione che ti consente di eseguire la panoramica, la scansione e lo zoom su tutti i livelli durante il frame, insieme ai motivi per cui ogni livello è stato creato.
Con 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 (dovresti puntare a circa 4-5 ms), puoi utilizzare queste informazioni per vedere di quanti livelli hai, perché sono stati creati e da lì gestire il numero dei livelli nella tua app.