L'avvio di DevTools ora è più veloce di circa il 13% 🎉 (da 11,2 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 i comandi DevTools a V8 (e per l'IPC in generale) è chiamato mojo
. I miei colleghi di team Benedikt Meurer e Sigurd Schneider hanno scoperto un'inefficienza mentre lavoravano a un'altra attività e hanno avuto l'idea di migliorare il processo eliminando due passaggi ridondanti nel modo in cui questi messaggi vengono inviati e ricevuti.
Analizziamo il funzionamento del meccanismo mojo
.
I meccanismi 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 corde possono diventare piuttosto lunghe e costose. Dopo che il comando è stato ricevuto dalla V8, queste stringhe di codice JavaScript vengono deserializzate prima dell'esecuzione. Questo processo di serializzazione e deserializzazione di ogni singolo messaggio crea un overhead significativo.
Benedikt Meurer si è reso conto che la serializzazione e la deserializzazione di arguments
è piuttosto costosa e che tutti i passaggi "Serializza comando JS in stringa JS" e "Deserializzazione stringa JS" sono ridondanti e possono essere saltati.
Dettagli tecnici: RenderFrameHostImpl::ExecuteJavaScript
Come abbiamo migliorato
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 di argomenti, invece di dover creare la stringa del codice sorgente JavaScript. Questo ci consente di saltare la serializzazione e la deserializzazione e di eliminare la necessità di analizzare il codice JavaScript.
Per i dettagli tecnici su come abbiamo implementato questa ottimizzazione, consulta queste due patch:
- CL 2431864: [devtools] Ridurre l'overhead delle prestazioni per l'invio di messaggi nel front-end
- CL 2442012: [devtools] Utilizzare
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 per cinque volte:
- Registra traccia utilizzando
chrome://tracing
- Apri DevTools su DevTools
- Scarica 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 a 10 secondi) con l'ottimizzazione.
Informazioni salienti, durata CPU
Nome del metodo | Non ottimizzata (ms) | Ottimizzato (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 | 1,654.87 | 1349,61 | -305.25 | 3.07% |
v8.callFunction | 1,171.84 | 1,339.77 | 167.94 | -1.69% |
v8.compile | 133.93 | 3.56 | -130.37 | 1.31% |
Tabella di confronto delle metriche di tracciamento completo
Di conseguenza, DevTools si apre e funziona più velocemente con un minore utilizzo 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 in anteprima ti consentono di accedere alle ultime funzionalità DevTools, testare le API delle piattaforme web all'avanguardia e individuare eventuali 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 qualsiasi altra informazione relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema di DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
- Tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sui video di YouTube o sui suggerimenti di DevTools sui video di YouTube di DevTools.