It's a wrap for Chrome Dev Summit 2020! Watch all the sessions at goo.gle/cds20-sessions now!

Improving DevTools startup time

DevTools startup now is ~13% faster 🎉 (from 11.2s down to 10s).

TL;DR; The result is achieved by removing a redundant serialization.

Overview

While DevTools is starting up, it needs to make some calls to the V8 JavaScript engine.

DevTools starting up process

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!

The mojo mechanisms

The mojo mechanisms

There is a mojo command EvaluateScript which runs the JS command. It serializes the whole JS command including the arguments into a string of JavaScript source code that can be eval(). As you might imagine, these strings can become quite long and expensive. After the command is received by V8, these strings of JavaScript code are deserialized before running. This process of serializing and deserializing for every single message creates significant overhead.

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.

Technical details: RenderFrameHostImpl::ExecuteJavaScript

How we improved

Improved mechanisms

We introduced another mojo API method which allows us to pass the object name, the method to be called, and the list of arguments directly, instead of having to create the string of JavaScript source code. This allows us to skip serialization & deserialization, and removes the need to parse the JavaScript code.

For technical details on how we implemented this optimization, consult these two patches:

  1. CL 2431864: [devtools] Reduce performance overhead of message dispatch in the front-end
  2. CL 2442012: [devtools] Use ExecuteJavaScriptMethod in DevTools

Impact

To measure the effectiveness of the change, we ran some measurements comparing Chromium revisions cb971089a058 and 4f213b39d581 (before and after the change).

For both revisions, we ran the following scenario 5 times:

  1. Record trace using chrome://tracing
  2. Open DevTools-on-DevTools
  3. Get the recorded CrRendererMain trace 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 (%)
Total 11,213.19 9,953.99 -1,259.20 12.65%
v8.run 499.67 3.61 -496.06 12.65%
V8.Execute 1,654.87 1,349.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%

DevTools load CPU time (ms)

Full tracing metrics comparison table

As a result, DevTools opens and works faster with less CPU usage. 🎉

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

To discuss the new features and changes in this post, or anything else related to DevTools:

Discover DevTools engineering content

Below is a list of everything that's been covered in the Chrome DevTools Engineering Blog series.

Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!