La modalità di pittura continua per il profilo di pittura è ora disponibile in Chrome Canary. Questo articolo spiega come identificare un problema nel tempo di rendering della pagina e come puoi utilizzare questo nuovo strumento per rilevare i colli di bottiglia nelle prestazioni di rendering.
Esaminare il tempo di pittura nella tua pagina
Hai notato che la pagina non scorre in modo fluido. Ecco come iniziare a risolvere il problema. Per il nostro esempio, utilizzeremo la pagina demo Things We Left On The Moon di Dan Cederholm.
Apri l'ispezione web, avvia una registrazione della sequenza temporale e scorri la pagina verso l'alto e verso il basso. Poi guardi le sequenze temporali verticali, che mostrano cosa è successo in ogni fotogramma.
Se noti che la maggior parte del tempo viene spesa per la pittura (grandi barre verdi sopra i 60 fps), devi esaminare più da vicino il motivo. Per esaminare le vernici, utilizza l'impostazione Mostra rettangoli di vernice dell'ispettore web (icona a forma di ingranaggio nell'angolo in basso a destra dell'ispettore web). Verranno visualizzate le regioni in cui Chrome dipinge.
Esistono diversi motivi per cui Chrome deve ridipingere aree della pagina:
- I nodi DOM vengono modificati in JavaScript, il che fa sì che Chrome ricalcoli il layout della pagina.
- Le animazioni vengono riprodotte e aggiornate in un ciclo basato sui frame.
- L'interazione dell'utente, ad esempio il passaggio del mouse, provoca modifiche dello stile in determinati elementi.
- Qualsiasi altra operazione che causa la modifica del layout della pagina.
In qualità di sviluppatore, devi essere consapevole delle ridisegni che si verificano nella tua pagina.
Uno dei modi migliori per farlo è guardare i rettangoli di colore. Nell'esempio
screenshot qui sopra puoi vedere che l'intero schermo è coperto da un grande rettangolo
di pittura. Ciò significa che l'intero schermo viene ridisegnato durante lo scorrimento, il che non è un buon segno. In questo caso specifico, il problema è causato dallo stile CSSbackground-attachment:fixed che fa sì che l'immagine di sfondo della pagina rimanga nella stessa posizione mentre i contenuti della pagina si spostano sopra man mano che scorri.
Se rilevi che le ridipinture coprono una vasta area e/o richiedono molto tempo, hai due opzioni:
- Puoi provare a modificare il layout della pagina per ridurre la quantità di pittura. Se possibile, Chrome dipinge la pagina visibile una sola volta e aggiunge le 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, spesso utilizzata per gli elementi di navigazione che rimangono nella stessa posizione, può causare questi ridisegni. - Se vuoi mantenere il layout della pagina, puoi provare a ridurre il costo della pittura delle aree che vengono ridipinte. Non tutti gli stili CSS hanno lo stesso costo di pittura, alcuni hanno un impatto ridotto, altri molto. Stabilire i costi di pittura di determinati stili può richiedere molto lavoro. Per farlo, puoi attivare/disattivare gli stili nel riquadro Elementi e osservare la differenza nella registrazione di Spostamenti, il che significa passare da un riquadro all'altro ed eseguire molte registrazioni. È qui che entra in gioco la modalità di pittura continua.
Modalità di disegno continuo
La modalità di disegno continuo è uno strumento che ti aiuta a identificare gli elementi che hanno un costo elevato nella pagina. Mette la pagina in uno stato di ridipingitura continua, mostrando un contatore del lavoro di pittura in corso. Poi, puoi nascondere gli elementi e modificare gli stili, osservando il contatore, per capire cosa rallenta.
Configurazione
Per utilizzare la modalità di disegno continuo, devi utilizzare Chrome Canary.
Sui sistemi Linux (e su alcuni Mac) devi assicurarti che Chrome venga eseguito in modalità compositing. Questa opzione può essere attivata definitivamente utilizzando l'impostazione Composizione GPU su tutte le pagine in about:flags.
Come iniziare
La modalità di disegno continuo può essere attivata tramite la casella di controllo Attiva il ridisegnare continuo della pagina nelle impostazioni di Web Inspector (icona a forma di ingranaggio nell'angolo in basso a destra di Web Inspector).
Il piccolo display nell'angolo in alto a destra mostra i tempi di pittura misurati in millisecondi. Nello specifico, mostra:
- L'ultimo tempo di paint misurato a sinistra.
- Il minimo e il 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).
Le misurazioni del tempo di aggiornamento dipendono dalla risoluzione dello schermo, dalle dimensioni della finestra e dall'hardware su cui è in esecuzione Chrome. Tieni presente che queste cose potrebbero essere diverse per i tuoi utenti.
Flusso di lavoro
Ecco come utilizzare la modalità di pittura continua per individuare elementi e stili che aumentano notevolmente il costo della pittura:
- Apri le impostazioni di Strumento di ispezione web e seleziona Attiva la ridipintura continua della pagina.
- Vai al riquadro Elementi e attraversa l'albero DOM con i tasti freccia o selezionando gli elementi nella pagina.
- Utilizza la scorciatoia da tastiera H, un'utilità appena introdotta, per attivare/disattivare la visibilità di un elemento.
- Esamina il grafico del tempo di pittura e cerca di individuare un elemento che aggiunge molto tempo di pittura.
- Esamina gli stili CSS dell'elemento, attivandoli e disattivandoli mentre osservi il grafico, per trovare lo stile che causa il rallentamento.
- Modifica questo stile ed esegui un'altra registrazione di Spostamenti per verificare se il rendimento della tua pagina è migliorato.
L'animazione seguente mostra l'attivazione/la disattivazione degli stili e il relativo impatto sul tempo di pittura:
Questo esempio mostra come la disattivazione di uno degli stili CSS box-shadow
o border-radius riduca notevolmente il tempo di disegno. L'utilizzo sia di box-shadow che di border-radius su un elemento comporta operazioni di pittura molto costose, perché Chrome non può eseguire l'ottimizzazione in base a questo. Pertanto, se hai un elemento che richiede molti ritocchi, come nell'esempio, devi evitare questa combinazione.
Note
La modalità di disegno continuo ridisegna l'intera pagina visibile. In genere, non è così quando si naviga su una pagina web. Di solito, lo scorrimento mostra solo le parti che non erano visibili in precedenza. Per le altre modifiche apportate alla pagina, viene ridisegnata solo la piú piccola area possibile. Pertanto, controlla con un'altra registrazione della cronologia se i miglioramenti allo stile hanno effettivamente influito sui tempi di aggiornamento della pagina.
Quando utilizzi continuous painting mode, potresti scoprire che, ad esempio, gli stili CSS border-radius e box-shadow aumentano notevolmente il tempo di pittura. Non è sconsigliato utilizzare queste funzionalità in generale, sono fantastiche e siamo felici che finalmente siano disponibili. Tuttavia, è importante sapere quando e dove utilizzarle.
Evita di utilizzarli in aree con molti ritocchi e di abusarne in generale.
Demo live
Fai clic di seguito per una demo in cui Paul Irish utilizza la pittura continua per identificare un'operazione di pittura particolarmente costosa.