MotionMark 1.1

两年前，我们发布了 MotionMark，这是一个用于衡量 Web 图形性能的基准测试工具。它运行一系列测试，以检验 Web 上常见的绘制方式。我们使用这个基准测试来提高 WebKit 及底层框架的性能，并很高兴看到其他人也使用此基准测试进行自己的性能研究。

今天，我们宣布推出 MotionMark 基准测试的更新版本，我们称之为 1.1 版。

测试更新

首先，让我们快速回顾一下这个基准测试。MotionMark 运行一套测试，通过检验各种技术（包括 CSS、文本、canvas 和 SVG）来衡量浏览器的绘制性能。每个测试将一小组图形原语打包成一个渲染元素，并在保持 60 fps 的同时尽可能多地渲染它们。这个数字代表了测试的分数。有关更多详细信息，您可以阅读我们的入门博客文章。

我们希望 MotionMark 能够涵盖渲染引擎的尽可能多方面。在我们的首次基准测试更新中，我们刷新了套件中的两个测试。

Multiply 测试（利用 DOM 元素绘制）的呈现方式限制了可绘制元素的最大数量。MotionMark 要求测试能够对浏览器施加压力，使其无法维持 60 fps，而苹果的一些新硬件，如 iPhone Xs，则强大到足以在最高复杂度下以 60 fps 动画化 Multiply。所以我们不得不让测试更难！我们减小了每个元素的物理尺寸，以便在可用空间中容纳更多元素，并将该上限增加了三倍。我们还更新了测试期间隐藏元素的方式。以前元素使用 visibility: hidden 切换可见性；现在它们也通过 display: none 和 opacity: 0 来实现。

在最初的 1.0 套件中，Leaves 测试中的每个渲染元素都是一个应用了平移和旋转变换的图像。对于 1.1 版，我们使用 width 和 height 属性以不同尺寸范围绘制图像，并通过使用不透明度动画化淡入淡出来测试混合。

利用 MotionMark 的设计简化分析

MotionMark 使我们能够监控 WebKit 以及我们所依赖的底层系统框架（如 CoreAnimation）中的图形性能，并发现提升性能的机会。随着我们使用此基准测试进行回归分析的经验增长，我们发现了一些有助于我们隔离瓶颈并验证性能提升的过程。

首先，我们将“主”套件中的测试根据特定技术拆分为派生版本。例如，对于前面提到的 Multiply 测试更新，我们创建了所有元素仅使用一种 CSS 隐藏元素技术的版本。对于 Design 测试，我们创建了一个仅包含拉丁文本的版本，一个使用东亚字符的版本，以及一个使用从右到左和复杂脚本的版本。隔离这些技术使得更容易确定 WebKit 在测试的哪个部分出现回归，并放大了跟踪中的问题，以便于分析。

其次，我们添加了一种以固定数量元素更简单地运行测试的方法。该基准测试使用一个渐变控制器，该控制器改变绘制负载，使其反复超过浏览器无法以 60 fps 渲染场景的阈值。然而，分析此类运行的 Instruments 跟踪很难追踪回归，因为负载是逐帧动态变化的。MotionMark 的设计允许我们插入不同类型的控制器，使用一个简单地以静态复杂度渲染场景的控制器，有助于对不同版本的 WebKit 和操作系统进行 A/B 分析。随后的修复可以轻松地通过固定和渐变控制器进行验证。

结果

使用 MotionMark 作为跟踪回归和发现改进方法的工具，对我们提升 WebKit 中的图形性能至关重要。因此，与之前的版本相比，我们已使 macOS Mojave 上的 Safari 和 iOS 12 在 MotionMark 1.1 上平均速度提升超过 20%。

总之，MotionMark 已更新至 1.1 版，以在更快的硬件上更好地扩展，并包含更多绘制技术。我们希望这个基准测试能够继续成为浏览器优化其引擎以适应现代 Web 的有用工具。