这道题是前端性能/渲染原理的高阶加分题，面试官问这个，就是看你懂不懂页面卡顿、动画优化、GPU加速的本质。

我给你整理成面试直接能说、逻辑清晰的版本：

合成层（Composite Layers）到底发生了什么？

一句话总结：
把页面分成多个独立图层，由 GPU 分别绘制、再合成为一帧，最终显示到屏幕。

1. 为什么要有「合成层」？

浏览器渲染有三个阶段：

1. 重排（Reflow）：布局改变 → 耗性能
2. 重绘（Repaint）：样式改变 → 较耗性能
3. 合成（Composite）：只移动位置、变形 → 极快

合成层的目的：
让某些元素单独提升到一个图层，只走合成，不触发重排/重绘。

2. 合成层做了什么？

1. 分层
   浏览器把页面拆成多个合成层（普通层、硬件加速层）。
   每个层独立交给 GPU 处理。

2. 光栅化（Rasterize）
   GPU 把每个图层变成位图。

3. 合成（Composite）
   GPU 将所有图层按顺序叠加、变换、透明度混合，
   一次性输出到屏幕。

3. 哪些情况会生成合成层？（高频考点）

• 使用 transform: translate/scale/rotate
• 使用 opacity
• will-change: transform/opacity
• video、canvas、webgl
• 3D 变换
• 有 CSS 动画（transform/opacity）
• 滚动条、插件等

4. 合成层的好处

• 不触发重排、重绘
• GPU 加速，动画丝滑
• 图层之间互不影响

5. 面试常坑：合成层不是越多越好

• 图层太多 → 内存暴涨
• 图层爆炸（layer explosion）→ 反而卡顿、闪退

所以面试官常问：
怎么正确优化动画？
标准答案：

• 只用 transform、opacity
• 配合 will-change 提前提升图层
• 不滥用硬件加速

极简面试口述版（30 秒）

合成层就是浏览器把页面拆成多个独立图层，交给 GPU 分别光栅化，最后按层级合成显示。
它只做位置、变形、透明度变化，不触发重排重绘，能实现高性能渲染。
但图层不能太多，否则会造成内存占用过高、页面卡顿。

需要我给你整理一套 「重排 → 重绘 → 合成」完整对比 + 高频面试题答案 吗？