真正可靠的css升层手段只有：transform: translate3d(0,0,0)、opacity: 0.99（非初始值）、will-change: transform（动画前设，结束后立即移除）、filter: blur(0.1px)；禁用top/left等触发布局的属性。
能强制，但不能“无脑加”——加错位置、加错时机、加错数量，反而让动画更卡。
哪些 CSS 写法真能触发独立合成层
浏览器只对特定属性变化创建独立 GraphicsLayer，不是写了 transform 就自动上 GPU。真正可靠的升层手段只有几个：
-
transform: translate3d(0, 0, 0)—— 兼容性最好，Chrome / Safari / Edge 均稳定触发，比translateZ(0)更推荐（尤其 iOS Safari 对后者升层更保守） -
opacity: 0.99—— 必须是非初始值（如从1变为0.99），设成1或未声明则无效 -
will-change: transform—— 仅在动画启动前 1–2 帧设置，动画一停立刻移除（element.style.willChange = ''），否则长期占用 GPU 显存 -
filter: blur(0.1px)—— 比blur(0)更稳妥，零值滤镜部分浏览器会跳过升层
别碰这些： top/left、width/height、box-shadow 直接触发 layout，background-image 大图可能引发重绘，都不走合成路径。
JS 动画中哪些操作会悄悄破坏合成层
即使元素已成功分层，JS 仍可能在帧循环中把它拖回主线程。典型破坏行为：
- 读取布局信息：
element.offsetTop、element.getBoundingClientRect()、getComputedStyle(el).height—— 触发同步 layout，整帧卡住 - 修改非合成属性：
element.style.left = x + 'px'或el.classList.add('move-right')（若该 class 含left）—— 强制降级回 paint 阶段 - 动态增删子节点：
el.appendChild(span)—— 图层树可能重建，合成器丢帧 - 动画中改字体或边框：
el.style.fontSize = '16px'—— 触发重排重绘，连带同层其他元素
安全写法只有一条：element.style.transform = 'translateX(' + x + 'px)' 或 'translate3d(' + x + 'px, 0, 0)'，且确保该元素没被其他样式（比如 border、overflow: hidden）拉进共享图层。
怎么验证合成层真建成了、且没被反复销毁
别信控制台日志，用 Chrome DevTools 的 Layers 面板（More Tools → Layers）看真实状态：
- 动画进行时，目标元素是否稳定出现在独立图层列表中？图层尺寸是否固定（不随内容缩放/文字换行而变）？
- 滚动或触发其他 UI 变化时，该图层是否仍在？还是频繁出现又消失？—— 频繁重建说明有隐式 layout 干扰
- 图层右上角的「GPU memory」数值是否平稳？飙升或抖动意味着内存压力过大，可能需合并图层
- 真机录屏测帧率（iOS Safari / Android Chrome），桌面模拟器的帧率不准，尤其 iOS 对
will-change的处理和桌面完全不同
注意：chrome://gpu 页面里 Compositing 必须是 Hardware accelerated，否则所有升层策略都白搭——先查驱动、再查系统电源模式、最后看浏览器是否被 IDE 预览器以 --disable-gpu 启动。
大规模动画时，单个元素升层反而是陷阱
同时动画 50 个粒子？每个都加 translate3d(0,0,0)，GPU 显存暴涨、合成耗时翻倍，帧率反而崩。这时候得反着来：
- 把它们包进一个
<div class="particle-container">，只给容器加 <code>transform: translateZ(0)，所有粒子用相对定位或 CSS 变量控制偏移 - 对非关键元素（比如背景飘雪）加
contain: paint，限制浏览器重绘范围，避免它和主内容共享图层 - 移动端严格控图层数：Safari 对图层管理更激进，建议单页合成层数 ≤ 15；Chrome 桌面可放宽到 30，但超过就该考虑合并策略
- 动画结束后必须清理：
el.style.transform = ''+el.style.willChange = ''，否则图层常驻，后续滚动、交互都受影响
最易被忽略的一点：合成层不是越多越好，而是越“稳”越好——图层存在时间越长、更新越少、尺寸越固定，GPU 合成效率才越高。临时升层、频繁重建、尺寸抖动，比不升层还伤性能。
