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

Maksim Sadym
Maksim Sadym

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

要点;结果是通过移除多余的序列化来实现的。

概览

当开发者工具启动时,它需要对 V8 JavaScript 引擎进行一些调用。

开发者工具启动流程

Chromium 用于将开发者工具命令发送到 V8(通常对于 IPC)的机制称为 mojo。我的团队成员 Benedikt MeurerSigurd Schneider 在处理另一项任务时发现效率低下,于是想出了一项改进流程的想法,即省去发送和接收邮件的两个多余的步骤。

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

mojo 机制

Mojo 机制

有一个 mojo 命令 EvaluateScript 可以运行 JS 命令。它会将包含 arguments 的整个 JS 命令序列化为可设为 eval() 的 JavaScript 源代码字符串。正如您想象的那样,这些字符串可能会变得很长并且开销很大。V8 收到命令后,系统会在运行前对这些 JavaScript 代码字符串进行反序列化。对每条消息进行序列化和反序列化的过程会产生大量开销。

Benedikt Meurer 意识到 arguments 的序列化和反序列化的成本很高,并且整个 "Serialize JS command to JS string""Deserialize JS string" 步骤是多余的,可以跳过。

技术详情:RenderFrameHostImpl::ExecuteJavaScript

改进方式

改进的机制

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

有关我们如何实现此优化的技术详情,请查阅以下两个补丁:

  1. CL 2431864:[devtools] 降低在前端调度消息的性能开销
  2. CL 2442012:[devtools] 在开发者工具中使用 ExecuteJavaScriptMethod

影响

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

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

  1. 使用 chrome://tracing 录制轨迹
  2. 打开开发者工具 on-DevTools
  3. 获取记录的 CrRendererMain 跟踪记录并比较 V8 专用指标。

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

重要信息,CPU 时长

方法名称 未优化(毫秒) 优化时间(毫秒) 差异(毫秒) 速度提升 (%)
总计 11,213.19 9,953.99 -1259.20 12.65%
v8.run 499.67 3.61 -496.06 12.65%
V8.Execute 1,654.87 1,349.61,000 -305.25 3.07%
v8.callFunction 1,171.84,000 1,339.77 167.94 -1.69%
v8.compile 133.93 3.56 -130.37 1.31%

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

完整跟踪指标对比表

因此,开发者工具的打开速度和运行速度更快且 CPU 使用率更低。🎉

下载预览渠道

请考虑将 Chrome Canary开发者版Beta 版用作您的默认开发浏览器。通过这些预览渠道,您可以访问最新的开发者工具功能,测试先进的网络平台 API,并在用户之前发现您网站上的问题!

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更,或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 在开发者工具中使用更多选项   了解详情   > 帮助 > 报告开发者工具问题来报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。