CSS动画的帧预算（Frame Budget）：在16ms内完成样式计算与合成的策略

CSS动画的帧预算（Frame Budget）：在16ms内完成样式计算与合成的策略

大家好！今天我们来深入探讨一个对于前端性能至关重要的概念：CSS动画的帧预算，以及如何在16毫秒内完成样式计算与合成，从而创造流畅的动画体验。

我们知道，浏览器为了呈现平滑的动画，需要尽可能地以每秒60帧（FPS）的速度刷新页面。这意味着每一帧的渲染时间必须控制在16.67毫秒以内 (1000ms / 60FPS ≈ 16.67ms)。这16毫秒的预算需要分配给浏览器执行的各个阶段，包括JavaScript执行、样式计算、布局、绘制和合成。 如果任何一个阶段超过了分配的时间，就会导致掉帧，从而让用户感觉到卡顿。

今天，我们将重点关注样式计算和合成这两个关键阶段，并探讨如何优化CSS动画，以确保它们能在16毫秒的帧预算内高效运行。

帧生命周期与性能瓶颈

在深入研究优化策略之前，我们先简单回顾一下浏览器的渲染流水线，以便更好地理解性能瓶颈可能出现的位置。

1. JavaScript: 处理用户交互、数据更新、以及触发动画。
2. 样式计算 (Style): 根据CSS选择器匹配DOM元素，并计算出每个元素的最终样式。
3. 布局 (Layout): 根据样式计算的结果，确定每个元素在页面上的位置和大小，构建渲染树。
4. 绘制 (Paint): 将渲染树中的每个元素绘制成像素，生成绘制记录。
5. 合成 (Composite): 将绘制记录分成图层，并上传到GPU进行合成，最终显示在屏幕上。

其中，样式计算和布局通常是性能瓶颈所在。特别是当页面结构复杂、CSS选择器效率低下、或者动画触发了大量元素的重新布局时，这两个阶段的耗时会显著增加。

样式计算的优化

样式计算是找到与每个DOM元素匹配的所有CSS规则，并计算最终应用到该元素的样式。这个过程的复杂度取决于CSS选择器的效率和DOM树的深度。

1. 避免复杂的CSS选择器:

复杂的CSS选择器（例如：.parent > .child .grandchild .deepest）会增加浏览器查找匹配元素的时间。尽量使用简洁的选择器，例如类名或ID。

示例:

/* 不推荐 */
.container > .item .title span {
  color: red;
}

/* 推荐 */
.item-title {
  color: red;
}

2. 减少样式规则的数量:

浏览器需要遍历所有的样式规则来找到匹配的规则。减少不必要的样式规则可以提高样式计算的效率。

3. 使用will-change属性:

will-change属性可以提前告知浏览器元素将要发生的变化，以便浏览器可以提前进行优化。例如，如果一个元素将要进行transform或opacity动画，可以设置will-change: transform或will-change: opacity。

示例:

.element {
  will-change: transform; /* 或者 opacity */
  transition: transform 0.3s ease-in-out;
}

.element:hover {
  transform: translateX(100px);
}

will-change虽然可以提高性能，但也需要谨慎使用。过度使用会导致浏览器消耗更多的内存。通常只应该在元素即将发生变化时才使用它。

4. 使用CSS Containment:

CSS Containment允许开发者告诉浏览器，页面的某些部分是独立的，并且不会影响其他部分。这可以减少样式计算、布局和绘制的范围，从而提高性能。

CSS Containment有四个属性：

• contain: none: 默认值，表示没有应用任何Containment。
• contain: layout: 表示该元素的内容不会影响其外部元素的布局。
• contain: paint: 表示该元素的内容不会影响其外部元素的绘制。
• contain: strict: 表示该元素应用了layout和paintContainment，并且还应用了sizeContainment。sizeContainment表示元素的大小不会影响其外部元素。
• contain: content: 表示该元素应用了layout和paintContainment，并且还应用了styleContainment。styleContainment表示元素的样式不会影响其外部元素。

示例:

.independent-section {
  contain: content;
}

布局的优化

布局是确定页面上每个元素的位置和大小的过程。当元素的几何属性（例如：width、height、top、left）发生变化时，浏览器就需要重新进行布局。布局的开销很大，特别是当页面结构复杂时。

1. 避免触发布局的属性:

某些CSS属性会触发浏览器的布局，例如：width、height、top、left、margin、padding等。应该尽量避免使用这些属性来创建动画。

2. 使用transform和opacity属性:

transform和opacity属性不会触发布局，它们只会触发合成。因此，使用transform和opacity属性来创建动画可以显著提高性能。

示例:

/* 不推荐 */
.element {
  position: absolute;
  left: 0;
  transition: left 0.3s ease-in-out;
}

.element:hover {
  left: 100px;
}

/* 推荐 */
.element {
  transition: transform 0.3s ease-in-out;
}

.element:hover {
  transform: translateX(100px);
}

3. 使用position: absolute或position: fixed:

将元素设置为position: absolute或position: fixed可以将其从文档流中移除，从而减少布局的范围。

4. 避免强制同步布局:

强制同步布局是指在JavaScript中读取某个元素的几何属性（例如：offsetWidth、offsetHeight、offsetTop、offsetLeft）之后，立即修改该元素的样式。这会导致浏览器强制进行布局，从而降低性能。

示例:

// 不推荐
const element = document.querySelector('.element');
const width = element.offsetWidth;
element.style.width = width + 10 + 'px';

// 推荐
const element = document.querySelector('.element');
element.style.width = element.offsetWidth + 10 + 'px'; // 避免读取offsetWidth

或者，可以使用requestAnimationFrame来延迟样式修改，从而避免强制同步布局。

const element = document.querySelector('.element');
requestAnimationFrame(() => {
  element.style.width = element.offsetWidth + 10 + 'px';
});

5. 使用Virtual DOM (适用于React, Vue等框架):

Virtual DOM通过在内存中维护一个DOM的副本，并在需要更新时，只更新实际DOM中发生变化的部分，从而减少了DOM操作的次数，提高了性能。

合成的优化

合成是将绘制记录分成图层，并上传到GPU进行合成，最终显示在屏幕上。如果合成的开销很大，也会导致掉帧。

1. 创建合成层:

浏览器会将某些元素自动提升为合成层。这些元素通常是：

• 使用了transform或opacity属性的元素。
• 使用了<video>或<iframe>元素的元素。
• 使用了will-change属性的元素。

将元素提升为合成层可以提高合成的效率，因为浏览器可以将这些元素单独进行合成，而不需要重新绘制整个页面。

可以使用浏览器的开发者工具来查看哪些元素被提升为合成层。在Chrome中，可以在“Layers”面板中查看。

2. 避免过度创建合成层:

虽然创建合成层可以提高性能，但也会消耗更多的内存。过度创建合成层会导致浏览器消耗过多的资源，从而降低性能。

3. 减少绘制的面积:

绘制的面积越大，合成的开销就越大。因此，应该尽量减少绘制的面积。

示例:

如果一个元素只发生了transform或opacity变化，那么只需要重新合成该元素所在的图层，而不需要重新绘制整个页面。

4. 使用clip-path属性:

clip-path属性可以裁剪元素的可见区域，从而减少绘制的面积。

示例:

.element {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

使用requestAnimationFrame

requestAnimationFrame是一个浏览器API，用于在浏览器下一次重绘之前执行动画。使用requestAnimationFrame可以确保动画在每一帧都运行，从而避免掉帧。

示例:

function animate() {
  // 执行动画逻辑
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

requestAnimationFrame的回调函数会在浏览器准备好进行下一次重绘时被调用。这可以确保动画与浏览器的刷新频率同步，从而避免掉帧。

代码示例：优化动画性能

假设我们需要创建一个简单的动画，让一个方块从左向右移动。

未优化的代码:

<div class="box"></div>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
<script>
const box = document.querySelector('.box');
let position = 0;

function animate() {
  position += 2;
  box.style.left = position + 'px'; // 触发布局
  if (position < 500) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);
</script>

这段代码会触发布局，因为修改了left属性。

优化后的代码:

<div class="box"></div>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(0); /* 初始化transform */
}
</style>
<script>
const box = document.querySelector('.box');
let position = 0;

function animate() {
  position += 2;
  box.style.transform = `translateX(${position}px)`; // 使用transform
  if (position < 500) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);
</script>

这段代码使用了transform属性，避免了触发布局。同时，初始化了transform属性，确保元素一开始就处于合成层。

更进一步的优化：使用CSS Transitions或Animations

CSS Transitions 和 Animations 允许浏览器本身管理动画，而不是通过 JavaScript 每一帧都修改样式。 这样通常能获得更好的性能，因为浏览器可以进行优化。

<div class="box"></div>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 2s linear; /* 使用 CSS Transition */
}

.box.animate {
  transform: translateX(500px);
}
</style>
<script>
const box = document.querySelector('.box');
requestAnimationFrame(() => {
  box.classList.add('animate');
});
</script>

这段代码使用 CSS Transition 来实现动画。 我们通过添加 animate 类来触发动画，浏览器会负责处理中间帧。

性能分析工具

现代浏览器都提供了强大的性能分析工具，可以帮助我们识别性能瓶颈。在Chrome中，可以使用“Performance”面板来分析动画的性能。

1. 打开开发者工具 (F12)。
2. 选择“Performance”面板。
3. 点击“Record”按钮，开始录制。
4. 执行动画。
5. 点击“Stop”按钮，停止录制。
6. 分析录制结果，找到性能瓶颈。

性能分析工具可以显示每个阶段的耗时，以及触发布局和绘制的原因。这可以帮助我们找到需要优化的部分。

不同类型的动画与性能影响

不同的CSS属性对性能的影响是不同的。下面是一个表格，总结了不同类型的动画对性能的影响：

属性	性能影响	优化策略
transform	最好	尽可能使用transform属性来创建动画。
opacity	很好	可以安全地使用opacity属性来创建动画。
filter	好	某些filter属性（例如：blur）可能会比较耗时。
clip-path	一般	可以减少绘制的面积。
width	差	触发布局。尽量避免使用width属性来创建动画。
height	差	触发布局。尽量避免使用height属性来创建动画。
top	差	触发布局。尽量避免使用top属性来创建动画。
left	差	触发布局。尽量避免使用left属性来创建动画。
margin	差	触发布局。尽量避免使用margin属性来创建动画。
padding	差	触发布局。尽量避免使用padding属性来创建动画。
box-shadow	较差	消耗较多资源，尽量避免过度使用。
border-radius	中等	对性能有一定影响，尽量避免在复杂元素上使用。

小结：流畅动画的关键

优化CSS动画以满足16毫秒的帧预算，需要理解浏览器渲染流水线的各个阶段，并采取相应的优化策略。 避免复杂的CSS选择器，减少样式规则的数量，合理使用will-change属性和CSS Containment可以提高样式计算的效率。 使用transform和opacity属性，避免触发布局的属性，以及合理使用position属性可以减少布局的开销。 创建合成层，减少绘制的面积，以及使用clip-path属性可以提高合成的效率。 最后，使用requestAnimationFrame来确保动画在每一帧都运行，并使用性能分析工具来识别性能瓶颈。

总结：构建高性能动画的策略

通过优化CSS选择器、减少布局重排、利用硬件加速以及使用合适的动画API，我们可以构建流畅且高性能的CSS动画，避免卡顿，提升用户体验。 关键在于理解浏览器的渲染机制，并选择正确的工具和技术来解决性能瓶颈，最终实现16ms内的帧预算目标。

更多IT精英技术系列讲座，到智猿学院