合成层动画
合成层动画：优先使用 transform、opacity 属性，利用 GPU 合成层避免重排重绘。
#type / concept
#status / evergreen
#tech / dev / frontend
[!info] related notes
- 所属 MOC: 前端性能优化 MOC
- 前置概念: browser-rendering-process
- 并列概念: long-task-optimization
合成层动画
一句话定义
合成层动画是优先使用 transform 和 opacity 属性，利用 GPU 合成层实现流畅动画，避免触发布局和重绘的优化技术。
核心内容
浏览器渲染流水线
- 解析 HTML → DOM
- 解析 CSS → CSSOM
- 合成 Render Tree
- Layout（布局）
- Paint（绘制）
- Composite（合成）
性能成本排序
重排（Layout） > 重绘（Paint） > 合成（Composite）
推荐的动画属性
| 属性 | 触发阶段 | 性能 |
|---|---|---|
| transform | 合成 | 最优 |
| opacity | 合成 | 最优 |
不推荐的动画属性
| 属性 | 触发阶段 | 性能 |
|---|---|---|
| width/height | 布局 | 差 |
| top/left | 布局 | 差 |
| margin | 布局 | 差 |
常见做法
/* 推荐：使用 transform */
.box {
transform: translateX(100px);
}
/* 不推荐：使用 top/left */
.box {
left: 100px;
}边界与易混淆点
为什么要用 transform 而不是 top/left
- top/left 改变会触发 Layout（重排）
- transform 改变只触发 Composite（合成）
- 重排成本 >> 合成成本