![Maksim Sadym](https://web.dev/images/authors/sadym.jpg) Maksim Sadym [X](https://twitter.com/maximsadym) [GitHub](https://github.com/sadym-chromium)

<br />

> [!NOTE]
> **Note:** Interested in helping improve DevTools? Sign up to participate in [Google User Research here](https://google.qualtrics.com/jfe/form/SV_9YbKj35IGoGsDBj?reserved=1&utm_source=Website+feature&Q_Language=en&utm_medium=own_web&utm_campaign=Q4&productTag=chrm&campaignDate=November2020&referral_code=UXFm430458).

## 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](https://v8.dev/).

![DevTools starting up process](https://developer.chrome.com/static/blog/faster-devtools-startup/image/devtools-starting-proces-f0c521390a1b7.svg)

The mechanism Chromium uses to send DevTools commands to V8 (and for IPC in general) is called [`mojo`](https://chromium.googlesource.com/chromium/src/+/master/mojo/README.md). My teammates [Benedikt Meurer](https://twitter.com/bmeurer) and [Sigurd Schneider](https://twitter.com/sigurdschn) 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](https://developer.chrome.com/static/blog/faster-devtools-startup/image/the-mojo-mechanisms-bed3caa87831b.svg)

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`](https://source.chromium.org/chromium/chromium/src/+/master:content/browser/renderer_host/render_frame_host_impl.cc;drc=df872ce8fcce25af51aa6b0f9fe8b1135b687524;l=1677)

## How we improved

![Improved mechanisms](https://developer.chrome.com/static/blog/faster-devtools-startup/image/improved-mechanisms-f601b3daed513.svg)

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](https://chromium-review.googlesource.com/c/chromium/src/+/2431864)
2. [CL 2442012: \[devtools\] Use `ExecuteJavaScriptMethod` in DevTools](https://chromium-review.googlesource.com/c/chromium/src/+/2442012)

## Impact

To measure the effectiveness of the change, we ran some measurements comparing Chromium revisions [cb971089a058](https://chromium.googlesource.com/chromium/src/+/cb971089a058160601940d2b2a12d360115f66e5) and [4f213b39d581](https://chromium.googlesource.com/chromium/src/+/4f213b39d581eaa69a6d70378c91de2768e0004a) (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.

### Highlights, 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)](https://developer.chrome.com/static/blog/faster-devtools-startup/image/devtools-load-cpu-ms-4e6752878c495.svg)

[Full tracing metrics comparison table](https://docs.google.com/spreadsheets/d/1WuWWORPwMre3m4N_MmJvtJ0xTfq-oBnz87cGtB532Ms/edit?resourcekey=0-Xxv_HIGfVaIZvbmDrmZ2GA)

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

## Download the preview channels

Consider using the Chrome [Canary](https://www.google.com/chrome/canary/), [Dev](https://www.google.com/chrome/dev/), or [Beta](https://www.google.com/chrome/beta/) as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

## Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

- Submit feedback and feature requests to us at [crbug.com](https://crbug.com).
- Report a DevTools issue using the **More options** \> **Help** \> **Report a DevTools issue** in DevTools.
- Tweet at [@ChromeDevTools](https://twitter.com/intent/tweet?text=@ChromeDevTools).
- Leave comments on [What's new in DevTools YouTube videos](https://goo.gle/devtools-youtube) or [DevTools Tips YouTube videos](https://goo.gle/devtools-tips).