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
ExecuteJavaScriptMethodin 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
CrRendererMainregistrata 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.