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

马克西姆·萨迪姆
Maksim Sadym

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

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

概览

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

开发者工具启动过程

Chromium 用于将开发者工具命令发送到 V8(一般对于 IPC)的机制称为 mojo。我的团队成员 Benedikt MeurerSigurd Schneider 在处理另一项任务时发现效率低下,并提出了一个想法来改进该流程,即删除发送和接收这些消息的两个多余步骤。

我们来深入了解一下 mojo 机制的工作原理!

mojo 机制

基本原理

有一个 mojo 命令 EvaluateScript,用于运行 JS 命令。它会将包括 arguments 的整个 JS 命令序列化为 JavaScript 源代码字符串,该代码可以是 eval()。正如您所想象的,这些字符串可能会非常长且昂贵。在 V8 收到命令后,这些 JavaScript 代码字符串会在运行之前被反序列化。对每条消息进行序列化和反序列化的过程会产生显著的开销。

Benedikt Meurer 意识到 arguments 的序列化和反序列化的代价很高,而且整个“将 JS 命令序列化为 JS 字符串”“反序列化 JS 字符串”步骤是多余的,可以跳过。

技术详情:RenderFrameHostImpl::ExecuteJavaScript

改进方式

改进的机制

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

有关我们如何实现此优化的技术细节,请参考以下两个补丁:

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

影响

为了衡量此项变更的效果,我们进行了一些比较,比较了 Chromium 的修订版本 cb971089a0584f213b39d581(更改前后)。

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

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

根据这些实验结果,通过优化,开发者工具的打开速度可提升约 13%(从 11.2 秒缩短至 10 秒)

亮点、CPU 时长

方法名称 未优化(毫秒) 优化(毫秒) 差异(毫秒) 速度提升 (%)
总计 11,213.19 9953.99 -1259.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 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并先于用户发现您网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 向我们提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues,报告开发者工具问题。
  • 您可以前往 @ChromeDevTools 发 Twitter 微博。
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。