La vernice è il processo di riempimento dei pixel che alla fine vengono compositi. schermo dell'utente. È spesso la più lunga tra tutte le attività nella pipeline, e una da evitare, se possibile.
Riepilogo
- La modifica di qualsiasi proprietà, ad eccezione delle trasformazioni o dell'opacità, attiva sempre la pittura.
- La pittura è spesso la parte più costosa della pipeline di Pixel. Evitali 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.
Come vengono attivati layout e colorazione
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 in cui viene eseguita la pittura. Apri la scheda Rendering quindi attiva Paint Flashing.
Se questa opzione è attiva, Chrome fa lampeggiare lo schermo in verde ogni volta che viene eseguito il disegno. Se vedi che l'intero schermo lampeggia in verde o aree dello schermo che non pensavi debbano 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 ridipinti regolarmente o che si spostano sullo schermo con le 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, disponibile in tutti i principali motori dei browser moderni. Utilizzando il valore transform, will-change creerà un nuovo livello del compositore:
.moving-element {
will-change: transform;
}
Tuttavia, è necessario fare attenzione a non creare troppi livelli, poiché ogni livello richiede memoria e 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, però, nonostante la presenza di elementi che ne favoriscono la promozione, è comunque necessaria la verniciatura. 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 nella parte superiore della pagina è presente un'intestazione fissa e nella parte inferiore dello schermo viene visualizzato un elemento, l'intero schermo potrebbe essere ridipinto.
La riduzione delle aree di colorazione spesso consiste nell'orchestrare le animazioni e le transizioni in modo che non si sovrappongano troppo o nel trovare modi per evitare di animare alcune parti della pagina.
Semplificare la complessità della pittura
Quando si tratta di pittura, alcuni prodotti sono più costosi di altri. Ad esempio, qualsiasi elemento che prevede una sfocatura (ad esempio un'ombra) richiederà più tempo per essere dipinto rispetto, ad esempio, al disegno di un riquadro rosso. In termini di CSS, tuttavia, questo non è sempre evidente: background: red; e box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); non sembrano necessariamente avere caratteristiche di prestazioni molto diverse, ma è così.
Come mostrato nello screenshot precedente, lo strumento di profilazione della pittura ti consente di determinare se devi esaminare altri modi per ottenere gli effetti. Chiediti se è possibile usare un insieme di stili più economico o mezzi alternativi per ottenere il risultato finale.
In particolare, dove si può 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.