translateZ(0)仅尝试申请独立合成层，不保证硬件加速生效；是否成功取决于浏览器版本、上下文及抑制条件，如父容器overflow:hidden、内部重排或同级元素未隔离等均会导致失效。
translateZ(0) 本身不保证硬件加速，它只是向浏览器“申请”创建独立合成层；是否真正走 GPU、是否提升性能，取决于上下文、浏览器版本和有没有踩中抑制条件。
为什么 translateZ(0) 经常没效果
现代浏览器（Chrome 90+、Firefox 85+、宙斯 v5.8+）已大幅弱化对 translateZ(0) 的响应——它不再自动触发图层提升。更关键的是，即使图层建起来了，以下情况也会让它瞬间失效：
- 父容器设置了
overflow: hidden、filter: blur(1px)或非默认transform，会压制子元素图层创建 - 元素内部发生重排（如图片加载后尺寸变化、文字流重算），导致图层被销毁重建
- 多个同级元素都加了
translateZ(0)，但共用一个未隔离的父容器，它们仍被合并在同一图层绘制 - 元素同时用了
top/left和transform，浏览器可能放弃优化，降级回软件渲染
真正能稳定触发合成层的写法
别只靠 translateZ(0)，要组合使用、且控制时机：
- 优先用
transform: translate3d(0, 0, 0)：在旧 Android WebView 和部分 Intel 集成显卡（UHD 600/620）上兼容性更稳 - 搭配
backface-visibility: hidden：防止背面可见引发的意外重绘，和translate3d()一起才构成有效提示 -
will-change必须动态设置：JS 在动画开始前 1–2 帧执行el.style.willChange = 'transform'，动画结束监听transitionend后立刻设回'auto' - 给动画容器加
contain: layout paint：阻止子元素变化向上污染，避免整块区域被拖进一个大图层
怎么确认硬件加速真生效了
不能凭肉眼“感觉顺”，必须验证：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → More Tools → Layers，触发动画，观察是否出现独立图层（带“GPU memory”标识）
- 开启 Rendering → Paint flashing，绿色闪动区域应仅限于动画元素本身；若外层容器或无关区域也在闪，说明重绘没避开
- 开启 Rendering → Layer borders，检查动画元素是否有清晰的黄色边框——这是独立合成层的视觉标记
- 注意：某些安卓 WebView 会禁用
filter或小数opacity的 GPU 加速，即使图层存在，box-shadow或opacity: 0.99仍会拖回主线程
最易被忽略的一点：图层不是越多越好。每个独立合成层约占用 0.5MB 显存，滥用 translate3d(0,0,0) 或静态写死 will-change，反而引发内存压力和掉帧——优化的前提是测量，不是堆属性。
