**Composite Layer（合成层）**理解透了，你就真正知道：

• 👉 为什么 transform / opacity 快
• 👉 为什么 GPU 能救动画性能
• 👉 为什么滥用 will-change 会翻车

---

一、一句话理解 Composite Layer

• 浏览器把页面拆成多个图层，每个图层单独绘制，
• 最后交给 GPU 只做“位移 / 透明度 / 变换”的合成。

核心点：

• 图层 只 Paint 一次
• 后续只走 Composite
• 不再 Layout / Paint

---

二、为什么要有 Composite Layer？

❌ 传统流程的问题

JS → Layout → Paint → Composite

动画每一帧都：

• 重新计算布局
• 重新绘制像素

👉 CPU 爆炸，FPS 掉到 20+

---

✅ 引入合成层后的流程

首次：
Layout → Paint（生成位图）

动画中：
Composite（GPU 位移）

👉 只在 GPU 做矩阵运算

---

三、浏览器内部视角（非常关键）

每个 Composite Layer 本质是：

• 一张 位图（Rasterized Bitmap）

• 有自己的：

  • 位移矩阵
  • 透明度
  • Z 顺序

GPU 每一帧只做：

matrix * bitmap → screen

⚡ 极快

---

四、哪些情况会创建 Composite Layer？（必背）

🚀 主动创建（你能控制）

transform: translateZ(0);
transform: translate3d(0,0,0);
opacity < 1;
will-change: transform;

---

🌈 浏览器自动创建

• position: fixed
• video / canvas / iframe
• CSS 3D transform
• 有动画的 transform / opacity
• overflow: scroll（部分场景）

---

❌ 不会创建合成层

left / top
width / height
margin / padding
background
color

这些都会回到： 👉 Layout / Paint

---

五、DevTools 实战验证（必须做）

1️⃣ 打开 Layer Borders

DevTools → More Tools → Rendering
→ 勾选 Layer borders

• 绿色边框：合成层

---

2️⃣ Demo 对比

transform 动画（只 Composite）

.box {
  transition: transform 0.5s;
}

👉 只有边框在动 👉 没有 Paint 闪烁

---

left 动画（全流程）

.box {
  transition: left 0.5s;
  position: relative;
}

👉 每帧：

• Layout
• Paint
• Composite

---

3️⃣ Performance 面板确认

你会看到：

• transform：🟦 Composite
• left：🟪 Layout + 🟩 Paint

---

六、Composite Layer 的代价（很多人不知道）

⚠️ 不是越多越好

每个合成层：

• 占用 GPU 显存
• 增加合成成本

滥用 will-change 的后果：

• 显存暴涨
• 页面反而变慢
• 移动端更明显

📌 原则：用完就撤

.box {
  will-change: transform;
}
.box.done {
  will-change: auto;
}

---

七、为什么 opacity / transform 可以“跳过 Paint”？

因为：

• 不改变像素内容

• 只是改变：

  • 位移矩阵
  • alpha 值

👉 位图复用

---

八、Composite Layer 与 Layout Thrashing 的关系

问题	解决方案
频繁 Layout	transform
频繁 Paint	合成层
动画卡顿	GPU 合成

📌 Composite 是最终性能逃生舱

---

九、框架视角（你这个阶段必须懂）

React / Vue 为什么爱 transform？

<div style={{ transform: `translateX(${x}px)` }} />

• 不影响其他节点
• 可中断 / 可恢复
• 非阻塞渲染

👉 完美适配 Fiber / Scheduler

---

React Fiber 和 Composite 的契合点

• Fiber：切分 JS
• Composite：切分渲染

👉 CPU / GPU 各司其职

---

十、面试终极总结（直接用）

• Composite Layer 是浏览器为提升渲染性能引入的图层机制，
• 页面会被拆分成多个独立位图图层，
• 动画过程中如果只改变 transform 或 opacity，
• 浏览器可以跳过 Layout 和 Paint，
• 直接由 GPU 进行合成，从而获得更高帧率。
• 但合成层并非越多越好，过多会带来显存和合成开销。

---

十一、你现在的下一步（强烈推荐）

基于你已经学到：

• Layout Thrashing
• Composite Layer
• DevTools 分析

🔥 我建议你继续其中一个：

1️⃣ 为什么 React 动画库都基于 transform + rAF 2️⃣ 浏览器合成层 vs React Fiber 的调度对比 3️⃣ 真实项目：如何定位“合成层过多”问题 4️⃣ 实现一个“合成层友好”的动画调度器

你选哪个？我直接带你做。