DevTools startup now is ~13% faster 🎉 (from 11.2s down to 10s).
TL;DR; The result is achieved by removing a redundant serialization.
The mechanism Chromium uses to send DevTools commands to V8 (and for IPC in general) is called
mojo. My teammates Benedikt Meurer and Sigurd Schneider discovered an inefficiency while working on another task, and came up with an idea to improve the process by removing two redundant steps in how these messages are sent and received.
Let us dive into how the
mojo mechanism works!
There is a mojo command
EvaluateScript which runs the JS command. It serializes the whole JS command including the
Benedikt Meurer realised that serialisation and deserialisation of the
arguments is quite expensive, and that the whole "Serialize JS command to JS string" and "Deserialize JS string" steps are redundant and can be skipped.
How we improved
For technical details on how we implemented this optimization, consult these two patches:
- CL 2431864: [devtools] Reduce performance overhead of message dispatch in the front-end
- CL 2442012: [devtools] Use
For both revisions, we ran the following scenario 5 times:
- Record trace using
- Open DevTools-on-DevTools
- Get the recorded
CrRendererMaintrace and compare the V8-specific metrics.
Based on these experiments, DevTools opens ~13% faster (from 11.2s down to 10s) with the optimization.
Hightlights, CPU durations
|Method name||Not optimized (ms)||Optimized (ms)||Differences (ms)||Speed improvement (%)|
As a result, DevTools opens and works faster with less CPU usage. 🎉
To discuss the new features and changes in this post, or anything else related to DevTools:
- File definite bug reports and feature requests at Chromium Bugs.
- Discuss possible features, changes, and bugs on the Mailing List.
- Get help on how to use DevTools on Stack Overflow.
- Tweet us at @ChromeDevTools.
- File bugs on this document in the Web Fundamentals repository.
Discover DevTools engineering content
Below is a list of everything that's been covered in the Chrome DevTools Engineering Blog series.
- CSS-in-JS support in DevTools
- Improving DevTools startup time
- Migrating Puppeteer to TypeScript
- Debugging WebAssembly with modern tools
- DevTools architecture refresh: migrating to Web Components
- Simulating color vision deficiencies in the Blink Renderer
- Puppetaria: accessibility-first Puppeteer scripts
- How we built the Chrome DevTools WebAuthn tab
- How we built the Chrome DevTools Issues tab