Analizza le prestazioni del runtime

Le prestazioni di runtime indicano il rendimento della tua pagina quando è in esecuzione anziché durante il caricamento. Questo tutorial spiega come utilizzare il riquadro delle prestazioni di Chrome DevTools per analizzare le prestazioni di runtime. Per quanto riguarda il modello RAIL, le competenze apprese in questo tutorial sono utili per analizzare le fasi di risposta, animazione e inattività della pagina.

Inizia

In questo tutorial apri DevTools in una pagina pubblicata e utilizzi il riquadro Prestazioni per trovare un collo di bottiglia delle prestazioni nella pagina.

1. Apri Google Chrome in modalità di navigazione in incognito. La modalità di navigazione in incognito garantisce l'esecuzione di Chrome senza problemi. Ad esempio, se hai installato molte estensioni, queste potrebbero creare rumore nelle misurazioni del rendimento.

2. Carica la pagina seguente nella finestra di navigazione in incognito. Questa è la demo che profilerai. La pagina mostra una serie di quadratini blu che si spostano verso l'alto e verso il basso.

   https://googlechrome.github.io/devtools-samples/jank/

3. Premi Comando+Opzione+I (Mac) o Ctrl+Maiusc+I (Windows, Linux) per aprire DevTools.

   

   Figura 1. La demo a sinistra e DevTools a destra

Simula una CPU mobile

I dispositivi mobili hanno molta meno potenza della CPU rispetto ai computer desktop e ai laptop. Ogni volta che profila una pagina, utilizza la limitazione della CPU per simulare le prestazioni della pagina sui dispositivi mobili.

1. In DevTools, fai clic sulla scheda Prestazioni.
2. Assicurati che la casella di controllo Screenshot sia attivata.
3. Fai clic su Impostazioni acquisizione . DevTools rivela le impostazioni relative al modo in cui acquisisce le metriche sulle prestazioni.

4. In CPU, seleziona Rallenta 2x. DevTools limita la CPU, rendendola due volte più lenta del solito.

   

   Figura 2. Limitazione CPU con contorno blu

Configura la demo

È difficile creare una demo sulle prestazioni di runtime che funzioni in modo coerente per tutti i lettori di questo sito web. Questa sezione ti consente di personalizzare la demo per garantire che la tua esperienza sia relativamente coerente con gli screenshot e le descrizioni che vedi in questo tutorial, indipendentemente dalla tua configurazione specifica.

1. Continua a fare clic su Aggiungi 10 finché i quadrati blu non si spostano notevolmente più lentamente di prima. Su una macchina di fascia alta, potrebbero essere necessari circa 20 clic.

2. Fai clic su Ottimizza. I quadrati blu dovrebbero muoversi più velocemente e in modo più fluido.

3. Fai clic su Annulla ottimizzazione. I riquadri blu si muovono più lentamente e con ancora più jank.

Registra le prestazioni di runtime

Quando è stata pubblicata la versione ottimizzata della pagina, i quadrati blu si muovono più velocemente. Why is that? Entrambe le versioni dovrebbero spostare ogni quadrato per la stessa quantità di spazio e nello stesso tempo. Registra una registrazione nel riquadro Prestazioni per scoprire come rilevare il collo di bottiglia delle prestazioni nella versione non ottimizzata.

1. In DevTools, fai clic su Registra . DevTools acquisisce le metriche sulle prestazioni durante l'esecuzione della pagina.

   

   Figura 3: profilazione della pagina

2. Aspetta alcuni secondi.

3. Fai clic su Arresta. DevTools interrompe la registrazione, elabora i dati e visualizza i risultati nel riquadro Prestazioni.

   

   Figura 4: i risultati del profilo

Si tratta di una quantità enorme di dati. Non preoccuparti, tutto sarà più logico a breve.

Analizza i risultati

Dopo aver registrato il rendimento della pagina, puoi misurarne il rendimento e individuare le cause.

Analizza frame al secondo

La metrica principale per misurare le prestazioni di qualsiasi animazione sono i frame al secondo (f/s). Gli utenti sono soddisfatti quando le animazioni vengono eseguite a 60 f/s.

1. Osserva il grafico FPS. Ogni volta che vedi una barra rossa sopra FPS, significa che la frequenza fotogrammi è talmente bassa da compromettere l'esperienza utente. In generale, più alta è la barra verde, più alto è il numero di FPS.

   

   Figura 5: il grafico dei FPS con contorni blu

2. Sotto il grafico FPS viene visualizzato il grafico CPU. I colori nel grafico CPU corrispondono ai colori presenti nella scheda Riepilogo, nella parte inferiore del riquadro Prestazioni. Il fatto che il grafico CPU sia pieno di colori indica che la CPU è stata esaurita durante la registrazione. Ogni volta che si esaurisce la CPU per lunghi periodi, è il momento di trovare un modo per ridurre il lavoro.

   

   Figura 6: il grafico della CPU e la scheda Riepilogo, con contorni blu

3. Passa il mouse sopra i grafici FPS, CPU o NET. DevTools mostra uno screenshot della pagina in quel momento. Sposta il mouse a sinistra e a destra per riprodurre di nuovo la registrazione. Questa operazione, chiamata scrubbing, è utile per analizzare manualmente l'avanzamento delle animazioni.

   

   Figura 7: viene visualizzato uno screenshot della pagina intorno al segno 2000 ms della registrazione

4. Nella sezione Frame, passa il mouse sopra uno dei quadrati verdi. DevTools mostra gli f/s per quel particolare frame. Ogni frame è probabilmente ben al di sotto del target di 60 FPS.

   

   Figura 8: passare il mouse sopra una cornice

Ovviamente, con questa demo è evidente che la pagina non ha un buon rendimento. Tuttavia, in scenari reali potrebbe non essere così chiaro, quindi avere tutti questi strumenti per effettuare le misurazioni è utile.

Bonus: apri lo strumento di misurazione f/s

Un altro strumento utile è il misuratore di f/s, che fornisce stime in tempo reale degli f/s durante l'esecuzione della pagina.

1. Premi Comando+Maiusc+P (Mac) o Ctrl+Maiusc+P (Windows, Linux) per aprire il menu Comando.
2. Inizia a digitare Rendering nel menu Comando e seleziona Mostra rendering.

3. Nella scheda Rendering, attiva l'opzione Misuratore di FPS. Viene visualizzato un nuovo overlay nell'angolo in alto a destra dell'area visibile.

   

   Figura 9: metro f/s

4. Disattiva lo strumento di misurazione FPS e premi Esc per chiudere la scheda Rendering. e non lo userai in questo tutorial.

Trova il collo di bottiglia

Dopo aver misurato e verificato il rendimento dell'animazione, la domanda successiva è: perché?

1. Osserva la scheda Riepilogo. Quando non è selezionato alcun evento, questa scheda mostra un'analisi dettagliata dell'attività. La pagina ha trascorso la maggior parte del tempo a eseguire il rendering. Poiché le prestazioni sono l'arte di fare meno lavoro, il tuo obiettivo è ridurre la quantità di tempo che dedichi al rendering.

   

   Figura 10: la scheda Riepilogo, con contorno blu

2. Espandi la sezione Principale. DevTools mostra un grafico a fiamme dell'attività nel thread principale. L'asse X rappresenta la registrazione nel tempo. Ogni barra rappresenta un evento. Una barra più larga indica che l'evento ha richiesto più tempo. L'asse y rappresenta lo stack di chiamate. Se gli eventi sono sovrapposti uno sopra l'altro, significa che gli eventi a livello più alto hanno causato gli eventi inferiori.

   

   Figura 11: la sezione Principale, con contorni blu

3. La registrazione contiene molti dati. Aumenta lo zoom su un singolo evento Frame dell'animazione attivato facendo clic, tenendo premuto e trascinando il mouse sulla Panoramica, che è la sezione che include i grafici FPS, CPU e NET. La sezione Principale e la scheda Riepilogo mostrano solo le informazioni relative alla parte selezionata della registrazione.

   

   Figura 12: aumento dello zoom in un singolo evento attivato dal frame dell'animazione

4. Nota il triangolo rosso nell'angolo in alto a destra dell'evento Frame dell'animazione attivato. Ogni volta che vedi un triangolo rosso, significa che potrebbe esserci un problema relativo a questo evento.

5. Fai clic sull'evento Frame dell'animazione attivato. La scheda Riepilogo ora mostra le informazioni sull'evento. Prendi nota del link rivela. Fai clic su che consente a DevTools di evidenziare l'evento che ha avviato l'evento Animation Frame attivato. Nota anche il link app.js:94. Facendo clic su questo, vieni indirizzato alla riga pertinente nel codice sorgente.

   

   Figura 13: ulteriori informazioni sull'evento attivato dal frame dell'animazione.

6. Sotto l'evento app.update, sono presenti diversi eventi viola. Se fossero più larghi, ognuno potrebbe avere un triangolo rosso. Fai clic su uno degli eventi Layout viola adesso. DevTools fornisce ulteriori informazioni sull'evento nella scheda Riepilogo. Esiste infatti un avviso relativo agli scorrimenti forzati (un'altra parola per il layout).

7. Nella scheda Riepilogo, fai clic sul link app.js:70 in Layout forzato. DevTools porta alla riga di codice che ha forzato il layout.

   

   Figura 13: la riga di codice che ha causato il layout forzato

Finalmente. Era molto da tenere, ma ora disponi di solide basi nel flusso di lavoro di base per l'analisi delle prestazioni di runtime. Ottimo lavoro.

Bonus: analizza la versione ottimizzata

Utilizzando i flussi di lavoro e gli strumenti che hai appena imparato, fai clic su Ottimizza nella demo per attivare il codice ottimizzato, registrare un'altra registrazione del rendimento e analizzare i risultati. Dalla frequenza fotogrammi migliorata alla riduzione degli eventi nel grafico a fiamme della sezione Principale, puoi notare che la versione ottimizzata dell'app lavora molto meno, con conseguente miglioramento delle prestazioni.

Passaggi successivi

La base per comprendere le prestazioni è il modello RAIL. Questo modello insegna le metriche sul rendimento più importanti per gli utenti. Per ulteriori informazioni, consulta Misurare le prestazioni con il modello RAIL.

Per acquisire familiarità con il riquadro Prestazioni, la pratica rende perfetti. Prova a profilare le tue pagine e ad analizzare i risultati. Se hai domande sui risultati, apri una domanda di Stack Overflow con google-chrome-devtools. Se possibile, includi screenshot o link a pagine riproducibili.

Per diventare esperti nelle prestazioni in fase di runtime, devi imparare come il browser converte HTML, CSS e JS in pixel su uno schermo. Il modo migliore per iniziare è la Panoramica delle prestazioni del rendering. L'anatomia di un frame approfondisce ulteriormente i dettagli.

Infine, ci sono molti modi per migliorare le prestazioni di runtime. Questo tutorial si è concentrato su un particolare collo di bottiglia dell'animazione per offrirti un tour dettagliato del riquadro Prestazioni, ma è solo uno dei numerosi colli di bottiglia che potresti incontrare. Il resto della serie Prestazioni di rendering contiene molti ottimi suggerimenti per migliorare vari aspetti delle prestazioni di runtime, ad esempio:

• Ottimizzazione dell'esecuzione JS
• Ridurre l'ambito e la complessità dei calcoli di stile
• Evita layout complessi e di grandi dimensioni e il Thrashing di layout
• Semplifica la complessità della verniciatura e riduci le aree di verniciatura
• Applica le proprietà solo ai compositor e gestisci il numero di livelli
• Debounce dei gestori di input