La vernice è il processo di riempimento dei pixel che alla fine vengono compositi per l'utente. schermate. Spesso è la più lunga tra tutte le attività nella pipeline ed è una da evitare, se possibile.
La vernice è il processo di riempimento dei pixel che alla fine vengono compositi. dell'utente schermate. È spesso la più lunga tra tutte le attività e una da evitare, se possibile.
Riepilogo
- Se modifichi una proprietà escludendo trasformazioni o opacità, viene sempre attivato il colore.
- La vernice è spesso la parte più costosa della pipeline di pixel; evitalo dove puoi.
- Riduci le aree di pittura attraverso la promozione dei livelli e l'orchestrazione delle animazioni.
- Utilizzare il profiler di colorazione di Chrome DevTools per valutare la complessità e i costi della colorazione. e ridurre i costi.
Attivazione di Layout e Paint
Se attivi il layout, attiva sempre la colorazione, poiché la modifica della geometria di un elemento comporta la correzione dei 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 avrà questo aspetto:
Utilizza Chrome DevTools per identificare rapidamente i colli di bottiglia di Paint
Puoi utilizzare Chrome DevTools per identificare rapidamente le aree che vengono tracciate. Apri la scheda Rendering quindi attiva Paint Flashing.
Se attivi questa opzione, Chrome farà lampeggiare lo schermo in verde ogni volta che si colora. Se vedi che l'intero schermo lampeggia in verde o aree dello schermo che non pensavi dovessero essere colorate, dovresti andare più a fondo.
Promuovi elementi che si muovono o sbiadiscono.
Non sempre la colorazione avviene in una singola immagine in memoria. Di fatto, il browser può eseguire la visualizzazione su più immagini o livelli del compositore, se necessario.
Il vantaggio di questo approccio è che gli elementi che vengono regolarmente ridipinti o che si muovono sullo schermo con trasformazioni possono essere gestiti senza influire su altri elementi. Lo stesso vale per i pacchetti di artwork come Sketch, GIMP o Photoshop, in cui i singoli livelli possono essere gestiti e compositi uno sull'altro per creare l'immagine finale.
Il modo migliore per creare un nuovo livello è utilizzare la proprietà CSS will-change. Funzionerà in Chrome, Opera e Firefox e, con il valore transform, creerà un nuovo livello di composizione:
.moving-element {
will-change: transform;
}
Per i browser che non supportano will-change, ma che beneficiano della creazione di livelli, come Safari e Safari per dispositivi mobili, devi utilizzare (in modo improprio) una trasformazione 3D per forzare un nuovo livello:
.moving-element {
transform: translateZ(0);
}
Tuttavia, occorre fare attenzione a non creare troppi strati, poiché ognuno richiede sia la memoria che la gestione. Puoi trovare maggiori informazioni in merito nella sezione Utilizza solo le proprietà del compositore e gestisci il numero dei livelli.
Se hai promosso un elemento a un nuovo livello, utilizza DevTools per verificare che questa operazione ti abbia dato un vantaggio in termini di prestazioni. Non promuovere elementi senza profilazione.
Riduci le aree di colore
A volte, tuttavia, nonostante la promozione degli elementi, i colori sono comunque necessari. Un grande problema dei problemi di vernice è che i browser uniscono due aree che necessitano di verniciatura e ciò può comportare la ricolorazione dell'intero schermo. Ad esempio, se hai un'intestazione fissa nella parte superiore della pagina e qualcosa viene dipinto nella parte inferiore, l'intera schermata potrebbe essere ricolorata.
La riduzione delle aree di colorazione spesso consiste nell'orchestrare le animazioni e le transizioni in modo che non si sovrappongano troppo, oppure nel trovare modi per evitare di animare determinate parti della pagina.
Complessità semplificata della colorazione
Quando si tratta di pittura, alcune cose sono più costose di altre. Ad esempio, qualsiasi cosa che implica una sfocatura (come un'ombra) impiegherà più tempo per dipingere che, ad esempio, tracciare 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 sembrano necessariamente avere caratteristiche di rendimento molto diverse, ma è così.
Il profiler di colorazione riportato sopra ti consentirà di determinare se è necessario esaminare altri modi per ottenere gli effetti. Chiediti se è possibile usare una serie di stili più economica o mezzi alternativi per raggiungere il tuo risultato finale.
In particolare, dove puoi sempre evitare di dipingere durante le animazioni, perché i 10 ms per frame non sono in genere abbastanza lunghi da consentire il completamento della colorazione, soprattutto sui dispositivi mobili.