Il riquadro Sequenza temporale di DevTools è sempre stato il primo passo verso l'ottimizzazione delle prestazioni. Questa panoramica centralizzata dell'attività della tua app ti aiuta ad analizzare dove viene dedicato il tempo a caricare, creare script, visualizzare e colorare. Di recente, abbiamo aggiornato Spostamenti con più strumentazione, in modo da offrirti una visione più approfondita del rendimento della tua app.
Abbiamo aggiunto le seguenti funzionalità:
- JavaScript profiler integrato. (grafico a fiamme incluso!)
- visualizzatore frame per aiutarti a visualizzare livelli compositi.
- paint profiler per visualizzazioni dettagliate dell'attività di pittura del browser.
Tieni presente che l 'utilizzo delle opzioni di acquisizione di Paint descritte in questo articolo comporta un certo overhead per le prestazioni, quindi capovolgile solo quando vuoi.
Profiler JavaScript integrato
Se hai mai esplorato il riquadro Profili, probabilmente conosci già 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 di JavaScript nel tempo.
Ora puoi visualizzare questa suddivisione granulare dell'esecuzione di JavaScript nel riquadro Sequenza temporale. Se selezioni l'opzione di acquisizione Profilo JS, puoi visualizzare i tuoi stack di chiamate JavaScript nella sequenza temporale insieme agli altri eventi del browser. L'aggiunta di questa funzionalità alla sequenza temporale consente di semplificare il flusso di lavoro di debug. Ma soprattutto, ti consente di visualizzare il tuo codice JavaScript nel contesto e di 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 la classica struttura a cascata degli eventi o come grafico a fiamme. L'icona Fiamma ti consente di passare da una visualizzazione all'altra.
Visualizzatore frame
L'arte della composizione di livelli è un altro aspetto del browser che è stato per lo più nascosto agli sviluppatori. Se utilizzati con parsimonia e con cautela, i livelli possono aiutare a evitare costosi ricolorazioni e a ottenere un enorme aumento delle prestazioni. Spesso, però, non è ovvio prevedere in che modo il browser comporrà i tuoi contenuti. Con la nuova opzione di acquisizione Paint di Spostamenti, puoi visualizzare livelli compositi in ogni frame di una registrazione.
Quando selezioni una barra di 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. Passa il mouse sopra un livello per visualizzarne la posizione corrente nella pagina. Se fai clic con il tasto destro del mouse su un livello, puoi passare al nodo corrispondente nel riquadro Elementi. Queste funzionalità mostrano gli elementi promossi in un livello. Se selezioni un livello, puoi anche vedere perché è stato promosso nella riga Motivi di composizione.
Profiler vernice
Infine, ma non in ordine di importanza, abbiamo aggiunto il profiler per la vernice per aiutarti a identificare i rumori causati da vernici costose. Questa funzionalità arricchisce gli Spostamenti con ulteriori dettagli sul lavoro svolto da Chrome durante gli eventi di colorazione.
Per i principianti, ora è più facile identificare i contenuti visivi corrispondenti a ciascun evento di disegno. Quando selezioni un evento di colore verde nella sequenza temporale, il riquadro Dettagli mostra un'anteprima dei pixel effettivi che sono stati visualizzati.
Se vuoi davvero immergerti, passa al riquadro Paint Profiler. Questo profiler mostra gli esatti comandi di disegno eseguiti dal browser per il colore selezionato. Per collegare questi comandi nativi a contenuti reali presenti nella 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 ti consente di riprodurre il processo di colorazione e di avere un'idea di quali operazioni sono più costose per il browser. Le operazioni di disegno sono codificate per colore come segue: rosa (forme), blu (bitmap), verde (testo) e viola (varie). L'altezza della barra indica la durata della chiamata, quindi esaminare le barre alte può aiutarti a capire quale fosse il costo di una determinata colorazione.
Profilo e profitto.
Quando si tratta di ottimizzazione delle prestazioni, la conoscenza del browser può essere incredibilmente potente. Gli aggiornamenti agli Spostamenti aiutano a chiarire la relazione tra il codice e i processi di rendering di Chrome. Prova queste nuove opzioni in Spostamenti e scopri cosa può fare Chrome DevTools per migliorare il tuo flusso di lavoro di ricerca dei nodi.