Q6
★ ★ ★ ★ ★
什么情况会出现浏览器分层？
⚡ 速记答案（30 秒）
GPU 合成层可提高动画和绘制性能。触发条件：transform、opacity、will-change、position: fixed、video、canvas 等。好处是独立合成减少重绘，坏处是层数太多会增加内存占用和合成开销。
📖 详细讲解
标准面试回答（推荐记住）
浏览器分层是指把某些元素提升到单独的 GPU 合成层，这样这些元素的动画和变化就不会影响其他层，从而提高性能。常见触发条件有：使用 transform、opacity 属性做动画、设置 will-change、position: fixed、video 和 canvas 元素等。好处是动画更流畅、减少重绘；坏处是层数太多会增加内存占用和合成开销，所以不能滥用 will-change。
常见触发条件
transform属性（translate/rotate/scale）opacity小于 1will-change属性position: fixed<video>、<canvas>、<iframe>- 3D 变换
translate3d()
利弊权衡
| 优点 | 缺点 |
|---|---|
| 动画流畅 | 内存占用增加 |
| 减少重绘 | 合成开销 |
| GPU 加速 | 层数过多性能下降 |
✅ 面试要点
- •理解 GPU 合成层的作用
- •知道常见触发条件
- •避免滥用导致性能问题
💻 代码示例
合理使用 will-change
/* ✅ 正确：hover 时添加 */
.button:hover {
will-change: transform;
}
.button:active {
transform: scale(0.98);
}
/* ❌ 错误：全局滥用 */
* {
will-change: transform, opacity;
}