真正能触发 GPU 加速的 CSS 属性只有 transform（含 translate3d/scale/rotate）、opacity（0–1 之间）、filter（如 blur/drop-shadow）和 will-change（需配合实际变化属性）；其他如 width、left、background-color 等无法绕过 Layout/Paint，加 translateZ(0) 或 will-change 无效且可能引发 bug。
直接用 transform、opacity 或 filter 就能触发 GPU 加速，不需要额外“开启”——但前提是这些属性被浏览器识别为可合成（compositable），且元素已形成独立合成层。强行对非加速属性（比如 width、left、background-color）加 will-change 或 translateZ(0) 不会起效，反而可能引入 bug。
哪些 CSS 属性真正能触发 GPU 加速
只有少数属性在变更时能跳过 Layout 和 Paint，交由 GPU 合成线程处理：
-
transform（包括translate3d()、scale()、rotate()等，但translateZ(0)本身不改变视觉，仅用于诱导图层提升） -
opacity（必须是 0–1 之间的值；opacity: 0.999可以，opacity: 0有时会被优化掉图层） -
filter（如blur(2px)、contrast(1.2)；注意drop-shadow()是 filter 的一部分，也受支持） -
will-change（仅作为提示，必须配合后续实际变化的属性，例如will-change: transform+ 后续 JS 修改transform）
像 top、margin、height、box-shadow（非 filter 形式）、background-image 这些，无论加多少 translateZ(0) 都不会让它们“变 GPU 加速”。它们改的是布局或绘制阶段的数据，GPU 根本不参与。
为什么给元素加 transform: translateZ(0) 不等于“开启所有属性的 GPU 加速”
这个写法只是强制浏览器为该元素创建一个独立合成层（Compositing Layer），但它只影响后续在该层上发生的、可合成的属性变更。它不是魔法开关：
立即学习“前端免费学习笔记（深入）”；
- 加了
transform: translateZ(0)后，再改left，依然会触发布局（Reflow） - 加了之后改
opacity，才真正走 GPU 合成路径 - 如果元素本身已有
transform: translateY(10px)，再叠加translateZ(0)实际等价于transform: translateY(10px) translateZ(0)，无副作用；但若只写translateZ(0)而无其他动画，Chrome 可能延迟创建图层，直到第一次动画开始 - 移动端 Safari 对
translateZ(0)更敏感，有时比translate3d(0,0,0)更可靠
常见误用和真实代价
很多人以为“加个 will-change: transform 就万事大吉”，结果发现内存飙升、z-index 错乱、子元素定位失效：
-
will-change提前分配图层资源，但若元素长期静止，就是纯内存浪费（每个合成层约占用 0.5MB 显存） - 被提升的元素，其
position: absolute子元素若超出父容器边界，可能被裁剪（尤其在 iOS Safari 中） -
z-index只在同一个 stacking context 内有效；一旦父元素变成合成层，它和周围非合成层的 z-order 关系就不可预测（比如z-index: 999的合成层可能被z-index: 1的非合成层遮住） - 某些旧版 Intel 核显驱动在启用
backface-visibility: hidden+transform组合时会出现闪烁，这不是 CSS 写错了，是 GPU 固件 bug
验证是否真走 GPU 加速，而不是“看起来顺”
别信眼感，开 Chrome DevTools 看实锤：
- 打开 More Tools → Layers，动一动目标元素，观察是否出现绿色图层图标；图层尺寸和内存占用都可见
- 在 Rendering 面板勾选
Layer borders：橙色边框 = 合成层；灰色边框 = 主线程绘制 - 录制 Performance 面板中的动画帧：如果 Layout 和 Paint 阶段几乎消失，只有 Composite Layers 活跃，才算生效
- 禁用硬件加速测试（chrome://settings/system → 关闭“使用硬件加速模式”）：如果动画立刻卡顿，反向佐证之前确实是 GPU 在跑
真正难的不是“怎么写”，而是判断“该不该提前提升图层”——静态导航栏加 translateZ(0) 没意义，但轮播图卡片、拖拽中的弹窗、粒子动画容器，就必须提前规划合成层生命周期。显存和主线程调度之间，永远要算一笔账。
