Il riquadro Sequenza temporale di DevTools è sempre stato il primo passo migliore nel percorso verso l'ottimizzazione del rendimento. Questa panoramica centralizzata dell'attività della tua app ti aiuta ad analizzare dove viene speso il tempo per il caricamento, la creazione di script, il rendering e la creazione di bozze. Di recente, abbiamo eseguito l'upgrade di Spostamenti con una maggiore strumentazione, in modo che tu possa avere un quadro più approfondito delle prestazioni della tua app.
Abbiamo aggiunto le seguenti funzionalità:
- integrato Profilo JavaScript. (Grafico a fiamme incluso).
- visualizzatore di frame per aiutarti a visualizzare i livelli compositi.
- paint profiler per visualizzare in dettaglio l'attività di disegno del browser.
Tieni presente che l 'utilizzo delle opzioni di acquisizione di Paint descritte in questo articolo comporta un certo sovraccarico di prestazioni, quindi attivale solo quando vuoi.
Profiler JavaScript integrato
Se hai dato un'occhiata al riquadro Profili, probabilmente conosci il profiler CPU JavaScript. Questo strumento misura dove viene trascorso il tempo di esecuzione nelle funzioni JavaScript. Visualizzando i profili JavaScript con il grafico a fiamme, puoi visualizzare l'elaborazione JavaScript nel tempo.
Ora puoi ottenere questa suddivisione granulare dell'esecuzione di JavaScript nel riquadro Sequenza temporale. Se selezioni l'opzione di acquisizione di JS Profiler, puoi visualizzare gli stack di chiamate JavaScript nella sequenza temporale insieme ad altri eventi del browser. L'aggiunta di questa funzionalità agli Spostamenti semplifica il flusso di lavoro di debug. Ma soprattutto, consente di visualizzare il codice JavaScript nel contesto e identificare le parti del codice che influenzano il tempo di caricamento e il rendering della pagina.
Oltre al profiler JavaScript, abbiamo integrato anche una visualizzazione Grafico a fiamme nel riquadro Sequenza temporale. Ora puoi visualizzare l'attività della tua app come struttura a cascata classica di eventi o come grafico a fiamme. L'icona del grafico a fiamme consente di passare da una visualizzazione all'altra.
Visualizzatore frame
L'arte della composizione dei livelli è un altro aspetto del browser che è stato per lo più nascosto agli sviluppatori. Se utilizzati con parsimonia e con cautela, gli strati possono aiutare a evitare costose ricolorazioni e produrre enormi aumenti delle prestazioni. Tuttavia, spesso non è ovvio prevedere in che modo il browser comporrà i tuoi contenuti. Con la nuova opzione di acquisizione Paint di Spostamenti, puoi visualizzare i livelli compositi in ogni fotogramma di una registrazione.
Quando selezioni una barra dei frame grigia sopra il Thread principale, il riquadro Livelli fornisce un modello visivo dei livelli che compongono la tua app.
Puoi eseguire lo zoom, ruotare e trascinare il modello dei livelli per esplorarne i contenuti. Se passi il mouse sopra un livello, ne viene visualizzata la posizione corrente nella pagina. Se fai clic con il pulsante destro del mouse su un livello, puoi passare al nodo corrispondente nel riquadro Elementi. Queste funzioni mostrano ciò che è stato promosso a un livello. Se selezioni un livello, puoi anche vedere perché è stato promosso nella riga Motivi della composizione.
Profiler per la colorazione
Infine, abbiamo aggiunto il profiler di vernice per aiutarti a identificare i graffi causati da vernici costose. Questa funzionalità arricchisce la cronologia con maggiori dettagli sul lavoro svolto da Chrome durante gli eventi di colorazione.
Per i principianti, ora è più facile identificare i contenuti visivi corrispondenti a ogni evento di colorazione. Quando selezioni un evento di color verde nella sequenza temporale, il riquadro Dettagli mostra un'anteprima dei pixel effettivi che sono stati dipinti.
Se vuoi davvero iniziare, passa al riquadro Paint Profiler. Questo profiler mostra gli esatti comandi di disegno che il browser ha eseguito per il dipinto selezionato. Per collegare questi comandi nativi con i contenuti effettivi della tua app, puoi fare clic con il tasto destro del mouse su una chiamata draw* e passare direttamente al nodo corrispondente nel riquadro Elementi.
La mini-sequenza temporale nella parte superiore del riquadro consente di riprodurre il processo di disegno e di capire quali operazioni sono costose da eseguire per il browser. Le operazioni di disegno sono codificate per colore come segue: rosa (forme), blu (bitmap), verde (testo) e viola (varie). L'altezza delle barre indica la durata della chiamata, quindi analizzare le barre alte può aiutarti a capire quali sono i costi costosi di una particolare vernice.
Profilo e profitto
Quando si tratta di ottimizzazione delle prestazioni, la conoscenza del browser può essere estremamente potente. Questi aggiornamenti degli Spostamenti ti offrono uno sguardo dietro le quinte e aiutano a chiarire la relazione tra il tuo codice e i processi di rendering di Chrome. Prova queste nuove opzioni nella cronologia e scopri cosa può fare Chrome DevTools per migliorare il tuo flusso di lavoro di jank-caccia.