Speedometer 3.0
衡量浏览器性能迄今为止的最佳方式

2024 年 3 月 11 日

作者：Ryosuke Niwa

正如今天在 browserbench.org 上宣布的那样，Apple 的 WebKit 团队与其他浏览器引擎开发人员合作，很高兴推出 Speedometer 3.0，这是一个重大更新，能更好地反映当今的 Web。它由所有主要浏览器引擎（Blink、Gecko 和 WebKit）的开发人员共同构建，并获得了 Apple、Google、Intel、Microsoft 和 Mozilla 等公司的数百项贡献。本文深入探讨了 Speedometer 协作项目如何改进了该基准测试的测量方法和测试内容。

回顾历史，2014 年，Apple 的 WebKit 团队发布了 Speedometer 浏览器基准测试，旨在衡量网站和 Web 应用程序的响应能力。

最初的 Speedometer 模拟了 Web 应用程序中的用户交互，通过使用不同的 JavaScript 框架编写的 TodoMVC 示例应用程序来添加、完成和删除待办事项。它不同于当时公开可用的其他 DOM 或 Web 应用程序基准测试。这些较旧的基准测试大多是微基准测试的集合，未能反映 DOM API 在实际 Web 应用程序中的使用方式，也未能反映单个 API 如何与 Web 浏览器引擎的其余部分交互。Speedometer 迅速成为性能测量和调优的重要工具，不仅在 WebKit 中，而且在其他浏览器引擎中也是如此。

2018 年，WebKit 团队与 Google 的 Chrome 团队合作，发布了 Speedometer 2.0，该版本更新以使用当时可用的最新框架和库。此后，Speedometer 基准测试在浏览器引擎中作为优化指南，以及在独立测试人员和评论员中用于比较不同设备、操作系统和浏览器方面，获得了更高的知名度。

今天发布的 Speedometer 3.0 标志着 Web 浏览器性能测试向前迈出了重要一步。它提高了测量的准确性，并能衡量各种内容的性能。

跨浏览器协作

Speedometer 3.0 的发布是浏览器开发人员之间协作为共同改进整个 Web 的成果。正如 Interop 2024 代表了测试和改进标准合规性的联合工作一样，Speedometer 3.0 也是测试和改进浏览器性能的联合努力。

之前的 Speedometer 版本是作为 WebKit 项目的一部分开发的，而 Speedometer 3.0 则是在联合的多方利益相关者治理模式下开发和发布的，其中包括三大主要引擎浏览器：Blink、Gecko 和 WebKit，并且自 2022 年 12 月首次宣布以来，该仓库已收到了数百项开源贡献。这种合作更好地确保了测量和工作负载组成的公平性。该小组共同为基准测试创建了共同愿景。

改进的测试工具

我们改进了 Speedometer 测量运行时性能的方式。之前的 Speedometer 版本将同步运行测试脚本的时间测量为“同步”时间；将“同步”工作结束时计划的零延迟计时器触发的时间测量为“异步”时间，如下图所示

In Speedometer 2, async time was measured as between when a timer is scheduled at the end of sync time and when the timer fires. That sometimes captures layout and paint and other tasks running after synchronous script execution but before the timer fires.

然而，这种方法有时会遗漏浏览器引擎响应脚本驱动的更改所做的重要工作，因为同步任务和零延迟计时器的调度没有考虑渲染更新的时序。它也没有捕获任何框架延迟到下一个 requestAnimationFrame (rAF) 回调才完成的工作，而这在现代框架中是一种常用技术。下图说明了时间计算如何可能遗漏重要工作。

In Speedometer 2, it was possible that requestAnimationFrame, layout, and paint to happen after the async timer had fired in some cases. In such cases, we fail to capture the time browser spends updating the rendering of a web page.

Speedometer 3.0 利用了所有浏览器引擎都已采用 HTML5 事件循环模型来更新网页渲染的事实。它将 requestAnimationFrame 回调中的测试脚本测量为“同步”时间，将第二个 requestAnimationFrame 中计划的零延迟计时器触发的时间测量为“异步”时间

In Speedometer 3, we schedule two requestAnimationFrame callbacks. The first one runs and measures sync time, and the second one schedules a timer to measure the async time. Because browsers are expected to update the rendering after invoking requestAnimationFrame callback but before running any other tasks, we always capture the time browser spends updating the rendering of a web page.

由于零延迟计时器现在被安排在第二个 requestAnimationFrame 中，因此它保证在测试同步部分期间计划的所有零延迟计时器触发后才触发。得益于 HTML5 的事件循环处理模型，浏览器引擎会在所有 requestAnimationFrame 调用之后、下一个零延迟计时器触发之前更新网页渲染。这些更改极大地提高了 Speedometer 准确测量浏览器响应处理用户事件的脚本所执行的同步工作和异步工作的运行时长。

测试工具也已重写，以使用现代 JavaScript 特性，如模块、原生 Promise、let & const、async & await 和类语法，这些特性在 Speedometer 1.0 首次编写时并未广泛可用。

与其前身一样，Speedometer 3.0 会汇总模拟用户操作（如添加、完成和删除待办事项）在每个工作负载下所花费的运行时长，并计算不同工作负载总和的几何平均值。最终分数是几何平均值倒数的算术平均值

In Speedometer 3, each workload can have multiple sync and async times. The total time for all sync and async time is calcualted for each workload, and the score is calculated as the reciprocal of the geometric mean of the totals across workloads.

分数调整

自 Speedometer 的基准测试内容在 2018 年最后一次更新以来，Web 浏览器在处理 Speedometer 内容方面变得越来越好。此外，Apple Silicon Mac 等新硬件不断突破计算的极限。最初分数被设定在 100 以下，而现在，现代浏览器在最快的设备上可以获得超过 500 分。为了使分数更易于比较并为未来的改进留出空间，我们调整了分数，使典型的 Web 浏览器在初始时能获得 20-30 的分数。

更新的 UI 框架

现在我们来看看 Speedometer 3 中的测试内容。与 Speedometer 过去的版本一样，3.0 版包括基于 TodoMVC 的待办事项应用程序，它们模拟了添加、完成和删除待办事项。为了更好地代表现代 Web，我们从 HTTP Archive 中识别出 2023 年 3 月最广泛使用的 JavaScript UI 框架

In the order of popularity, React, Vue.js, React, Backbone.js, AngularJS, Next.js, Angular, Nuxt.js, lit-html, Knockout.js, Alpine.js, Marionette.js, Gatsby, Svelte, React Redux

同时还考虑了 NPM 的月下载量，以寻找具有高发展势头的框架

In the order of NPM monthly downloads, React, React Redux, Next.js, Vue.js, Angular, Preact, lit-html, Backbone.js, Nuxt.js, Svelte, AngularJS, Gatsby, Alpine.js, Knockout.js, Marionette.js

基于这些数据点，我们在待办事项应用程序中包含了以下 JavaScript 框架：Angular、Backbone、jQuery、Lit、Preact、React、React+Redux、Svelte 和 Vue。对于每个框架，都选择了当时最常用的版本。还包括使用 ES5、ES6 和 Web Components 编写的纯 JavaScript 待办事项实现。

复杂 DOM 版本

此外，Speedometer 3.0 还包含部分 TodoMVC 应用程序的“复杂 DOM”版本。在这些复杂 DOM 版本中，每个待办事项应用程序都嵌入到一个 UI 结构中，该结构模仿了一个具有许多深度嵌套 DOM 节点和大量 CSS 规则的 Web 应用程序。尽管基准测试仍模拟相同的操作集，但在更多 DOM 元素和 CSS 规则的上下文中进行操作会增加工作量并捕获额外的性能瓶颈。

为了确保测试性能场景的多样性，Speedometer 3.0 包含 6 个简单 DOM 待办事项应用程序和 6 个复杂 DOM 待办事项应用程序。

Complex DOM workloads has ribbon menus, side bar tree view, search field, and other complex UI elements surrounding the todo app.

更广泛的内容

总而言之，这些针对待办事项应用程序的更改显著提高了基准测试的覆盖范围。但 Speedometer 3.0 更进一步，包含了全新类型的应用程序。

Speedometer 3.0 包含两个模拟典型新闻网站的测试应用程序，它们使用流行的单页应用程序框架 Next.js 和 Nuxt 构建。它模拟了用户操作，例如点击菜单项以及在单页应用程序设置中导航到另一个页面。

News sites workload mimics a popular news site with navigation menu, hero images, headlines, and a summary of articles.

Speedometer 3.0 还包括四个基于 Observable Plot、chart.js、React stockcharts 和 WebKit 性能仪表板的图表应用程序。Observable Plot 和 React Stockcharts 基于 D3，并测试操作基于 SVG 的图形。Chart.js 和 WebKit 性能仪表板测试绘制基于 Canvas 的图形。

Charting workloads draw bar graphs of the number of airports in each U.S. state for example.

最后，Speedometer 3.0 新增了两个文本编辑应用程序：一个使用 CodeMirror 构建的 JavaScript 代码编辑器和一个使用 TipTap 构建的所见即所得 (WYSIWYG) 编辑器。在这两种场景中，它都模拟了创建新的可编辑区域、加载大量文本以及语法高亮或加粗文本的步骤

CodeMirror workload, for example, loads React's codebase and enables syntax highlighting

这些新应用程序的加入极大地拓宽了 Speedometer 3.0 的测量范围，并为浏览器引擎优化 JavaScript、样式、布局、图形和 DOM 等广泛功能提供了新机会。

未来工作

今天标志着 Web 平台的一个非凡里程碑。Speedometer 3.0 为衡量 Web 浏览器性能设定了全新的标准。随着浏览器开发人员优化其引擎，这将拓展 Web 开发人员在未来几年内可以实现的范围。由于 Speedometer 基准测试的目标是尽可能反映真实的 Web 世界，我们预计该基准测试将随着时间推移而演变。我们将定期更新要测试的框架列表，并定期更新已测试框架的版本以反映实际使用情况。您可以
在 browserbench.org 上尝试 Speedometer 3 基准测试。如果您有任何反馈或问题，请随时在 Github 上提交问题。