Il compositing è il processo in cui le parti dipinte della pagina vengono unite per essere visualizzate sullo schermo.
La composizione è il punto in cui le parti dipinte della pagina vengono messe insieme per essere visualizzate 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
- Limitati alle modifiche di trasformazione e opacità per le animazioni.
- Promuovi gli elementi in movimento con
will-changeotranslateZ. - Evita di utilizzare eccessivamente le regole di promozione; i livelli richiedono memoria e gestione.
Utilizzare le modifiche di trasformazione e opacità 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. Attualmente esistono solo due proprietà per le quali questo è vero: transform e opacity:
Un'avvertenza per l'uso degli elementi transform 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.
Promuovi gli elementi che prevedi di animare
Come menzionato nella sezione "Semplifica la complessità del disegno e riduci le aree di colorazione", ti consigliamo di promuovere gli elementi che intendi animare (entro limiti ragionevoli, senza esagerare) nei rispettivi livelli:
.moving-element {
will-change: transform;
}
In alternativa, per i browser meno recenti o quelli che non supportano will-change:
.moving-element {
transform: translateZ(0);
}
Gestisci i livelli ed evita le esplosioni dei livelli
È quindi forse allettante, sapendo che i livelli spesso migliorano il rendimento, promuovere tutti gli elementi della pagina con qualcosa di simile al seguente:
* {
will-change: transform;
transform: translateZ(0);
}
In altre parole, vuoi promuovere ogni singolo elemento della pagina. Il problema è che ogni livello che crei richiede memoria e gestione, il che non è gratuito. 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 sulla GPU, quindi ci sono ulteriori vincoli in termini di larghezza di banda tra CPU e GPU e memoria disponibile per le texture sulla GPU.
Utilizzare Chrome DevTools per comprendere i livelli dell'app
Per comprendere i livelli della tua applicazione e il motivo per cui un elemento ha un livello, devi attivare il profiler di pittura in Spostamenti di DevTools di Chrome:
Una volta attivata questa opzione, dovresti acquisire 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 verrà visualizzata una nuova scheda: la scheda del livello.
Questa opzione consente di visualizzare una nuova vista che ti permette di eseguire la panoramica, la scansione e lo zoom su tutti i livelli durante il fotogramma, nonché i motivi per cui è stato creato ciascun livello.
Con questa visualizzazione puoi tenere traccia del numero di livelli disponibili. Se impieghi molto tempo per il compositing durante azioni critiche per il rendimento come lo scorrimento o le transizioni (dovresti mirare a circa 4-5 ms), puoi utilizzare le informazioni riportate di seguito per vedere quanti livelli hai, perché sono stati creati e da lì gestire il conteggio dei livelli nella tua app.