面试题：什么是合成层（Compositing Layer）？
一、先理解浏览器渲染流程
浏览器渲染页面，大致流程：
HTML
↓
DOM Tree
CSS
↓
CSSOM
DOM + CSSOM
↓
Render Tree（渲染树）
Layout（回流 / 重排）
↓
Paint（重绘）
↓
Composite（合成）
二、什么是“合成”？
浏览器最后不会直接把所有内容一次性画到屏幕。
而是：
👉 把页面拆成多个图层（Layer）
类似：
Photoshop 图层
然后：
👉 GPU 把这些图层组合（Composite）到一起
最终显示。
这个过程：
👉 就叫合成（Compositing）
三、什么是合成层？
合成层 = 单独交给 GPU 处理的图层
普通元素：
在主线程绘制
合成层：
单独图层
↓
GPU 加速
四、为什么需要合成层？
因为：
👉 避免频繁重绘整个页面
例如：
你有一个弹窗：
position: fixed
如果它移动：
如果没有独立图层：
整个页面重新绘制
性能很差。
如果它是合成层：
只移动自己的图层
GPU 直接：
translate
不需要重新 Paint。
性能非常高。
五、合成层最大的特点
👉 不触发 Paint
通常：
transform
opacity
只会：
✅ Composite（合成）
不会：
- Layout
- Paint
所以非常快。
六、经典性能优化
❌ 使用 left/top
.box {
position: absolute;
left: 100px;
}
可能触发：
Layout
→ Paint
→ Composite
✅ 使用 transform
.box {
transform: translateX(100px);
}
通常只触发：
Composite
性能更好。
七、哪些属性容易触发合成层？
常见：
| 属性 | 说明 |
|---|---|
| transform | 最经典 |
| opacity | 透明度 |
| filter | 滤镜 |
| will-change | 提前告诉浏览器 |
| position: fixed | 固定定位 |
| video/canvas | 视频画布 |
| 3D transform | translate3d |
八、最经典面试题
为什么 transform 动画比 left/top 更流畅？
标准答案：
因为 transform 通常只会触发 Composite（合成），不会触发 Layout 和 Paint。
浏览器会把元素提升为合成层，由 GPU 进行位移计算，因此性能更高。
九、will-change 是什么？
.box {
will-change: transform;
}
意思：
👉 “这个元素马上要变了”
浏览器会提前：
创建合成层
减少动画卡顿。
十、为什么不要滥用合成层？
很多人以为：
❌ 合成层越多越好
实际上：
❌ 错
因为：
每个合成层都需要：
- GPU 内存
- 纹理上传
- 图层管理
过多会：
GPU 内存爆炸
导致：
- 页面卡顿
- 掉帧
- 发热
- 耗电
十一、经典错误优化
❌ 滥用 translateZ(0)
以前很多人：
transform: translateZ(0);
强制 GPU 加速。
问题：
可能创建大量合成层。
现代浏览器已经很智能。
不建议乱用。
十二、浏览器中的层（重要）
浏览器有很多层：
| 层 | 作用 |
|---|---|
| Render Layer | 渲染层 |
| Paint Layer | 绘制层 |
| Compositing Layer | 合成层 |
面试一般说：
👉 合成层即可
不用讲太底层。
十三、合成层和 GPU 的关系
很多人误解：
❌ GPU = 不重绘
错。
GPU 只是：
👉 帮你更快完成图层合成
不是完全不渲染。
十四、如何查看合成层？
Chrome DevTools：
F12
→ More tools
→ Layers
或者：
Rendering
→ Paint flashing
可以看到：
- 哪些区域重绘
- 哪些是独立图层
十五、真实项目中的应用
1. 动画
transform
opacity
2. 固定导航栏
position: fixed
3. 抽屉动画
transform: translateX()
4. React/Vue 动画组件
底层几乎都优先：
transform + opacity
因为性能最好。
十六、面试标准答案（推荐背）
合成层是浏览器渲染中的独立图层，会交给 GPU 进行合成处理。
某些属性如 transform、opacity 不会触发重绘，而是只进行 Composite，因此性能更高。
浏览器会将这些元素提升为合成层，从而减少 Layout 和 Paint 的开销。
合成层适合动画优化，但不能滥用，因为会增加 GPU 内存消耗。
