关键在于让浏览器将动画交给GPU处理，需主动触发合成层；仅使用transform、opacity等可加速属性，避免top/left等触发布局的属性，并用translateZ(0)或will-change声明提升图层，通过DevTools验证效果，同时警惕显存占用与兼容性问题。
关键不是“让GPU干活”，而是“让浏览器把动画交给GPU干”——这需要你主动触发合成层（Compositing Layer），否则所有动画都在CPU上硬扛，60fps秒变20fps。
只用能被GPU加速的属性
浏览器只对少数几个CSS属性开启硬件加速，改其他属性照样卡：
- transform：包括 translateX/Y/Z、rotate、scale、skew。它不改变文档流，不触发布局（Layout）和绘制（Paint），只在合成阶段做矩阵运算
- opacity：透明度变化完全由GPU混合图层完成，零布局开销
- filter（部分）：如 blur、brightness、contrast，在支持的浏览器中可加速；但慎用高斯模糊，它会显著增加GPU纹理内存占用
- 避免用 top/left/width/height/margin 等——它们一动就强制 Layout + Paint，直接拖垮主线程
确保元素被提升为独立合成层
光用 transform 不等于自动加速。浏览器要判断“值不值得单独拎出来”。常见触发方式：
- transform: translateZ(0) 或 translate3d(0, 0, 0)：最常用、兼容性好，本质是“骗”浏览器：这是个3D变换，给它单独分层
- will-change: transform：提前声明“这个元素马上要动了”，让浏览器预分配图层资源（注意：别滥用，动画结束建议 remove 或设为 auto）
- opacity: 0.99：比 opacity: 1 更容易触发分层（但语义不合理时慎用）
- position: fixed 或 video 元素：天然拥有独立图层
验证是否真走GPU，别靠猜
打开 Chrome DevTools → ⚙️ Settings → More Tools → Rendering → 勾选 Layer Borders：
立即学习“前端免费学习笔记（深入）”；
- 看到橙色边框？说明该元素已进入合成层，GPU正在处理
- 没边框？说明还在主线程里 Paint，再好看的动画也白搭
- 再进 Performance 面板录制动画帧：如果 Timeline 中 Layout 和 Paint 阶段几乎消失，只剩 Composite Layers，就是成功了
小心副作用，别为加速反拖垮
GPU加速不是万能膏药：
- 每个合成层都占显存，过多图层会导致内存飙升、页面卡死（可用 Layers 面板查看总层数和纹理大小）
- 启用后，z-index 行为可能异常：被加速的元素和未加速元素之间的层级比较会失效
- 某些旧显卡或集成显卡可能出现渲染错位、闪烁（尤其配合 position: absolute 子元素时）
- 移动端耗电明显上升，长期动画需权衡体验与续航
