在上一节中我们提到，重排和重绘的代价高昂，而浏览器有一种更高效的渲染方式——合成。理解合成层的工作原理，是进阶优化页面性能的关键一步。
为什么需要合成层
浏览器渲染页面时，并不是把整个页面当作一张图来处理。现代浏览器会将页面拆分为多个图层（Layer），就像 Photoshop 里的多个图层叠在一起，每个图层可以独立绘制、独立移动，最后再合成为最终的画面。
这种分层策略的最大好处是：当某个图层发生变化时，只需要重绘该图层，其他图层保持不变，最后重新合成即可。这完全跳过了重排和主线程的绘制阶段，极大提升了渲染性能。
什么情况下会创建独立的合成层
浏览器并不会随意创建图层，否则内存开销会失控。以下情况会触发独立的合成层（通常也称为“提升到合成层”）：
- 根元素（document 本身）
- 3D 或透视变换：
transform: translateZ(0)、transform: translate3d(0,0,0) - 使用 CSS 动画和过渡的
transform和opacity：例如animation或transition作用于这两个属性 <video>、<canvas>、<iframe>元素will-change属性：显式声明元素即将发生变化，浏览器会提前将其提升为独立图层position: fixed或position: sticky：在特定条件下也会创建新图层- 元素有
opacity小于 1 且存在层叠上下文的情况（需结合具体浏览器实现） filter等 CSS 滤镜：也会触发合成层
需要注意的是，这些规则并非绝对，浏览器厂商会出于性能或内存考虑，动态地合并或拆分图层。但了解这些触发条件，可以帮助我们有意识地利用合成层来优化动画性能。
GPU 加速的本质
所谓 GPU 加速，本质就是将合成层的绘制和合成工作交给 GPU 而非 CPU 来完成。
GPU（图形处理器）的设计初衷就是处理大量的像素级操作和矩阵变换，对于图形的移动、缩放、旋转、透明度渐变等任务，GPU 的效率远高于 CPU。当浏览器将一个元素提升为合成层后，该层的位图会被上传到 GPU 显存中，后续该层的 transform 和 opacity 变化都直接在 GPU 中完成，不会引发重排或重绘，也不会占用主线程时间。
这就是为什么使用 transform 和 opacity 做动画如此顺滑的原因——它们都是合成属性，变化时只触发合成阶段，完全跳过重排和重绘。
常见误区与“层爆炸”
“既然 GPU 加速这么好，那我把所有元素都提升为合成层不就行了？”——这是一种危险的想法。
每一层合成层都需要在 GPU 显存中独立存储一份位图，如果图层过多，会吃掉大量内存，尤其在移动端，可能导致页面崩溃或严重卡顿。这种现象被称为层爆炸。
常见的错误操作包括：
- 无脑给所有元素加上
translateZ(0)或will-change: transform - 在大量列表项上使用
transform动画，但每一项都被提升为单独的图层 - 动态生成的元素忘记移除
will-change，导致图层持续占用内存
正确的做法是：只在需要高性能动画的元素上，且仅在动画开始前创建图层，动画结束后移除图层。例如：
.animate-item {
will-change: transform;
transition: transform 0.3s;
}
.animate-item:hover {
transform: scale(1.1);
}
/* 动画结束后移除 will-change，避免长期占用显存 */
.animate-item.animation-done {
will-change: auto;
}如何在开发者工具中查看图层
Chrome DevTools 提供了直观的图层分析工具：
- 打开 DevTools，按
Cmd/Ctrl + Shift + P打开命令面板。 - 输入 “Show Layers”，选择 Layers 面板。
- 在这里你可以看到页面的每一个合成层，选中一个元素就能查看它所在的图层、内存占用以及合成原因。
- 也可以在 Rendering 面板中勾选 Layer borders，页面中会以橙色边框标识出所有合成层，帮助快速定位。
实际应用：高性能动画的两个选择
在实现 Web 动画时，应尽量将动画属性限制在 transform 和 opacity 中，因为它们只触发合成，性能最佳。尽量避免在动画中修改 width、height、left、top、margin 等布局相关属性，因为它们会触发重排。
如果需要做更复杂的动画，也可以考虑将元素提升为合成层，配合 requestAnimationFrame 来手动更新 transform。这比依赖 setInterval 或 setTimeout 要平滑得多，因为 requestAnimationFrame 会在浏览器下一帧渲染前执行，与显示器刷新率同步。
小结
合成层和 GPU 加速是浏览器渲染中最精妙的优化机制之一。合理利用它，可以让页面动画如丝般顺滑；滥用则会让内存飙升，得不偿失。掌握触发条件、监控工具和最佳实践，你就能在性能优化中游刃有余地驾驭这项技术。