La modalità di disegno continua per la profilazione del colore è ora disponibile in Chrome Canary. Questo articolo spiega come identificare un problema relativo al tempo di colorazione della pagina e come utilizzare questo nuovo strumento per rilevare i colli di bottiglia nelle prestazioni della colorazione.
Analizzare il tempo di pittura sulla pagina
Hai notato che la tua pagina non scorre regolarmente. Ecco come inizieresti ad affrontare il problema. Per il nostro esempio utilizzeremo la pagina demo Things We Left On The Moon di Dan Cederholm.
Apri l'inspector web, avvia una registrazione della sequenza temporale e scorri la pagina verso l'alto e verso il basso. Poi osserva le sequenze temporali verticali per vedere 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). Verranno visualizzate le regioni in cui Chrome viene visualizzato.
Chrome potrebbe rinnovare le aree della pagina per diversi motivi:
- 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 frame.
- L'interazione dell'utente, ad esempio il passaggio del mouse, provoca modifiche di stile per alcuni elementi.
- Qualsiasi altra operazione che causa la modifica del layout della pagina.
In qualità di sviluppatore, devi essere consapevole delle modifiche apportate alla tua pagina.
Guardare i rettangoli di colore è un ottimo modo per farlo. Nello screenshot di esempio in alto puoi vedere che l'intero schermo è coperto da un grande rettangolo dipinto. Ciò significa che l'intero schermo viene ridisegnato mentre scorri, il che non va bene. In questo caso specifico, la causa è lo stile CSS background-attachment:fixed, che fa sì che l'immagine di sfondo della pagina rimanga nella stessa posizione, mentre i contenuti della pagina si spostano sopra mentre scorri.
Se noti che la ricolorazione copre una grande area e/o richiede molto tempo, hai due opzioni:
- Puoi provare a cambiare il layout della pagina per ridurre la quantità di dipinto. Se possibile, Chrome visualizza la pagina visibile solo una volta e aggiunge parti che non erano visibili mentre scorri verso il basso. Tuttavia, in alcuni casi Chrome deve ridipingere determinate aree. Ad esempio, la regola CSS
position:fixed, che viene spesso utilizzata per gli elementi di navigazione che rimangono nella stessa posizione, può causare la modifica del colore. - Se vuoi mantenere il layout della pagina, puoi provare a ridurre il costo della colorazione delle aree che vengono ridisegnate. Non tutti gli stili CSS hanno lo stesso costo di disegno; alcuni hanno un impatto minimo, altri molto. Capire i costi della pittura di alcuni stili può richiedere molto lavoro. Per farlo, attiva/disattiva gli stili nel riquadro Elementi e osserva la differenza nella registrazione della sequenza temporale, il che significa passare da un riquadro all'altro e registrare molte registrazioni. È qui che entra in gioco la modalità pittura continua.
Modalità di pittura continua
La modalità di pittura continua è uno strumento che ti consente di identificare gli elementi costosi sulla pagina. La pagina viene sempre ridipinta, mostrando un contatore del numero di lavori di pittura in corso. Quindi, puoi nascondere gli elementi e modificare gli stili osservando il contatore per capire cosa è lento.
Imposta
Per poter usare la modalità pittura continua devi usare Chrome Canary.
Sui sistemi Linux (e alcuni Mac) devi verificare che Chrome venga eseguito in modalità di composizione. Può essere abilitato in modo permanente utilizzando l'impostazione Composizione GPU su tutte le pagine in about:flags.
Come iniziare
La modalità di pittura continua può essere attivata tramite la casella di controllo Attiva la ricolorazione continua delle pagine nelle impostazioni di Web Inspector (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:
- L'ultimo tempo di colorazione misurato a sinistra.
- Valore minimo e massimo del grafico corrente a destra.
- Un grafico a barre che mostra la cronologia degli ultimi 80 frame in basso (la linea nel grafico indica 16 ms come punto di riferimento).
I tempi 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à Pittura continua per individuare elementi e stili che comportano un costo elevato per la pittura:
- Apri le impostazioni dell'inspector web e seleziona Abilita la ricolorazione continua delle pagine.
- Vai al riquadro Elementi e attraversa l'albero DOM con i tasti freccia o selezionando elementi nella pagina.
- Usa la scorciatoia da tastiera H, un nuovo helper introdotto, per attivare/disattivare la visibilità di un elemento.
- Osserva il grafico del tempo di disegno e prova a individuare un elemento che aggiunge molto tempo alla pittura.
- Esamina 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 della sequenza temporale per verificare se in questo modo la pagina ha migliorato il rendimento.
L'animazione riportata di seguito mostra l'attivazione/disattivazione degli stili e il relativo effetto sul tempo di colorazione:
Questo esempio mostra come la disattivazione di uno degli stili CSS box-shadow
o border-radius riduce di molto il tempo di creazione. L'utilizzo sia di box-shadow sia di border-radius su un elemento comporta operazioni
di disegno molto costose, perché Chrome non può eseguire l'ottimizzazione in tal senso. Pertanto, se hai un elemento
che viene sottoposto a molte revisioni, come nell'esempio, dovresti evitare questa
combinazione.
Note
La modalità Disegno continuo consente di modificare il colore dell'intera pagina visibile. In genere questo non avviene quando navighi in una pagina web. Lo scorrimento di solito consente di visualizzare solo le parti che non sono mai state mostrate. Per le altre modifiche apportate alla pagina, viene ricolorata solo l'area più piccola possibile. Controlla quindi con un'altra registrazione della sequenza temporale se i miglioramenti dello stile hanno avuto un impatto sui tempi di colorazione della pagina.
Quando utilizzi continuous painting mode, potresti scoprire che, ad esempio, gli stili CSS border-radius e box-shadow aggiungono molto tempo alla creazione. Non è sconsigliato usare queste funzionalità in generale, perché sono fantastiche e siamo felici che finalmente ci siano. Tuttavia, è importante sapere quando e dove utilizzarli.
Evita di usarle in aree soggette a molte revisioni e evita un uso eccessivo
in generale.
Demo live
Fai clic qui sotto per vedere una demo in cui Paul irlandese utilizza la verniciatura continua per identificare un'operazione di verniciatura eccezionalmente costosa.