Semplifica la complessità di Paint e riduci le Aree di Paint

Paint è il processo di riempimento dei pixel per l'eventuale composizione di immagini sugli schermi degli utenti. Spesso presenta un'esecuzione più lunga di tutte le altre attività in programma ed è quindi da evitare se possibile.

TL;DR

  • La modifica di qualsiasi proprietà oltre a trasformazioni o opacità attiva sempre il paint.
  • Paint è spesso la parte più costosa della pipeline di pixel; evitalo quando puoi.
  • Riduci le aree di paint attraverso la promozione dei livelli e l'orchestrazione delle animazioni.
  • Usa il paint profiler di Chrome DevTools per valutare la complessità e il costo di paint; riducila dove puoi.

Attiva Layout e Paint

Attivando il layout, attivi sempre il paint poiché la modifica della geometria di un elemento comporta anche la correzione dei pixel!

The full pixel pipeline.

Puoi anche attivare il paint se modifichi le proprietà non geometriche, come sfondi, colore del testo o ombre. In quei casi il layout non sarà necessario e la pipeline sarà simile a questa:

The pixel pipeline without layout.

Utilizza Chrome DevTools per identificare rapidamente i colli di bottiglia di paint

The show paint rectangles option in DevTools.

Puoi utilizzare Chrome DevTools per identificare rapidamente le aree che vengono dipinte. Vai a DevTools e premi il tasto Esc sulla tastiera. Vai alla scheda Rendering nel pannello visualizzato e seleziona Show paint rectangles.

Con questa opzione attivata Chrome evidenzierà in verde sullo schermo ogni volta che si verifica un paint. Se vedi lampeggiare in verde l'intero schermo o aree dello schermo che non pensavi dovessero essere dipinte allora dovresti approfondire un po'.

The page flashing green whenever painting occurs.

The toggle to enable paint profiling in Chrome DevTools.

C'è un'opzione nella timeline di Chrome DevTools che ti darà più informazioni: un paint profiler. Per abilitarla vai sulla Timeline ed abilita la casella Paint in alto. È importante attivarlo solo quando desideri analizzare i problemi relativi al paint , poiché comporta un sovraccarico e distorce il profiling delle prestazioni. È meglio usarlo quando vuoi maggiori informazioni su cosa viene disegnato esattamente.

The button to bring up the paint profiler.

Da qui è ora possibile eseguire una registrazione della timeline ed i record di paint porteranno molti più dettagli. Facendo click su un record di paint in un frame ora avrai accesso al Paint Profiler per quel frame:

Facendo clic sul paint profiler viene mostrata una visualizzzione in cui puoi vedere cosa è stato disegnato, quanto tempo è trascorso e le singole chiamate di paint richieste:

Chrome DevTools Paint Profiler.

Questo profiler ti consente di conoscere sia l'area che la complessità (che rappresenta il tempo necessario per il disegno) ed entrambe sono aree che puoi cercare di risolvere, se evitare di dipingere non è un'opzione.

Promuovi elementi con movimento o dissolvenza

Il Paint non viene sempre eseguito per singola immagine in memoria. In effetti è possibile che il browser disegni più immagini o livelli di composizione se necessario.

A representation of compositor layers.

Il vantaggio di questo approccio è che gli elementi ridisegnati regolarmente, o che si spostano sullo schermo a causa delle trasformazioni, possono essere gestiti senza influenzare altri elementi. È lo stesso dei pacchetti grafici come Sketch, GIMP o Photoshop, in cui i singoli livelli possono essere gestiti e composti l'uno sopra l'altro per creare l'immagine finale.

Il modo migliore per creare un nuovo livello è utilizzare la proprietà CSS will-change. Funziona in Chrome, Opera e Firefox e, con un valore transform, creerà un nuovo livello di composizione:

.moving-element {
  will-change: transform;
}

Per i browser che non supportano will-change ma beneficiano della creazione di livelli, come Safari e Mobile Safari, è necessario utilizzare (incorrettamente) una trasformazione 3D per forzare un nuovo livello:

.moving-element {
  transform: translateZ(0);
}

Bisogna tuttavia fare attenzione a non creare troppi livelli poiché ogni livello richiede sia memoria che gestione. Vi sono ulteriori informazioni su questo argomento nella sezione Attieniti alle proprietà di sola composizione e al conteggio della gestione livelli.

Se hai alzato di livello un elemento, usa DevTools per confermare che questo ti dia un vantaggio in termini di prestazioni. Non promuovere elementi senza profiling.

Riduci le aree di paint

A volte, nonostante l'avanzamento degli elementi, il lavoro di paint è ancora necessario. Una delle maggiori problematiche relative al paint è che i browser uniscono insieme due aree che richiedono il paint con il risultato di eseguire una modifica al disegno dell'intero schermo. Ad esempio, se hai un'intestazione fissa nella parte superiore della pagina e qualcosa viene dipinto nella parte inferiore dello schermo, l'intero schermo potrebbe essere ridisegnato.

Ridurre le aree di paint spesso significa gestire le animazioni e le transizioni in modo che non si sovrappongano più di tanto o trovare modi per evitare di animare alcune parti della pagina.

Semplifica la complessità di paint

The time taken to paint part of the screen.

Quando si tratta di painting, alcune cose richiedono più risorse di altre. Ad esempio, qualsiasi cosa che implichi una sfocatura (come un'ombra ad esempio) richiederà più tempo del disegno di una casella rossa. In termini di CSS tuttavia questo non è sempre ovvio: background: red; e box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); non sembra necessariamente che abbiano caratteristiche di performance molto diverse ma è così.

Il paint profiler di cui abbiamo paralto ti permetterà di determinare se devi cercare altri modi per ottenere un effetto. Chiediti se è possibile utilizzare una serie più economica di stili o mezzi alternativi per raggiungere il risultato finale.

Dove possibile puoi sempre evitare di disegnare durante le animazioni in particolare, dato che i 10 ms che hai per frame normalmente non sono abbastanza lunghi per il lavoro di paint, specialmente sui dispositivi mobili.

Translated by