Glittering's blog

Appearance

  • 👉 为什么 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 每一帧只做：

text
matrix * bitmap → screen

⚡ 极快

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

🚀 主动创建（你能控制） ​

css
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（部分场景）

❌ 不会创建合成层 ​

css
left / top
width / height
margin / padding
background
color

这些都会回到： 👉 Layout / Paint

五、DevTools 实战验证 ​

1️⃣ 打开 Layer Borders ​

DevTools → More Tools → Rendering
→ 勾选 Layer borders
  • 绿色边框：合成层

2️⃣ Demo 对比 ​

transform 动画（只 Composite） ​

css
.box {
  transition: transform 0.5s;
}

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

left 动画（全流程） ​

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

👉 每帧：

  • Layout
  • Paint
  • Composite

3️⃣ Performance 面板确认 ​

你会看到：

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

六、Composite Layer 的代价 ​

⚠️ 不是越多越好 ​

每个合成层： ​

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

滥用 will-change 的后果： ​

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

📌 原则：用完就撤

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

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

因为： ​

  • 不改变像素内容

  • 只是改变：

    • 位移矩阵
    • alpha 值

👉 位图复用

八、Composite Layer 与 Layout Thrashing 的关系 ​

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

📌 Composite 是最终性能逃生舱

九、框架视角 ​

React / Vue 为什么爱 transform？ ​

jsx
<div style={{ transform: `translateX(${x}px)` }} />
  • 不影响其他节点
  • 可中断 / 可恢复
  • 非阻塞渲染

👉 完美适配 Fiber / Scheduler

React Fiber 和 Composite 的契合点 ​

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

👉 CPU / GPU 各司其职

十、总结 ​

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

Copyright © 2026