合成层剪裁是浏览器渲染中缓解异步动画显存浪费的关键机制，它让GPU仅上传真正可见且参与合成的图层内容，避免为不可见区域分配冗余纹理内存。
“合成层剪裁”不是直接降低显存占用的技术，而是浏览器渲染管线中一个被长期误用、却能显著缓解异步动画引发的显存浪费的关键机制。它的核心作用是：**让浏览器只把真正可见、且参与合成的图层内容上传到GPU显存，避免为不可见区域或静态背景分配冗余纹理内存**。
为什么异步动画容易触发非必要显存分配
当使用 transform 或 opacity 做 CSS 动画（尤其是 requestAnimationFrame 驱动的 JS 动画）时，浏览器会为元素创建独立的合成层（compositing layer）。但若该层尺寸远大于可视区域（比如一个 2000×2000px 的 div 在 800×600 视口里仅显示左上角），默认行为是把整个图层像素都上传至 GPU 显存——哪怕 90% 区域永远不进入视口，也照常占着显存。
这种“全量上传 + 全量缓存”就是异步动画中典型的非必要显存开销来源。
用 clip-path 或 overflow + transform 实现有效剪裁
真正的“合成层剪裁”需结合视觉裁剪与图层边界控制，不能只靠视觉隐藏：
- 避免仅用 visibility: hidden 或 opacity: 0：这些不阻止图层创建，显存照占；
- 慎用 width/height 设为 0：可能破坏布局流，导致重排，反而触发更多图层重建；
-
推荐组合方案：
- 给动画容器设置 overflow: hidden，并确保其尺寸严格匹配实际可视内容区域；
- 对子元素使用 clip-path: inset(0)（等效于无裁剪），再配合 transform 动画时，浏览器更倾向复用已有裁剪上下文；
- 如需动态裁剪（例如滚动中只渲染当前屏），可用 clip-path: inset(top right bottom left) 实时更新，比重绘整个图层省显存；
配合 will-change 和层管理策略
单纯剪裁还不够，需配合图层生命周期控制：
- 只在动画开始前 1–2 帧设置 will-change: transform，动画结束立即移除，防止长期驻留合成层；
- 对多个并行动画元素，用 contain: paint 封装其父容器，限制浏览器的绘制影响范围，减少中间缓冲区数量；
- 用 Chrome DevTools → Rendering → “Layer Borders” 查看实际合成层尺寸，确认剪裁生效（理想状态：绿色边框紧贴内容，而非包裹整个原始盒模型）。
注意 WebGPU / Canvas 2D 的差异
上述方法适用于传统 CSS/HTML 渲染管线。若你用的是 Canvas 2D 的 requestAnimationFrame 动画或 WebGPU 渲染：
- Canvas 不自动做合成层剪裁，需手动调用 ctx.clearRect() 清空无效区域，并用 canvas.width/canvas.height 动态缩放画布尺寸匹配视口；
- WebGPU 中需在 render pass descriptor 里显式设置 viewports 和 scissorRects，否则驱动默认提交全帧缓冲，造成显存冗余。
