La modalità di pittura continua per la profilazione del colore è ora disponibile in Chrome Canary. Questo articolo spiega come identificare un problema relativo al tempo di pittura delle pagine e come utilizzare questo nuovo strumento per rilevare i colli di bottiglia nelle prestazioni di disegno.
Analizzare il tempo di disegno della pagina
Hai notato quindi che la pagina non scorre facilmente. È così che inizieresti ad affrontare il problema. Per fare un esempio, utilizzeremo la pagina demo Things We Left On The Moon di Dan Cederholm.
Aprite l'inspector web, avviate una registrazione della sequenza temporale e scorrete la pagina verso l'alto e verso il basso. Poi osservi le sequenze temporali verticali che mostrano cosa è successo in ogni frame.
Se noti che la maggior parte del tempo viene dedicata alla pittura (grandi barre verdi sopra i 60 fps), devi esaminare più attentamente il motivo. Per esaminare i colori, utilizza l'impostazione Mostra rettangoli di colore dell'inspector web (icona a forma di ingranaggio nell'angolo in basso a destra dell'inspector web). In questo modo vedrai le regioni in cui Chrome esegue il colorazione.
Esistono diversi motivi per cui Chrome ridipinge alcune aree della pagina:
- I nodi DOM vengono modificati in JavaScript e di conseguenza Chrome ricalcola il layout della pagina.
- Sono in riproduzione animazioni che vengono aggiornate in un ciclo basato su fotogrammi.
- L'interazione dell'utente, ad esempio il passaggio del mouse, causa modifiche di stile per alcuni elementi.
- Qualsiasi altra operazione che comporti la modifica del layout della pagina.
In qualità di sviluppatore, devi essere a conoscenza delle modifiche apportate alla tua pagina.
Guardare i rettangoli di colore è un ottimo modo per farlo. Nello screenshot di esempio riportato sopra puoi vedere che l'intero schermo è coperto da un grande rettangolo di pittura. Ciò significa che, mentre scorri, l'intero schermo viene ridipinto, il che non è positivo. In questo caso specifico, questo è causato dallo stile CSS background-attachment:fixed, che fa sì che l'immagine di sfondo della pagina rimanga nella stessa posizione, mentre i contenuti della pagina vengono spostati sopra la pagina mentre scorri.
Se noti che il colore copre un'area molto ampia e/o richiede molto tempo, hai due opzioni:
- Puoi provare a modificare il layout della pagina per ridurre la quantità di pittura. Se possibile, Chrome colora la pagina visibile solo una volta e aggiunge parti che non sono state visibili mentre scorri verso il basso. Tuttavia, in alcuni casi Chrome deve ridipingere determinate aree. Ad esempio, la regola CSS
position:fixed, spesso utilizzata per gli elementi di navigazione che rimangono nella stessa posizione, può causare la modifica. - Se vuoi mantenere il layout della pagina, puoi provare a ridurre i costi di colorazione delle aree che vengono ridipinte. Non tutti gli stili CSS hanno lo stesso costo di verniciatura, alcuni hanno un impatto minimo, altri molto. Calcolare i costi per la pittura di alcuni stili può richiedere molto lavoro. Puoi farlo attivando/disattivando gli stili nel riquadro Elementi e osservando la differenza nella registrazione in Spostamenti, il che significa passare da un riquadro all'altro e registrare molte registrazioni. È qui che entra in gioco la modalità di pittura continua.
Modalità di pittura continua
La modalità di pittura continua è uno strumento che ti consente di identificare gli elementi costosi della pagina. Mette la pagina in uno stato di riverniciatura, mostrando un contatore della quantità di lavori in corso. Poi puoi nascondere gli elementi e modificare gli stili, osservando il contatore, per capire cosa è lento.
Configurazione
Per utilizzare la modalità di disegno continuo, devi usare Chrome Canary.
Sui sistemi Linux (e su alcuni Mac) devi assicurarti che Chrome venga eseguito in modalità di composizione. Questa opzione può essere attivata in modo permanente utilizzando l'impostazione Composizione GPU in tutte le pagine in about:flags.
Come iniziare
La modalità di pittura continua può essere attivata tramite la casella di controllo Attiva colorazione continua delle pagine nelle impostazioni dell'inspector web (icona a forma di ingranaggio nell'angolo in basso a destra dell'inspector web).
Il piccolo display nell'angolo in alto a destra mostra i tempi di colorazione misurati in millisecondi. Nello specifico, mostra:
- L'ultima ora misurata per la colorazione a sinistra.
- I valori minimi e massimi del grafico corrente a destra.
- Un grafico a barre che mostra la cronologia degli ultimi 80 frame nella parte inferiore (la linea nel grafico indica 16 ms come punto di riferimento).
Le misurazioni del tempo di colorazione dipendono dalla risoluzione dello schermo, dalle dimensioni della finestra e dall'hardware su cui è in esecuzione Chrome. Tieni presente che questi aspetti potrebbero essere diversi per i tuoi utenti.
Flusso di lavoro
Ecco come puoi utilizzare la modalità di pittura continua per rintracciare gli elementi e gli stili che comportano un costo elevato di disegno:
- Apri le impostazioni dell'inspector web e seleziona Attiva colorazione continua delle pagine.
- Vai al riquadro Elementi e attraversa l'albero DOM con i tasti freccia o scegliendo elementi sulla pagina.
- Utilizza la scorciatoia da tastiera H, un helper appena introdotto, per attivare/disattivare la visibilità di un elemento.
- Guarda il grafico del tempo di pittura e cerca di individuare un elemento che richiede molto tempo per la pittura.
- Scorri gli stili CSS dell'elemento, attivandoli e disattivandoli mentre guardi il grafico, per trovare lo stile che causa il rallentamento.
- Modifica questo stile ed esegui un'altra registrazione nella sequenza temporale per verificare se ciò ha migliorato le prestazioni della pagina.
La seguente animazione mostra l'attivazione/disattivazione degli stili e il relativo effetto sul tempo di visualizzazione:
Questo esempio mostra come la disattivazione di box-shadow
o border-radius di uno degli stili CSS riduca notevolmente i tempi di disegno. L'utilizzo sia di box-shadow che di border-radius su un elemento comporta operazioni di verniciatura molto costose, perché Chrome non può ottimizzare questa funzionalità. Quindi, se un elemento viene modificato spesso, come nell'esempio, dovresti evitare questa combinazione.
Note
La modalità di pittura continua consente di colorare l'intera pagina visibile. Questo non accade solitamente quando sfogli una pagina web. Lo scorrimento solitamente consente di dipingere solo le parti che prima non erano visibili. Per altre modifiche alla pagina, viene ridipinta solo l'area più piccola possibile. Controlla quindi con un'altra registrazione della sequenza temporale se i miglioramenti dello stile hanno avuto un impatto effettivo sui tempi di visualizzazione della pagina.
Quando utilizzi continuous painting mode, potresti scoprire che, ad esempio, gli stili CSS border-radius e box-shadow comportano molto tempo per il disegno. Non è sconsigliato utilizzare queste funzionalità in generale, sono fantastiche e siamo felici che finalmente siano arrivate. ma è importante sapere quando e dove utilizzarli.
Evita di utilizzarle in aree con molte ricolorazioni ed evita di utilizzarle in generale.
Demo live
Fai clic di seguito per una demo in cui Paul irlandese utilizza la pittura continua per identificare un'operazione di verniciatura costosa.