Miglioramento del tempo di avvio di DevTools

Maksim Sadym
Maksim Sadym

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

TL;DR; Il risultato si ottiene rimuovendo una serializzazione ridondante.

Panoramica

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

Processo di avvio di DevTools

Il meccanismo utilizzato da Chromium per inviare comandi DevTools alla versione V8 (e per 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 escogitato un'idea per migliorare il processo rimuovendo due passaggi ridondanti nel modo in cui questi messaggi vengono inviati e ricevuti.

Vediamo come funziona il meccanismo di mojo.

I meccanismi mojo

I meccanismi mojo

È presente 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 viene ricevuto da V8, queste stringhe di codice JavaScript vengono deserializzate prima dell'esecuzione. Questo processo di serializzazione e deserializzazione per ogni singolo messaggio crea un overhead significativo.

Benedikt Meurer si è reso conto che la serializzazione e la deserializzazione di arguments sono piuttosto costose e che tutti i passaggi di "Serialize JS command to JS string" e "Deserialize JS string" sono ridondanti e possono essere ignorati.

Dettagli tecnici: RenderFrameHostImpl::ExecuteJavaScript

Come siamo migliorati

Meccanismi migliorati

Abbiamo introdotto un altro metodo API mojo che ci permette di passare direttamente il nome dell'oggetto, il metodo da chiamare e l'elenco di argomenti, invece di dover creare la stringa del codice sorgente JavaScript. Questo ci permette di saltare la serializzazione e la deserializzazione ed elimina la necessità di analizzare il codice JavaScript.

Per i dettagli tecnici su come abbiamo implementato questa ottimizzazione, consulta queste due patch:

  1. CL 2431864: [devtools] riduce l'overhead delle prestazioni dell'invio dei messaggi nel front-end
  2. CL 2442012: [devtools] utilizza 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 cinque volte:

  1. Registra traccia utilizzando chrome://tracing
  2. Apri DevTools-su-DevTools
  3. Ottieni la traccia CrRendererMain registrata e confronta le metriche specifiche di V8.

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

In evidenza, durate della CPU

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

Tempo di CPU caricamento DevTools (ms)

Tabella di confronto delle metriche di tracciamento complete

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

Scaricare i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema di DevTools usando Altre opzioni   Altre   > Guida > Segnala un problema di DevTools in DevTools.
  • Invia un tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.