动画和性能

动画必须表现良好，否则会对用户体验产生负面影响。

Paul Lewis

Sam Thorogood

在设置动画效果时保持 60fps，因为任何卡顿或停顿都会引起用户注意，并对其体验产生负面影响。

• 注意，您的动画不会导致性能问题；确保您了解为指定 CSS 属性添加动画效果的影响。
• 改变页面（布局）几何图形或导致绘图的动画属性特别消耗资源。
• 尽可能坚持改变变形和透明度。
• 使用 will-change 确保浏览器知道您打算为哪些内容添加动画效果。

为属性添加动画效果不是免费的，并且为某些属性添加动画开销要低于其他属性。例如，为元素的 width 和 height 添加动画效果会改变其几何图形，并且可能会导致页面上的其他元素移动或改变大小。此过程称为“布局”（在基于 Gecko 的浏览器（例如 Firefox）中称为“自动重排”），当页面包含大量元素时，费用可能十分高昂。每当触发布局时，通常需要绘制页面或页面的一部分，这通常比布局操作本身的开销更大。

应尽可能避免为触发布局或绘制的属性添加动画效果。对于大多数现代浏览器，这意味着将动画限制为 opacity 或 transform，浏览器可以对这两种元素进行高度优化；动画是由 JavaScript 还是 CSS 处理无关紧要。

阅读有关如何制作高性能动画的完整指南。

使用 will-change 属性

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 36 个
• <ph type="x-smartling-placeholder"></ph> 79 个
• <ph type="x-smartling-placeholder"></ph> 36 个
• <ph type="x-smartling-placeholder"></ph> 9.1

来源

使用 will-change 可确保浏览器知道您打算更改元素的属性。这样，浏览器在您做出更改之前，就可以进行最合适的优化。不过，不要过度使用 will-change，因为过度使用可能会导致浏览器浪费资源，进而导致更多性能问题。

一般经验法则是，如果动画可能在接下来的 200 毫秒内触发（无论是由用户互动触发，还是由于应用状态触发），不妨对动画元素使用 will-change。在大多数情况下，对于应用当前视图中您打算为其添加动画效果的任何元素，都应针对您打算更改的属性启用 will-change。对于我们在之前的指南中一直使用的框示例，针对转换和不透明度添加 will-change 如下所示：

.box {
  will-change: transform, opacity;
}

现在，支持此属性的浏览器（目前大多数最新的浏览器）将在后台进行适当的优化，以支持这些属性的更改或动画设置。

CSS 对比 JavaScript 的性能

网络上有许多网页和评论会话从性能的角度讨论了 CSS 和 JavaScript 动画的相对优势。以下是几点注意事项：

• 基于 CSS 的动画和原生支持的 Web Animation 通常在称为“合成器线程”的线程上处理。这与执行样式、布局、绘制和 JavaScript 的浏览器“主线程”不同。这意味着，如果浏览器在主线程上运行一些开销大的任务，这些动画可以继续运行而不会中断。

• 在许多情况下，变形和不透明度的其他更改也可由合成器线程处理。

• 如果任何动画触发绘制和/或布局，“主线程”才能发挥作用这适用于基于 CSS 和 JavaScript 的动画，布局或绘制的开销可能会使与 CSS 或 JavaScript 执行相关的工作量大打折扣，使问题变得无意义。