4、硬件加速与合成层：什么是合成器、如何提升为合成层（will-change, transform, opacity）、层爆炸与层压缩
聊到动画性能，有个概念你肯定绕不开——硬件加速。很多人觉得它很玄乎，好像加了某个 CSS 属性就能让动画飞起来。其实没那么神秘。
说白了，浏览器渲染页面，默认是用 CPU 来画每一帧。但 CPU 要管的事情太多了，布局、事件、脚本……全挤在一个线程里。动画一复杂，帧率就往下掉。
硬件加速，就是把一部分绘制工作丢给 GPU 去做。GPU 擅长并行计算，处理像素和纹理合成比 CPU 快得多。但 GPU 不是万能的，它只认一种东西——合成层。
核心结论：只有被提升为独立合成层的元素，才能享受 GPU 硬件加速。否则，再好的显卡也帮不了你。
4.1 合成器是什么？
先说说合成器（Compositor）。它是浏览器渲染管线里的一个独立线程，专门负责把各个图层拼成最终画面。
渲染管线大致分五步：JavaScript → 样式计算 → 布局 → 绘制 → 合成。前四步都在主线程跑，只有合成这一步，是合成器线程独立完成的。
这意味着什么？如果你的动画只触发合成（比如改 transform 或 opacity），主线程根本不用动。合成器自己就能搞定每一帧。帧率自然就稳了。
我刚开始做性能优化时，总以为 GPU 加速是自动的。后来发现，浏览器默认只给 <video>、<canvas>、<iframe> 这类元素创建独立合成层。普通 <div> 想都别想。
所以，你得主动告诉浏览器：「这个元素，请给它一个独立图层。」
4.2 如何提升为合成层
把元素提升为合成层，有三种主流方式。我按推荐程度排个序：
| 方式 | 写法 | 推荐度 | 说明 |
|---|---|---|---|
| will-change | will-change: transform |
⭐⭐⭐⭐⭐ | 语义明确，提前告知浏览器，不产生额外副作用 |
| transform 3D | transform: translateZ(0) |
⭐⭐⭐⭐ | 经典 hack，兼容性好，但会改变层叠上下文 |
| opacity 动画 | 配合 @keyframes 或 transition |
⭐⭐⭐ | 只对 opacity 有效，且需要动画实际触发 |
will-change
我个人最推荐 will-change。它就像你对浏览器说：「嘿，这个元素马上要动起来了，提前给它准备好独立图层。」
/* 推荐用法：动画开始前设置，动画结束后移除 */
.element {
will-change: transform, opacity;
}
/* 或者只声明一个属性 */
.element {
will-change: transform;
}
小技巧：不要滥用 will-change。只在动画即将发生时设置，动画结束后用 JS 移除。否则浏览器会一直为这个元素保留合成层，白白浪费内存。
transform: translateZ(0)
这个 hack 我用了好多年。它的原理是触发 3D 变换，强制浏览器创建合成层。兼容性极好，从 Chrome 到 Safari 到内置浏览器都认。
/* 经典 hack */
.element {
transform: translateZ(0);
/* 或者 */
transform: translate3d(0, 0, 0);
}
注意：transform: translateZ(0) 会改变元素的层叠上下文。如果你有 z-index 相关的布局，可能会被意外打乱。我在一个后台管理系统里就踩过这个坑——一个弹窗突然被遮住了，查了半天才发现是 translateZ 搞的鬼。
opacity 动画
只改 opacity 也能触发合成层，但前提是它真的在动画。静态的 opacity: 0.5 不会创建合成层。
/* 这样写，opacity 动画会在合成层执行 */
.fade-in {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
4.3 层爆炸与层压缩
好，现在你知道怎么创建合成层了。但问题来了——层太多了怎么办？
我曾经接手过一个 H5 活动页，里面用了十几个 transform: translateZ(0)，每个元素都独立成层。结果在低端机上，页面滚动卡成 PPT。打开 DevTools 的 Layers 面板一看——好家伙，二十多个合成层。
这就是层爆炸。每个合成层都要占用 GPU 纹理内存，层数一多，内存带宽吃紧，反而比不用硬件加速还慢。
| 状态 | 层数 | 表现 | 原因 |
|---|---|---|---|
| 正常 | 1-5 层 | 流畅 | GPU 轻松处理 |
| 层膨胀 | 6-15 层 | 偶有掉帧 | 内存带宽开始吃紧 |
| 层爆炸 | 16+ 层 | 严重卡顿 | GPU 纹理内存溢出，触发回退到 CPU |
层压缩怎么做？
层压缩，就是把多个独立合成层合并成一个。核心思路就一句话：能不升层就不升，能合并就合并。
- 减少 will-change 滥用——只在动画元素上用，用完就移除。
- 避免嵌套升层——父元素升层了，子元素就别再升了。子元素会继承父层的合成层。
- 用 contain 属性——
contain: layout style paint可以限制元素的渲染范围，减少意外升层。 - 检查 z-index 和 position——
position: fixed和z-index在某些浏览器里也会触发升层，能少用就少用。
/* 层压缩示例：把多个升层元素合并到一个容器里 */
/* ❌ 错误：每个子元素都升层 */
.item1 { transform: translateZ(0); }
.item2 { transform: translateZ(0); }
.item3 { transform: translateZ(0); }
/* ✅ 正确：只在父容器升层，子元素继承 */
.container { transform: translateZ(0); }
.item1 { /* 不升层 */ }
.item2 { /* 不升层 */ }
.item3 { /* 不升层 */ }
经验之谈：我一般把层数控制在 5 层以内。超过 8 层，我就会打开 Chrome DevTools → More Tools → Layers 面板，逐个检查哪些层是多余的。你想想看，GPU 内存就那么大，省着点用总没错。
4.4 总结一下
- 合成器是独立线程，只负责图层合成，不阻塞主线程。
- 提升为合成层有三种方式：
will-change（推荐）、transform: translateZ(0)（兼容 hack）、opacity动画。 - 层爆炸是滥用合成层的后果，会导致 GPU 内存溢出，反而更卡。
- 层压缩的核心是减少不必要的升层，尽量让子元素继承父层的合成层。
嗯，这一节的内容就到这。记住一个原则：硬件加速是好东西，但别贪多。合理控制层数，比盲目堆叠 transform hack 重要得多。