浏览器图层合成（Composite & Layer）的优化原理

合成器（Compositor）工作原理：

• 浏览器将页面分层，每层由 GPU 独立绘制为位图
• 合成器将各层位图在 GPU 中合并（composite）为最终画面
• 层变换（transform/opacity）只操作合成层，无需重新布局和绘制

触发图层提升的属性：

1. transform: translateZ(0) / translate3d(0,0,0) · 主动提升为图层
2. will-change: transform / opacity 声明即将变化
3. <video> / <canvas> / <iframe> 标签自动提升
4. position: fixed / opacity < 1 的元素
5. filter 属性（模糊/对比度等）
6. backface-visibility: hidden

will-change 的正确用法：

/* 提前告知浏览器，让元素驻留在合成层 */
.animating-element {
  will-change: transform, opacity;
}

/* 动画完成后应移除（或使用 JS 设置/移除） */
.element {
  transition: transform 0.3s;
}

• 不要滥用（过多的层占用 GPU 内存）
• 只在即将变化时设置，变化后移除

GPU 加速动画：

/* ❌ 性能差：触发 Layout+Paint */
.box { animation: move 1s; }
@keyframes move {
  from { left: 0; }
  to { left: 100px; }
}

/* ✅ 性能优：只触发 Composite */
.box { animation: move 1s; }
@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

优化原则：优先使用 transform 和 opacity 做动画。过多图层会耗尽 GPU 内存（低端设备尤其）。