术语：合成层
领域：#前端/渲染性能
定义
合成层（Composite Layer）是浏览器为特定元素创建的独立渲染层，拥有自己的位图缓冲区，与主文档层独立进行合成和渲染。
主文档层 + 合成层A + 合成层B → GPU 合成 → 最终画面触发条件
元素满足以下任一条件时，浏览器会创建独立合成层：
| 条件 | 示例 |
|---|---|
| 3D transforms | transform: translate3d() |
| CSS 动画 | animation on transform/opacity |
| will-change | will-change: transform |
| position: fixed | 视口固定定位 |
| 视频/canvas | <video>、<canvas> |
| CSS 滤镜 | filter、backdrop-filter |
工作原理
- 分层：浏览器根据规则将元素分配到不同层
- 独立绘制：每层独立绘制到位图（位图在 GPU 内存中）
- GPU 合成：GPU 将所有层按 z-order 合成输出
┌─────────────────────┐
│ Layer A │ ← 主文档层 │
├─────────────────────┤
│ Layer B │ ← 合成层 (transform 动画)│
├─────────────────────┤
│ Layer C │ ← 合成层 (will-change) │
└─────────────────────┘
↓
GPU 合成
↓
最终画面性能优势
| 维度 | 无合成层 | 有合成层 |
|---|---|---|
| 动画 | 触发重排/重绘 | 仅触发合成 |
| 主线程 | 被渲染阻塞 | 与动画并行 |
| 帧率 | 可能掉帧 | 平滑 60fps |
与 will-change 的关系
will-change是触发合成层创建的提示- 合成层是
will-change的实现结果 - 并非所有合成层都需要
will-change（浏览器自动识别）
常见坑点
- ⛔ 层爆炸：过多合成层消耗大量 GPU 内存（移动端尤其严重）
- ⛔ 内存占用：每个合成层的位图可能占用数 MB 内存
- ⛔ 调试困难：合成层边界不易观察
优化建议
- 谨慎使用
will-change：仅对真正需要动画的元素使用 - 动画属性选择：优先使用
transform和opacity - 避免层嵌套：过深的层叠上下文导致内存浪费
- 使用 DevTools 调试：Chrome DevTools Layers 面板查看层信息
知识网络
- 父级概念：回流与重绘 — 渲染性能基础
- 相关概念：
- will-change — 触发合成层的 CSS 属性
- transform — 最适合合成层的动画属性
- 回流和重绘 — 理解合成层价值的基础
- 关联笔记：
- SOP-实现磁吸式光标 — 实践合成层优化