Analizza le prestazioni del runtime

Kayce Basques

Il rendimento in fase di esecuzione indica il rendimento della pagina quando è in esecuzione, non durante il caricamento. Questo tutorial ti insegna a utilizzare il pannello Rendimento di Chrome DevTools per analizzare il rendimento in fase di esecuzione. In termini di modello RAIL, le competenze acquisite in questo tutorial sono utili per analizzare le fasi di risposta, animazione e inattività della pagina.

Inizia

In questo tutorial utilizzeremo il riquadro Rendimento per trovare un collo di bottiglia del rendimento in una pagina pubblicata. Per iniziare:

1. Apri Google Chrome in modalità di navigazione in incognito. La modalità di navigazione in incognito garantisce che Chrome venga eseguito in un ambiente pulito. Ad esempio, se hai installato molte estensioni, queste potrebbero creare disturbi nelle misurazioni del rendimento.

2. Carica la seguente pagina nella finestra di navigazione in incognito. Questa è la demo di cui vuoi creare il profilo. La pagina mostra una serie di piccoli quadratini blu che si muovono verso l'alto e verso il basso.

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

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

   

Simula una CPU mobile

I dispositivi mobili hanno una potenza della CPU molto inferiore rispetto a computer e laptop. Ogni volta che profili una pagina, utilizza la limitazione della CPU per simulare il rendimento della pagina sui dispositivi mobili.

1. In DevTools, fai clic sulla scheda Rendimento.
2. Assicurati che la casella di controllo Screenshot check_box sia attivata.
3. Fai clic su Impostazioni di acquisizione . DevTools mostra le impostazioni relative al modo in cui vengono acquisite le metriche sul rendimento.

4. Per CPU, seleziona Rallentamento 4x. DevTools riduce la velocità della CPU in modo che sia 4 volte più lenta del solito.

   

Configura la demo

È difficile creare una demo del rendimento in fase di esecuzione 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 quadratini 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ù scatti.

Registra il rendimento in fase di esecuzione

Quando hai eseguito la versione ottimizzata della pagina, i quadrati blu si spostano più velocemente. Perché? Entrambe le versioni dovrebbero spostare ogni quadrato nella stessa quantità di spazio nello stesso periodo di tempo. Acquisisci una registrazione nel riquadro Rendimento per scoprire come rilevare il collo di bottiglia del rendimento nella versione non ottimizzata.

1. In DevTools, fai clic su Registra radio_button_checked. DevTools acquisisce le metriche sul rendimento durante l'esecuzione della pagina.

   

2. Aspetta alcuni secondi.

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

   

Wow, è una quantità enorme di dati. Non preoccuparti, tra poco tutto sarà più chiaro.

Analizza i risultati

Una volta eseguita una registrazione del rendimento, puoi analizzare la scarsa qualità del rendimento della pagina e trovare le cause.

Analizzare i frame al secondo

La metrica principale per misurare il rendimento di qualsiasi animazione è il numero di frame al secondo (FPS). Gli utenti sono soddisfatti quando le animazioni vengono eseguite a 60 FPS.

1. Esamina il grafico FPS. Ogni volta che vedi una barra rossa sopra FPS, significa che la frequenza frame è scesa così tanto da probabilmente danneggiare l'esperienza utente.

   

2. Sotto il grafico FPS viene visualizzato il grafico CPU. I colori nel grafico CPU corrispondono ai colori della scheda Riepilogo, nella parte inferiore del riquadro Rendimento. Il fatto che il grafico della CPU sia completamente colorato significa che la CPU ha raggiunto il massimo delle prestazioni durante la registrazione. Ogni volta che la CPU è al massimo per lunghi periodi, è un segnale che ti invita a trovare modi per lavorare meno.

   

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

   

4. Nella sezione Inquadrature, passa il mouse sopra uno dei quadrati verdi. DevTools mostra i f/s per quel determinato frame. È probabile che ogni frame sia molto al di sotto del target di 60 FPS.

   

Ovviamente, con questa demo è abbastanza ovvio che la pagina non ha un buon rendimento. Tuttavia, in scenari reali, la situazione potrebbe non essere così chiara, quindi è utile disporre di tutti questi strumenti per effettuare misurazioni.

Bonus: apri il misuratore FPS

Un altro strumento utile è il misuratore di FPS, che fornisce stime in tempo reale per gli FPS durante l'esecuzione della pagina.

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

3. Nel riquadro Rendering, attiva Mostra statistiche sul rendering. Un nuovo overlay viene visualizzato in alto a destra nel visualizzatore.

   

4. Disattiva il metro FPS e premi Esc per chiudere il riquadro Rendering. Non la utilizzerai in questo tutorial.

Trovare il collo di bottiglia

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

1. Tieni presente la scheda Riepilogo. Quando non sono selezionati eventi, questa scheda mostra una suddivisione delle attività. La pagina ha impiegato la maggior parte del tempo per il rendering. Poiché il rendimento è l'arte di fare meno lavoro, il tuo obiettivo è ridurre il tempo impiegato per il rendering.

   

2. Espandi la sezione Principale. DevTools mostra un grafico a forma di fiamma dell'attività nel thread principale nel tempo. L'asse x rappresenta la registrazione nel tempo. Ogni barra rappresenta un evento. Una barra più ampia indica che l'evento ha richiesto più tempo. L'asse y rappresenta lo stack di chiamate. Quando vedi eventi sovrapposti, significa che gli eventi in alto hanno causato quelli in basso.

   

3. La registrazione contiene molti dati. Aumenta lo zoom su un singolo evento Animation Frame Fired facendo clic, tenendo premuto e trascinando il mouse sopra la Panoramica, ovvero la sezione che include i grafici FPS, CPU e NET. La sezione Principale e la scheda Riepilogo visualizzano solo le informazioni relative alla parte selezionata della registrazione.

   

4. Nota il triangolo rosso in alto a destra degli eventi Attività e di layout. Ogni volta che vedi un triangolo rosso, significa che potrebbe esserci un problema relativo a questo evento. Un triangolo rosso su un'attività indica che si tratta di un'attività lunga.

5. Fai clic sull'evento Animation Frame Fired. La scheda Riepilogo ora mostra le informazioni su quell'evento. Se fai clic sul link accanto a Avviato da, DevTools evidenzia l'evento che ha avviato l'evento Animation Frame Fired. Prendi nota anche del link app.update @. Se fai clic su questo pulsante, viene visualizzata la riga pertinente nel codice sorgente.

   

6. Sotto l'evento app.update, sono presenti una serie di eventi viola. Se fossero più larghe, sembra che su ciascuna possa esserci un triangolo rosso. Fai clic su uno degli eventi Layout viola. DevTools fornisce ulteriori informazioni sull'evento nella scheda Riepilogo. In effetti, c'è un avviso relativo ai ricollaggi forzati (un'altra parola per layout).

7. Nella scheda Riepilogo, fai clic sul link accanto ad app.update @ in Animazione richiesta. DevTools ti indirizza alla riga di codice che ha forzato il layout.

   

Finalmente. È stato molto da assimilare, ma ora hai una base solida nel flusso di lavoro di base per analizzare il rendimento del runtime. Ottimo lavoro.

Bonus: analizza la versione ottimizzata

Utilizzando i flussi di lavoro e gli strumenti che hai appena appreso, fai clic su Ottimizza nella demo per attivare il codice ottimizzato, acquisisci un'altra registrazione del rendimento e poi analizza i risultati. Dal miglioramento della frequenza frame alla riduzione degli eventi nel grafico a forma di fiamma della sezione Principale, puoi vedere che la versione ottimizzata dell'app esegue molto meno lavoro, con un conseguente miglioramento delle prestazioni.

Passaggi successivi

La base per comprendere il rendimento è il modello RAIL. Questo modello ti insegna le metriche sul rendimento più importanti per i tuoi utenti. Per scoprire di più, consulta la sezione Misurare il rendimento con il modello RAIL.

Per acquisire familiarità con il riquadro Rendimento, la pratica è la chiave. Prova a creare il profilo delle tue pagine e analizza i risultati. Se hai domande sui risultati, apri una domanda su Stack Overflow con il tag google-chrome-devtools. Includi screenshot o link a pagine riproducibili, se possibile.

Per diventare un esperto di prestazioni di runtime, devi imparare come il browser traduce HTML, CSS e JS in pixel su uno schermo. Il punto di partenza ideale è la Panoramica del rendimento del rendering. L'anatomia di un frame fornisce informazioni ancora più dettagliate.

Infine, esistono molti modi per migliorare le prestazioni di runtime. Questo tutorial si è concentrato su un particolare collo di bottiglia dell'animazione per offrirti un tour mirato del riquadro Rendimento, ma si tratta solo di uno dei molti colli di bottiglia che potresti incontrare. Il resto della serie sul rendimento del rendering contiene molti utili consigli per migliorare vari aspetti delle prestazioni di runtime, ad esempio:

• Ottimizzazione dell'esecuzione di JS
• Ridurre l'ambito e la complessità dei calcoli degli stili
• Evita layout grandi e complessi e il relativo scambio
• Semplifica la complessità della pittura e riduci le aree di pittura
• Utilizzare solo proprietà per il compositore e gestire il numero di livelli
• Eseguire il debouncing dei gestori degli input