Speedometer 2.0
现代网络应用响应速度的基准测试

2014年,Apple 的 WebKit 团队发布了 Speedometer 1.0,这是一个用于衡量网络应用响应速度的基准测试。它通过使用 TodoMVC 协调添加、完成和删除待办事项来模拟网络应用中的用户交互。Speedometer 使用在实际应用中广泛使用的 DOM API 重复这些操作。这些操作的性能取决于 JavaScript 引擎、DOM API、布局、CSS 样式解析和浏览器引擎其他部分的速度。

多年来,浏览器工程师一直使用 Speedometer 作为衡量流行框架实际使用情况的代理来优化其引擎。最初,Speedometer 包含了六个广泛使用的流行 JavaScript 框架和库中待办事项应用的实现:Ember、Backbone、AngularJS、jQuery、Flight 以及 React 的早期版本。它还包含了原生 JavaScript。

自 Speedometer 1.0 首次发布以来,Web 开发者生态系统发生了显著变化,库、框架和编程范式的使用趋势也随之改变。现在,开发者在创建新网站时通常使用转译器模块打包器最近引入的框架。正因如此,在过去的一年里,WebKit 和 Chromium 的工程师一直在合作开发 Speedometer 的新版本,以更好地反映当今广泛使用的框架、工具和模式。

今天,我们很高兴宣布推出 Speedometer 2.0 基准测试。我们希望这个新版本的 Speedometer 能帮助浏览器厂商优化其浏览器引擎以适应现代 Web。

支持现代 JavaScript 框架和库

在过去的三年里,越来越多的实际网站使用 React(一个用于编写用户界面的 JavaScript 库)开发。Preact 和 Inferno 等衍生产品也获得了普及。Speedometer 2.0 包含了使用这些库实现的 Web 应用。它还包括一个使用 React 和 Redux(一个流行的状态管理库)的条目。

Webpack 和 Rollup 是流行的 JavaScript 模块打包器,常与这些库一起使用,Speedometer 2.0 包含了这些工具生成的输出。

Ember.js 在最初的 Speedometer 中就有体现,现在它拥有一个专门的工具来创建新项目,并为开发者提供了更精简的部署流程。此外,多年来 Ember 核心框架也发生了重大变化。为了将这些变化以及开发者目前使用 Ember.js 的方式融入其中,Speedometer 2.0 包含了使用最新 Ember(基于 Ember CLI 构建)的实现。

我们观察到另一个越来越受欢迎的框架是 Vue.js——一个旨在逐步采用的渐进式解决方案。与 Ember 类似,Vue.js 拥有指导性的入门工具,Speedometer 2.0 包含了一个使用 Vue CLI 构建的 Vue.js 实现。

当然,并非所有实际网站都使用这些解决方案构建。许多网站仍然使用 Speedometer 1.0 发布时流行的库进行部署,这也是 Speedometer 2.0 包含 AngularJS、Backbone.js 和 Flight 中实现的更新的原因之一。

支持 ES2015 JavaScript 和 Babel

Speedometer 1.0 包含了一个使用原生 JavaScript(即不使用任何库或框架)实现的待办事项应用版本。当时,Web 开发者主要使用 ES5 版本的 JavaScript 编写他们的应用。如今,现代浏览器对 ES2015(也称为 ES6)——一个更进化的 JavaScript 版本——有出色的支持。Speedometer 2.0 现在包含了一个使用 ES2015 特性(如类、constlet、箭头函数和模板字面量)实现的待办事项应用。

尽管衡量原生 JavaScript 性能具有高价值,但如今越来越多的开发者也使用 Babel 等转译器将最新版本的 JavaScript 代码转译回支持他们所关注的所有浏览器的版本。为了反映这种工作流程,Speedometer 2.0 包含了一个使用 ES Modules 且由 Babel 生成 ES5 输出的 ES2015 实现。未来,随着浏览器全面支持原生 ES Modules,我们希望能够发展此基准测试,使其也能跟踪未打包或未转译的实现。

支持 TypeScript

TypeScript 是 JavaScript 的一个带类型超集,在 Web 开发者社区中越来越受欢迎。它提供类型作为一流语法,通常编译速度快,并提供丰富的工具,用于在迭代过程中进行类型感知的自动补全和错误高亮显示。

如今,TypeScript 的最大用户之一是 Angular。为了让浏览器能够衡量 TypeScript 应用可能生成的输出类型,Speedometer 2.0 包含了一个用 TypeScript 编写、并转译为 ES5 的 Angular 实现。我们希望,针对此实现进行优化的浏览器,能在更多框架引入 TypeScript 支持时,提供同样的性能提升。

面向未来:函数式编程

前端开发者社区一直在向函数式编程模式靠拢。Elm 和 PureScript 等技术日益增长的兴趣证明了这一点,这两种技术都可转译为 JavaScript。为了让浏览器能够针对这些模式进行优化,Speedometer 2.0 包含了这两种技术的实现。

分数计算的更新

Speedometer 1.0 通过计算每个实现中添加、标记完成和删除 100 个待办事项所需运行时间的算术平均值来计算 Web 应用响应速度的最终得分,以激励浏览器厂商优化最慢的框架或库。不幸的是,当我们向 Speedometer 2.0 添加更多库和框架时,这导致某个待办事项应用的实现比另一个获得 25 倍的权重。当我们重新添加 Ember 的调试版本时,问题变得尤为突出——它的速度比 Ember 生产版本慢 4 倍以上。然而,只有一小部分使用 Ember 部署的网站使用调试版本。

在 Speedometer 2.0 中,我们将分数计算方式改为对不同待办事项应用实现的几何平均值。最终分数是基准测试每次迭代计算出的几何平均值的算术平均值。

未来

Speedometer 2.0 是浏览器厂商之间一次激动人心的合作。我们希望在未来的基准测试迭代中,通过与框架作者和开发者社区更紧密地合作,识别广泛使用的模式、框架和工具,从而优化浏览器引擎,在此次合作的基础上继续前进。