Miglioramento del tempo di avvio di DevTools

Maksim Sadym
Maksim Sadym
X GitHub

L'avvio di DevTools ora è circa il 13% più veloce 🎉 (da 11,2 secondi a 10 secondi)

TL;DR; Il risultato viene ottenuto rimuovendo una serializzazione ridondante.

Panoramica

Durante l'avvio, DevTools deve effettuare alcune chiamate al motore JavaScript V8.

Procedura di avvio di DevTools

Il meccanismo utilizzato da Chromium per inviare i comandi di DevTools a V8 (e per l'IPC in generale) è chiamato mojo. I miei colleghi Benedikt Meurer e Sigurd Schneider hanno scoperto un'inefficienza mentre lavoravano a un'altra attività e hanno avuto un'idea per migliorare il processo rimuovendo due passaggi ridondanti nella modalità di invio e ricezione di questi messaggi.

Vediamo come funziona il meccanismo mojo.

I meccanismi mojo

I meccanismi di Mojo

Esiste un comando mojo EvaluateScript che esegue il comando JS. Serializza l'intero comando JS, incluso arguments, in una stringa di codice sorgente JavaScript che può essere eval(). Come puoi immaginare, queste stringhe possono diventare piuttosto lunghe e costose. Dopo che il comando è stato ricevuto da V8, queste stringhe di codice JavaScript vengono deserializzate prima dell'esecuzione. Questa procedura di serializzazione e deserializzazione per ogni singolo messaggio crea un overhead significativo.

Benedikt Meurer ha capito che la serializzazione e la deserializzazione di arguments sono piuttosto costose e che l'intera procedura "Serializza comando JS in stringa JS" e "Deserializza stringa JS" sono ridondanti e possono essere ignorate.

Dettagli tecnici: RenderFrameHostImpl::ExecuteJavaScript

Come abbiamo migliorato

Meccanismi migliorati

Abbiamo introdotto un altro metodo dell'API Mojo che ci consente di passare direttamente il nome dell'oggetto, il metodo da chiamare e l'elenco degli argomenti, anziché dover creare la stringa del codice sorgente JavaScript. In questo modo possiamo saltare la serializzazione e la deserializzazione ed eliminare la necessità di analizzare il codice JavaScript.

Per informazioni tecniche su come abbiamo implementato questa ottimizzazione, consulta queste due patch:

  1. CL 2431864: [devtools] Riduci l'overhead delle prestazioni dell'invio dei messaggi nel front-end
  2. CL 2442012: [devtools] Utilizzo di ExecuteJavaScriptMethod in DevTools

Impatto

Per misurare l'efficacia della modifica, abbiamo eseguito alcune misurazioni confrontando le revisioni di Chromium cb971089a058 e 4f213b39d581 (prima e dopo la modifica).

Per entrambe le revisioni, abbiamo eseguito il seguente scenario 5 volte:

  1. Registra la traccia utilizzando chrome://tracing
  2. Aprire DevTools in DevTools
  3. Recupera la traccia CrRendererMain registrata e confronta le metriche specifiche di V8.

In base a questi esperimenti, DevTools si apre circa il 13% più velocemente (da 11,2 secondi a 10 secondi) con l'ottimizzazione.

Momenti salienti, durate della CPU

Nome metodo Non ottimizzato (ms) Ottimizzato (ms) Differenze (ms) Miglioramento della velocità (%)
Totale 11.213,19 9.953,99 -1.259,20 12,65%
v8.run 499,67 3,61 -496,06 12,65%
V8.Execute 1.654,87 1.349,61 -305,25 3,07%
v8.callFunction 1171,84 1.339,77 167,94 -1,69%
v8.compile 133,93 3,56 -130,37 1,31%

Tempo di caricamento della CPU di DevTools (ms)

Tabella di confronto delle metriche di monitoraggio completo

Di conseguenza, DevTools si apre e funziona più velocemente con un utilizzo inferiore della CPU. 🎉

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.