Analizza le prestazioni del runtime

Il rendimento in fase di esecuzione indica il rendimento della pagina quando è in esecuzione, non durante il caricamento. Questo tutorial insegna a utilizzare il riquadro Prestazioni di Chrome DevTools per analizzare il rendimento del runtime. 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 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.

    la demo a sinistra e DevTools a destra.

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 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.

    Limitazione della CPU impostata su un rallentamento di 4 volte.

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 garantire che la tua esperienza sia relativamente coerente con gli screenshot e le descrizioni di questo tutorial, a prescindere dalla configurazione particolare.

  1. Continua a fare clic su Aggiungi 10 finché i quadrati blu non si muovono notevolmente più lenti di prima. Su un computer di fascia alta, potrebbero essere necessari circa 20 clic.
  2. Fai clic su Ottimizza. I riquadri 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ù colpi.

Registra prestazioni di runtime

Quando hai eseguito la versione ottimizzata della pagina, i quadrati blu si spostano più velocemente. Perché? Entrambe le versioni dovrebbero spostare ogni quadrato per la stessa quantità di spazio nella stessa quantità 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 . DevTools acquisisce le metriche sul rendimento durante l'esecuzione della pagina.

    Profilazione della pagina demo.

  2. Aspetta alcuni secondi.

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

    Pagina del report sulla profilazione.

Wow, è una quantità enorme di dati. Non preoccuparti, sarà più logico a breve.

Analizza i risultati

Una volta ottenuta una registrazione del rendimento, puoi analizzare il livello di scarso rendimento della pagina e trovarne le cause.

Analizzare i frame al secondo

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

  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.

    Il grafico FPS evidenziato.

  2. Sotto il grafico FPS viene visualizzato il grafico CPU. I colori nel grafico CPU corrispondono ai colori nella 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 per trovare modi per fare meno lavoro.

    Il grafico della CPU e la scheda Riepilogo.

  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.

    Visualizzazione di uno screenshot in una registrazione di un'esibizione.

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

    Passa il mouse sopra un frame.

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 rendering. Un nuovo overlay viene visualizzato in alto a destra nel visualizzatore.

    Il misuratore di FPS.

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

Individuare il collo di bottiglia

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

  1. Osserva la scheda Riepilogo. Quando non sono selezionati eventi, questa scheda mostra un'analisi dettagliata dell'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.

    La scheda Riepilogo con contorno blu.

  2. Espandi la sezione Principale. DevTools mostra un grafico a fiamme dell'attività sul 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.

    Sezione principale.

  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.

    È stato aumentato lo zoom su un singolo evento di frame di animazione attivato.

  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 è trattata 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 questa opzione, viene visualizzata la riga pertinente nel codice sorgente.

    Ulteriori informazioni sull'evento Animation Frame Fired.

  6. Sotto l'evento app.update, sono presenti una serie di eventi viola. Se fossero più larghe, sembra che ognuna abbia 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 a app.update @ in Annullamento dell'aggiornamento del layout. DevTools ti indirizza alla riga di codice che ha forzato il layout.

    La riga di codice che ha causato il layout forzato.

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 converte HTML, CSS e JS in pixel su uno schermo. Il punto di partenza ideale è la Panoramica del rendimento del rendering. L'anatomia di una cornice approfondisce ancora di più 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 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: