动画和性能

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

每次设置动画时都要保持 60fps,因为任何时候都会导致卡顿或停顿,这种情况将引起用户注意,并对其体验产生负面影响。

  • 请注意,您的动画不会导致性能问题;请确保您了解为给定 CSS 属性设置动画效果的影响。
  • 改变页面(布局)几何图形或导致绘制的动画属性特别消耗资源。
  • 尽可能坚持改变变形和透明度。
  • 使用 will-change 确保浏览器知道您打算为什么添加动画效果。

为属性设置动画不是自由的,而且某些属性设置动画的开销比其他属性更低。例如,为元素的 widthheight 添加动画效果会改变元素的几何图形,并可能导致页面上的其他元素移动或改变大小。此过程称为布局(在 Firefox 等基于 Gecko 的浏览器中称为自动重排),如果您的页面包含大量元素,开销可能会非常大。每当触发布局时,页面或其部分内容通常需要进行绘制,这通常比布局操作本身的开销更大。

应尽可能避免为会触发布局或绘制的属性设置动画效果。对于大多数现代浏览器来说,这意味着将动画限制为 opacitytransform,这两者都可以得到浏览器的高度优化;动画是由 JavaScript 还是 CSS 处理并不重要。

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

使用 will-change 属性

浏览器支持

  • 36
  • 79
  • 36
  • 9.1

来源

使用 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 执行相关的所有工作减少,使问题变得无意义。