动画和性能

动画必须能够正常运行，否则会对用户体验产生负面影响。

Paul Lewis

Sam Thorogood

每当进行动画处理时，请始终保持 60fps，因为如果帧速率低于此值，就会导致卡顿或停顿，这会让用户明显察觉到，并对他们的体验产生负面影响。

• 请注意，动画不应导致性能问题；请确保您了解为给定 CSS 属性添加动画的影响。
• 对会更改网页几何图形（布局）或导致绘制的属性进行动画处理的开销特别高。
• 请尽可能只更改转换和不透明度。
• 使用 will-change 可确保浏览器知道您计划为哪些元素添加动画。

为媒体资源添加动画效果需要付费，而且有些媒体资源的动画效果价格较低。例如，为元素的 width 和 height 添加动画会更改其几何图形，并可能会导致页面上的其他元素移动或更改大小。此过程称为布局（在基于 Gecko 的浏览器 [例如 Firefox] 中称为重新流布局），如果网页包含大量元素，此过程可能会很耗时。每当触发布局时，通常都需要绘制网页或其部分内容，这通常比布局操作本身的开销更高。

请尽可能避免为会触发布局或绘制操作的属性添加动画效果。对于大多数新型浏览器，这意味着将动画限制为 opacity 或 transform，这两种动画都可以由浏览器进行高度优化；动画由 JavaScript 或 CSS 处理并不重要。

请参阅有关制作高性能动画的完整指南。

使用 will-change 属性

Browser Support

• 36
• 79
• 36
• 9.1

Source

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

一般而言，如果动画可能会在接下来的 200 毫秒内因用户互动或应用状态而触发，则最好为正在呈现动画的元素添加 will-change。因此，在大多数情况下，如果您打算为应用当前视图中的某个元素添加动画效果，则应为您计划更改的任何属性启用 will-change。对于我们在前面所有指南中一直使用的框示例，为转换和不透明度添加 will-change 的代码如下所示：

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

现在，支持该功能的浏览器（目前是大多数现代浏览器）会在后台进行适当的优化，以支持更改或为这些属性添加动画效果。

CSS 与 JavaScript 性能

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

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

• 在许多情况下，合成器线程还可以处理对转换和不透明度的其他更改。

• 如果任何动画触发绘制或布局（或两者兼有），则需要“主线程”执行工作。这对基于 CSS 和 JavaScript 的动画都适用，并且布局或绘制开销很可能比与 CSS 或 JavaScript 执行相关的任何工作都小，因此这个问题没有意义。