缩短开发者工具的启动时间

Maksim Sadym
Maksim Sadym

开发者工具的启动速度现在提高了约 13% 🎉(从 11.2 秒缩短到 10 秒)

要点:通过移除冗余的序列化实现了这一结果。

概览

在开发者工具启动时,它需要向 V8 JavaScript 引擎发出一些调用。

开发者工具启动流程

Chromium 用于向 V8 发送 DevTools 命令(以及一般用于 IPC)的机制称为 mojo。我的同事 Benedikt MeurerSigurd Schneider 在处理另一项任务时发现了效率低下的问题,并提出了一个想法,即通过移除发送和接收这些消息的两个冗余步骤来改进该流程。

我们来深入探讨一下 mojo 机制的运作方式!

mojo 机制

Mojo 机制

有一个 mojo 命令 EvaluateScript 用于运行 JS 命令。它会将整个 JS 命令(包括 arguments)序列化为可 eval() 的 JavaScript 源代码字符串。正如您所想,这些字符串可能会非常长且费用高昂。V8 收到命令后,会先反序列化这些 JavaScript 代码字符串,然后再运行。对每条消息进行序列化和反序列化的过程会产生大量开销。

Benedikt Meurer 意识到,对 arguments 进行序列化和反序列化非常耗费资源,并且整个“将 JS 命令序列化为 JS 字符串”“将 JS 字符串反序列化”步骤是多余的,可以跳过。

技术详情:RenderFrameHostImpl::ExecuteJavaScript

我们做出了哪些改进

改进的机制

我们引入了另一个 Mojo API 方法,以便直接传递对象名称、要调用的方法和参数列表,而无需创建 JavaScript 源代码字符串。这样,我们就可以跳过序列化和反序列化,而无需解析 JavaScript 代码。

如需详细了解我们如何实现此优化,请参阅以下两个补丁:

  1. CL 2431864:[devtools] 减少前端消息调度的性能开销
  2. CL 2442012:[devtools] 在 DevTools 中使用 ExecuteJavaScriptMethod

影响

为了衡量更改的有效性,我们进行了一些测量,比较了 Chromium 修订版 cb971089a0584f213b39d581(更改前后)。

对于这两个修订版,我们分别运行了以下场景 5 次:

  1. 使用 chrome://tracing 记录轨迹
  2. 打开“开发者工具中的开发者工具”
  3. 获取记录的 CrRendererMain 轨迹,并比较 V8 专用指标。

根据这些实验,经过优化后,开发者工具的打开速度提高了约 13%(从 11.2 秒缩短到 10 秒)

亮点、CPU 时长

方法名称 未优化(毫秒) 优化后(毫秒) 差异(毫秒) 速度提升幅度 (%)
总计 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%

开发者工具加载 CPU 时间(毫秒)

完整跟踪指标对照表

因此,开发者工具的启动速度更快,运行速度更快,CPU 用量更低。🎉

下载预览渠道

不妨考虑将 Chrome Canary 版开发者版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API,并在用户发现问题之前发现您网站上的问题!

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。