La colorazione è il processo di compilazione dei pixel che vengono compositi sugli schermi degli utenti. Spesso è l'attività più lunga di tutte le attività nella pipeline e, se possibile, da evitare.
La pittura è il processo di compilazione dei pixel che vengono compositi sugli schermi degli utenti. Spesso è l'attività più lunga di tutte le attività nella pipeline e, se possibile, è da evitare.
Riepilogo
- La modifica di qualsiasi proprietà oltre a trasformazioni o opacità attiva sempre la colorazione.
- La colorazione è spesso la parte più costosa della pipeline di pixel; evitala dove è possibile.
- Ridurre le aree colorate tramite la promozione di livelli e l'orchestrazione di animazioni.
- Utilizza il profiler di paint di Chrome DevTools per valutare la complessità e i costi di colorazione e ridurre dove possibile.
Attivazione di layout e colorazione
Se attivi il layout, attivi sempre la colorazione, poiché la modifica della geometria di un elemento comporta la necessità di correggere i pixel.
Puoi attivare la colorazione anche se modifichi le proprietà non geometriche, come gli sfondi, il colore del testo o le ombre. In questi casi il layout non sarà necessario e la pipeline sarà simile a questa:
Utilizza Chrome DevTools per identificare rapidamente i colli di bottiglia della colorazione
Puoi utilizzare Chrome DevTools per identificare rapidamente le aree che vengono colorate. Apri la scheda Rendering e attiva Paint Flashing.
Quando questa opzione è attiva, lo schermo di Chrome lampeggerà in verde ogni volta che dipingi. Se vedi che l'intero schermo lampeggia in verde o aree dello schermo che pensi non debbano essere dipinte, dovresti andare più a fondo.
Promuovere elementi che si muovono o si dissolveno
La pittura non viene sempre eseguita in una singola immagine in memoria. Infatti, è possibile che il browser dipinga in più immagini o livelli compositor, se necessario.
Il vantaggio di questo approccio è che gli elementi che vengono ridipinti regolarmente, o che si muovono sullo schermo con delle trasformazioni, possono essere gestiti senza influire sugli altri elementi. È come con pacchetti artistici come Sketch, GIMP o Photoshop, in cui i singoli livelli possono essere gestiti e compositi uno sopra l'altro per creare l'immagine finale.
Il modo migliore per creare un nuovo livello è utilizzare la proprietà CSS will-change. Questa opzione funziona in Chrome, Opera e Firefox e, con il valore transform, verrà creato un nuovo livello compositor:
.moving-element {
will-change: transform;
}
Per i browser che non supportano will-change, ma beneficiano della creazione di livelli, come Safari e Safari per dispositivi mobili, è necessario utilizzare (fuori) una trasformazione 3D per forzare un nuovo livello:
.moving-element {
transform: translateZ(0);
}
Non è però necessario creare troppi livelli, poiché ogni livello richiede sia memoria sia gestione. Puoi trovare ulteriori informazioni in merito nella sezione Mantieni solo le proprietà compositor e gestisci il conteggio livelli.
Se hai promosso un elemento a un nuovo livello, utilizza DevTools per verificare che questa operazione abbia un vantaggio in termini di prestazioni. Non promuovere elementi senza profilazione.
Ridurre le aree di verniciatura
A volte, tuttavia, nonostante la promozione di elementi, è comunque necessario colorare. Una grande sfida per i problemi di verniciatura è che i browser uniscono due aree che richiedono una verniciatura, il che può comportare la ridipintura dell'intero schermo. Ad esempio, se nella parte superiore della pagina è presente un'intestazione fissa e qualcosa che viene dipinto nella parte inferiore dello schermo, è possibile che l'intero schermo venga ridipinto.
La riduzione delle aree di colore è spesso il caso dell'orchestrazione di animazioni e transizioni per non sovrapporsi troppo o di trovare modi per evitare di animare determinate parti della pagina.
Semplifica la complessità della colorazione
Quando si parla di dipingere, alcune cose sono più costose di altre. Ad esempio, tutto ciò che implica una sfocatura (come un'ombra, per esempio) impiegherà più tempo per dipingere rispetto a disegnare un riquadro rosso. In termini di CSS, tuttavia, questo non è sempre ovvio: background: red; e box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); non hanno necessariamente caratteristiche di rendimento molto diverse, ma sì.
Il profiler del colore qui sopra ti consentirà di stabilire se devi cercare altri modi per ottenere degli effetti. Chiediti se è possibile utilizzare un insieme di stili più economico o mezzi alternativi per ottenere il risultato finale.
Invece, evita sempre di dipingere durante le animazioni, dato che i 10 ms di cui hai a disposizione per fotogramma di solito non sono sufficienti per completare la colorazione, soprattutto sui dispositivi mobili.