一、什么是合成层
合成层是浏览器渲染过程中的一个概念。当页面元素被提升到独立的合成层时，该元素的绘制不需要与其他元素共享同一个位图，而是由 GPU 单独处理。这使得元素的变换（transform、opacity）动画不需要触发 Layout 和 Paint，大幅提升性能。
渲染流水线
1
2
3
| JavaScript → Style → Layout → Paint → Composite
↑
合成层在此阶段由 GPU 处理
|
普通元素在 Paint 阶段生成位图后，与整个页面一起提交给 GPU 合成。而合成层元素的变换（位移、旋转、缩放、透明度）直接在 GPU 上操作，无需重复执行 Style/Layout/Paint。
二、哪些元素会提升为合成层
浏览器自动将以下元素提升到独立合成层：
1
2
3
4
5
6
7
8
| ├── 有 3D transform（translate3d、translateZ、rotate3d 等）
├── 有 will-change 属性（transform、opacity 等）
├── 有 opacity 动画或 transition
├── 有 position: fixed
├── 有 video / canvas / iframe 元素
├── 有 CSS filter 动画
├── 有重叠的合成层兄弟元素（隐式合成）
└── 元素本身是硬件加速的（如 WebGL canvas）
|
1
2
3
4
5
6
|
.element {
transform: translateZ(0);
will-change: transform;
}
|
三、合成层的优势与代价
优势
1
2
3
4
5
6
7
8
9
10
11
| 动画流畅：
transform 和 opacity 动画仅触发 Composite，不触发 Layout 和 Paint
→ 60fps 平滑动画
独立渲染：
合成层的变化不影响其他层
→ 减少重绘区域
GPU 加速：
位图操作由 GPU 处理，释放主线程
→ 适合高频动画
|
代价
1
2
3
4
5
6
7
8
9
10
11
| 内存占用：
每个合成层需要独立的 GPU 内存位图
→ 过多合成层会导致内存暴增
层创建开销：
首次创建合成层需要额外的纹理上传
→ 移动端低端设备上开销明显
隐式合成（Layer Explosion）：
一个合成层的覆盖区域会迫使兄弟元素也提升为合成层
→ 导致大量非预期的合成层
|
四、隐式合成（Layer Explosion）
隐式合成是最常见的性能陷阱。当一个元素被提升为合成层后，其 z 轴覆盖区域内的兄弟元素也会被强制提升为合成层，即使它们不需要。
1
2
3
4
5
6
7
8
| <div class="container">
<div class="card" style="transform: translateZ(0)">卡片 1</div>
<div class="card">卡片 2（隐式合成层）</div>
<div class="card">卡片 3（隐式合成层）</div>
<div class="card">卡片 4（隐式合成层）</div>
</div>
|
如何避免：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.element.animated {
will-change: transform;
}
.element.animated.done {
will-change: auto;
}
|
五、will-change——正确的使用方式
will-change 是标准的方式告知浏览器某个元素将要变化，让浏览器提前优化。
使用原则
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
el.addEventListener('mouseenter', () => {
el.style.willChange = 'transform';
});
el.addEventListener('animationend', () => {
el.style.willChange = 'auto';
});
* { will-change: transform; }
.animated-card {
will-change: transform, opacity;
}
|
取值
| 值 | 含义 |
|---|
auto | 浏览器自行决定优化策略 |
scroll-position | 元素将要滚动，浏览器扩展渲染内容区域 |
content | 元素内容将变化，减少缓存 |
<custom-ident> | 将要变化的 CSS 属性，如 transform, opacity |
六、调试合成层
1
2
3
4
5
6
7
| 1. 打开 DevTools → 三点菜单 → More tools → Layers
2. 或 DevTools → Rendering → Layer borders
View all composited layers
├── 蓝色边框 → 合成层
├── 橙色边框 → 纹理（tile）
└── 绿色边框 → 已绘制的区域
|
1
2
3
4
5
6
7
8
| 1. 录制 Performance
2. 查看 Layers 面板 → 确认合成层数量
3. 查看 Paint 事件 → 是否频繁触发 Paint（合成层应减少 Paint）
优化目标：
├── 合成层数量控制在 50 以内
├── 避免隐式合成导致的层爆炸
└── Paint 面积越小越好
|
只有 transform 和 opacity 的动画能仅触发 Composite。其他属性（width、height、left、top、margin、padding、border-radius 等）都会触发 Layout 或 Paint。
1
2
3
4
5
6
7
8
9
10
11
|
@keyframes bad-animation {
from { left: 0; }
to { left: 100px; }
}
@keyframes good-animation {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
|
触发渲染的 CSS 属性分类：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| 仅触发 Composite（性能最佳）：
transform（translate/rotate/scale/skew）
opacity
触发 Paint + Composite（性能中等）：
color
background-color
box-shadow
border-color
outline-color
触发 Layout + Paint + Composite（性能最差）：
width, height
padding, margin
border（width）
left, top, right, bottom
font-size, font-weight
text-align
overflow
display
float
position
|
八、常见问题
Q1: translateZ(0) 这种 hack 还有必要吗
在支持 will-change 的现代浏览器中，推荐用 will-change 代替 translateZ(0) hack。但 translateZ(0) 兼容性更好（更早的浏览器支持），可根据项目兼容需求选择。
Q2: 合成层越多越好吗
不是。每个合成层都需要独立的 GPU 内存。在移动端，GPU 内存有限（通常 256MB-1GB），过多的合成层会导致：
- 内存耗尽导致 tab 崩溃
- GPU 渲染命令过多导致卡顿
- 纹理上传耗时
建议控制合成层数量在 50 个以内。
Q3: 如何检测是否有层爆炸
1
2
3
| Chrome DevTools → Layers 面板
检查层数量是否超过预期（例如 1000 个列表项 × 每个都是合成层）
解决方案：移除父元素之外的 will-change，或用 contain 属性限制
|
九、推荐学习路径
- 理解浏览器渲染流水线（Style → Layout → Paint → Composite）
- 掌握合成层的触发条件和 Chrome Layers 面板
- 优先使用
transform 和 opacity 做动画 - 用
will-change 替代 translateZ(0) hack - 使用 DevTools 排查隐式合成导致的层爆炸