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.
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
È 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
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:
- CL 2431864: [devtools] riduce l'overhead delle prestazioni dell'invio dei messaggi nel front-end
- 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:
- Registra traccia utilizzando
chrome://tracing
- Apri DevTools-su-DevTools
- 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% |
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 > 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.