CSS合成层（Compositing Layer）的创建标准：`will-change`与3D变换的底层差异

CSS 合成层（Compositing Layer）：will-change 与 3D 变换的底层差异

大家好，今天我们来深入探讨 CSS 合成层，重点分析 will-change 属性与 3D 变换创建合成层的底层机制差异。理解这些差异对于优化 Web 应用的性能至关重要。

什么是合成层？

合成层是浏览器用于处理页面渲染的优化技术。简单来说，浏览器将页面分解成多个层，然后分别对这些层进行栅格化（rasterization），最后将这些栅格化的层合成为最终的页面图像。

为什么要这样做？ 关键在于，如果只有一层，任何元素的改变都需要重新栅格化整个页面，这将消耗大量的资源。而有了合成层，只需要重新栅格化发生改变的层，然后重新合成即可，大大提高了渲染效率。

创建合成层的标准

创建合成层的方法有很多种，以下列举一些常见的触发条件：

• 3D 变换 (transform: translate3d, translateZ, rotate3d 等): 任何使用 3D 变换的元素会自动提升为合成层。
• will-change 属性: 该属性允许开发者提前告知浏览器元素将要发生的改变，例如 will-change: transform 或 will-change: opacity。
• <video> 和 <iframe> 元素: 这些元素通常拥有自己的合成层。
• 带有 3D 上下文的 <canvas> 元素: WebGL 内容需要独立的合成层。
• 使用加速视频解码的元素: 例如，某些视频解码器会利用硬件加速，需要独立的合成层。
• 使用了 position: fixed 的元素 (某些浏览器实现): 不同浏览器的实现可能不同，某些情况下 position: fixed 会创建新的合成层。
• backface-visibility: hidden (和 3D 变换一起使用): 隐藏元素的背面需要独立的合成层。
• filter 属性: 例如，模糊滤镜 filter: blur(5px)。
• mask 属性: 使用遮罩效果。
• mix-blend-mode 属性 (某些情况下): 混合模式。
• opacity 小于 1 (某些情况下): 透明度，取决于浏览器优化策略。
• transform-style: preserve-3d: 为元素创建一个 3D 渲染上下文，其子元素将共享该上下文。

今天我们重点关注 will-change 和 3D 变换。

will-change 属性

will-change 属性的作用是告诉浏览器，该元素可能会在未来发生变化。 浏览器可以根据这个提示提前进行优化，例如将该元素提升到合成层。

语法:

will-change: auto | scroll-position | contents | <custom-ident> | transform | opacity | left | top | right | bottom | margin | padding | width | height | position | ...

• auto: 默认值，浏览器自己决定是否优化。
• scroll-position: 提示浏览器该元素的滚动位置可能会改变。
• contents: 提示浏览器该元素的内容可能会改变。
• <custom-ident>: 自定义标识符，通常用于一些特殊的浏览器扩展。
• transform: 提示浏览器该元素的变换可能会改变。
• opacity: 提示浏览器该元素的透明度可能会改变。
• left, top, right, bottom: 提示浏览器该元素的位置可能会改变。
• margin, padding, width, height: 提示浏览器该元素的尺寸可能会改变。
• position: 提示浏览器该元素定位方式可能会改变。

示例:

<div id="myElement">Hello World</div>

<style>
#myElement {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s ease-in-out; /* 添加过渡效果 */
}

#myElement:hover {
  transform: translateX(100px);
}
</style>

在这个例子中，当鼠标悬停在 myElement 上时，它会水平移动 100px。 如果没有使用 will-change，浏览器可能会在每次鼠标悬停时重新计算和渲染该元素，导致性能下降。 我们可以使用 will-change 来优化：

#myElement {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s ease-in-out; /* 添加过渡效果 */
  will-change: transform; /* 提示浏览器 transform 属性将会改变 */
}

#myElement:hover {
  transform: translateX(100px);
}
</style>

通过添加 will-change: transform，我们告诉浏览器 myElement 的 transform 属性将会改变。 浏览器可能会将该元素提升到合成层，并在 GPU 上进行变换操作，从而提高性能。

will-change 的注意事项:

• 过度使用: 不要滥用 will-change。 随意地将大量元素提升到合成层可能会导致内存占用过多，反而降低性能。
• 正确使用: 只在元素即将发生变化时使用 will-change。 在元素恢复到静态状态时，应该移除 will-change 属性，或者将其设置为 auto。
• 生命周期: will-change 只是一个提示，浏览器不一定会按照你的意愿创建合成层。 浏览器会根据自身优化策略进行判断。
• 测试: 使用浏览器开发者工具进行性能测试，验证 will-change 是否真的提高了性能。

3D 变换

任何使用 3D 变换的元素，例如 translate3d, translateZ, rotate3d 等，都会自动提升为合成层。 这是因为 3D 变换通常需要在 GPU 上进行计算，而合成层可以提供硬件加速。

示例:

<div id="myElement">Hello World</div>

<style>
#myElement {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.5s ease-in-out;
}

#myElement:hover {
  transform: translate3d(100px, 0, 0); /* 使用 3D 变换 */
}
</style>

在这个例子中，当鼠标悬停在 myElement 上时，它会水平移动 100px。 由于使用了 translate3d，该元素会自动提升为合成层。

3D 变换的注意事项:

• 强制硬件加速: 3D 变换通常会强制浏览器使用硬件加速，这可能会带来一些副作用，例如字体渲染问题。
• 过度使用: 不要为了创建合成层而滥用 3D 变换。 如果只需要进行简单的 2D 变换，应该避免使用 3D 变换。
• 性能测试: 使用浏览器开发者工具进行性能测试，验证 3D 变换是否真的提高了性能。

will-change 与 3D 变换的底层差异

虽然 will-change 和 3D 变换都可以创建合成层，但它们的底层机制存在一些差异。

特性	will-change	3D 变换
触发方式	显式声明，告诉浏览器元素可能会发生改变。	隐式触发，只要使用 3D 变换就会自动创建合成层。
控制权	浏览器有权决定是否创建合成层。	通常会强制创建合成层 (取决于浏览器优化策略)。
优化策略	浏览器可以根据 will-change 的值进行更细粒度的优化。	浏览器主要针对 3D 变换进行优化。
适用场景	适用于各种类型的动画和变换，可以灵活控制性能优化。	适用于需要硬件加速的 3D 场景。
副作用	滥用可能导致性能下降。	可能强制硬件加速，带来一些副作用，例如字体渲染问题。

更深入的解释:

• will-change 的本质是 "提示": will-change 告诉浏览器 "嘿，这个元素的属性可能会改变，你最好提前准备一下"。 浏览器会根据这个提示，结合自身优化策略，决定是否创建合成层。 这意味着，即使你使用了 will-change，浏览器也可能不会创建合成层。 反之，浏览器也可能在没有 will-change 的情况下，因为其他原因而创建合成层。
• 3D 变换的本质是 "强制" (更倾向于强制): 当浏览器检测到元素使用了 3D 变换时，它通常会强制将该元素提升到合成层。 这是因为 3D 变换需要在 GPU 上进行计算，而合成层可以提供硬件加速。 但是，某些浏览器在某些情况下也可能会延迟创建合成层，或者使用软件渲染。
• 优化粒度: will-change 允许开发者指定哪些属性可能会改变，例如 will-change: transform 或 will-change: opacity。 这使得浏览器可以进行更细粒度的优化。 而 3D 变换则没有这种灵活性，它会针对整个元素进行优化。
• 性能影响: 过度使用 will-change 可能会导致内存占用过多，反而降低性能。 而滥用 3D 变换可能会强制硬件加速，带来一些副作用，例如字体渲染问题。

代码示例，说明 will-change 并非总是创建合成层:

<!DOCTYPE html>
<html>
<head>
<title>will-change Example</title>
<style>
#box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: left 0.5s ease-in-out;
  position: relative;
  will-change: left; /* 提示浏览器 left 属性将会改变 */
}

#box:hover {
  left: 200px;
}
</style>
</head>
<body>

<div id="box"></div>

<script>
// 使用 requestAnimationFrame 模拟动画
function animate() {
    const box = document.getElementById('box');
    let left = 0;
    let direction = 1;

    function step() {
        left += 2 * direction;
        if (left > 200) {
            direction = -1;
        } else if (left < 0) {
            direction = 1;
        }
        box.style.left = left + 'px';
        requestAnimationFrame(step);
    }

    requestAnimationFrame(step);
}

//animate(); // 注释掉，防止自动执行
</script>

<button onclick="animate()">Start Animation</button>

</body>
</html>

在这个例子中，我们使用了 will-change: left 来提示浏览器 box 的 left 属性将会改变。 但是，浏览器是否真的会创建合成层，取决于浏览器的优化策略。 你可以使用浏览器开发者工具（例如 Chrome DevTools）的 "Layers" 面板来查看是否创建了合成层。 在某些情况下，浏览器可能会选择不创建合成层，而是直接在主线程上进行动画。 特别是当动画比较简单，或者浏览器认为创建合成层的成本高于直接渲染的成本时。

如何验证是否创建了合成层？

1. 打开 Chrome DevTools: 按下 F12 或者右键点击页面选择 "检查"。
2. 打开 "Rendering" 面板: 在 DevTools 中，点击 "…" 按钮，选择 "More tools"，然后选择 "Rendering"。
3. 勾选 "Layer borders" 或 "Paint flashing": "Layer borders" 会在合成层周围显示边框，"Paint flashing" 会在每次重绘时闪烁。 如果元素被提升到合成层，你会看到它的边框被高亮显示，或者在发生改变时闪烁。
4. 打开 "Layers" 面板: 在 DevTools 中，点击 "…" 按钮，选择 "More tools"，然后选择 "Layers"。 这个面板会显示页面中所有合成层的层级关系。

通过这些方法，你可以观察到 will-change 是否真的导致了合成层的创建。 如果没有创建合成层，你可以尝试使用 3D 变换来强制创建合成层，并比较两种方式的性能差异。

什么时候应该使用 will-change，什么时候应该使用 3D 变换？

• 优先考虑 will-change: 如果你只需要进行简单的 2D 变换或透明度改变，并且希望灵活控制性能优化，那么应该优先考虑 will-change。
• 需要硬件加速的 3D 场景: 如果你需要进行复杂的 3D 变换，并且希望利用硬件加速来提高性能，那么可以使用 3D 变换。
• 性能测试是关键: 无论你选择哪种方式，都应该使用浏览器开发者工具进行性能测试，验证你的选择是否真的提高了性能。

一些更具体的例子:

• 简单的 2D 动画: 例如，淡入淡出效果、简单的位移动画。 使用 will-change: opacity 或 will-change: transform。
• 滚动优化: 例如，在滚动时动态加载图片。 使用 will-change: scroll-position。
• 复杂的 3D 场景: 例如，3D 游戏、3D 模型展示。 使用 3D 变换。
• 需要高性能的交互: 例如，拖拽操作、缩放操作。 根据具体情况选择 will-change 或 3D 变换。

结论：理解差异，合理选择优化手段

will-change 和 3D 变换都可以创建 CSS 合成层，但它们的底层机制存在差异。will-change 是一种提示，浏览器可以根据提示进行优化，而 3D 变换通常会强制创建合成层。在选择优化手段时，应该充分理解这些差异，并根据具体场景进行选择。

记住，性能优化是一个迭代的过程，需要不断地进行测试和调整。 不要盲目地使用 will-change 或 3D 变换，而是应该根据实际情况，选择最合适的优化方案。

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