Analizza le prestazioni del runtime

Kayce Basques

Le prestazioni di runtime indicano le prestazioni della tua pagina quando è in esecuzione, anziché durante il caricamento. Questo tutorial spiega come utilizzare il riquadro Prestazioni di Chrome DevTools per analizzare le prestazioni del runtime. Per quanto riguarda il modello RAIL, le competenze che apprendi 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 attiva e utilizzerai 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 in buone condizioni. 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 piccoli quadrati blu che si muovono in alto e in 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 una potenza della CPU molto inferiore 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 Acquisisci impostazioni . DevTools rivela le impostazioni relative alla modalità di acquisizione delle metriche sulle prestazioni.

4. In corrispondenza di CPU, seleziona Rallenta 2x. DevTools limita la CPU, ovvero 2 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 assicurarti 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 muovono notevolmente più lentamente di prima. Su un computer 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 quadrati blu si muovono più lentamente e con più jank.

Registra le prestazioni del runtime

Quando esegui la versione ottimizzata della pagina, i quadrati blu si muovono più velocemente. Perché? Entrambe le versioni dovrebbero spostare ogni quadrato per la stessa quantità di spazio nello stesso periodo di tempo. Acquisisci 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 a breve diventerà più utile.

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 (FPS). 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 che probabilmente l'esperienza utente viene compromessa. In generale, più alta è la barra verde, più elevati sono l'f/s.

   

   Figura 5: il grafico FPS, con contorno blu

2. Sotto il grafico FPS è visualizzato il grafico CPU. I colori nel grafico CPU corrispondono a quelli della scheda Riepilogo nella parte inferiore del riquadro Prestazioni. Il fatto che il grafico CPU sia pieno di colori significa che la CPU è stata esaurita durante la registrazione. Ogni volta che la CPU si esaurisce per lunghi periodi, è un segnale di trovare modi 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 di 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. Probabilmente ogni frame è ben al di sotto del target di 60 FPS.

   

   Figura 8: passaggio del mouse sopra un frame

Ovviamente, con questa demo è piuttosto evidente che la pagina non ha un buon rendimento. Ma negli 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 è lo strumento di misurazione FPS, che fornisce stime in tempo reale dei FPS durante l'esecuzione della pagina.

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

3. Nella scheda Rendering, attiva lo strumento di misurazione fPS. Viene visualizzato un nuovo overlay nell'angolo in alto a destra dell'area visibile.

   

   Figura 9: strumento di misurazione FPS

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

Trova il collo di bottiglia

Ora che hai misurato e verificato che il rendimento dell'animazione non è ottimale, la domanda successiva è: perché?

1. Osserva la scheda Riepilogo. Se non sono selezionati eventi, questa scheda mostra un'analisi dettagliata dell'attività. La pagina ha trascorso la maggior parte del tempo a essere visualizzata. 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 contorni blu

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

   

   Figura 11: la sezione principale, con contorni blu

3. La registrazione contiene molti dati. Aumenta lo zoom su un singolo evento FPS, CPU e NET 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 su un singolo evento attivato con 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 all'evento.

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

   

   Figura 13: ulteriori informazioni sull'evento "Frame dell'animazione attivato"

6. Sotto l'evento app.update sono presenti alcuni eventi viola. Se fossero più larghe, sembra che ognuna abbia un triangolo rosso. Fai clic su uno degli eventi Layout viola adesso. DevTools fornisce ulteriori informazioni sull'evento nella scheda Riepilogo. È presente un avviso relativo agli adattamenti di flusso 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 da cui è stato forzato il layout.

   

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

Finalmente. La risposta era molto importante, ma ora hai una solida base nel flusso di lavoro di base per l'analisi delle prestazioni di runtime. Ottimo lavoro.

Vantaggio: 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 osservare che la versione ottimizzata dell'app fa molto meno lavoro, determinando prestazioni migliori.

Passaggi successivi

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

Per acquisire maggiore dimestichezza con il riquadro Prestazioni, fai pratica per perfezionare. 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 in prestazioni di runtime, devi imparare come il browser converte HTML, CSS e JS in pixel su uno schermo. Il punto di partenza migliore è la Panoramica delle prestazioni del rendering. L'anatomia di un fotogramma approfondisce ulteriormente i dettagli.

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

• Ottimizzazione dell'esecuzione JS
• Riduci 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
• Mantieni le proprietà solo come compositor e gestisci il numero di livelli
• Debounce dei gestori di input