4. CSS动画与硬件加速：用transform和opacity触发GPU合成层

做前端动画，最怕什么？

我个人最怕的就是——明明只是想让一个方块动起来，结果整个页面跟着卡。CPU 飙到 80%，帧率掉到 20fps，用户滑动页面像在放幻灯片。

为什么会这样？说白了，大部分动画都在触发浏览器的重排（reflow）和重绘（repaint）。而这两个操作，是性能杀手。

4.1 重排与重绘：动画卡顿的根源

先简单回顾一下浏览器渲染流程：

1. JavaScript：修改 DOM 或样式
2. Style：计算最终样式
3. Layout：计算元素位置和尺寸（重排）
4. Paint：绘制像素（重绘）
5. Composite：合成图层

你想想看，如果你用 left、top、width、height 这些属性做动画，浏览器每次都要重新走一遍 Layout → Paint → Composite。这就是重排。哪怕只是改个 background-color，虽然跳过了 Layout，但 Paint 那一步还是跑不掉。

我在项目中遇到过这样一个案例：一个侧边栏展开动画，用了 width 从 0 到 300px。结果每次展开，整个页面都跟着抖动。后来改成 transform: translateX，瞬间丝滑。差别就这么大。

4.2 硬件加速与合成层

那怎么绕过重排重绘？答案是：让浏览器把动画元素单独拎出来，放到一个独立的合成层上。

合成层是什么？你可以把它想象成一张透明的胶片。浏览器把页面拆成多层胶片，每层独立绘制，最后叠在一起。如果某一层的内容变了，只需要重绘那一层，然后重新合成。其他层不用动。

更关键的是，合成操作是由 GPU 完成的。GPU 擅长并行处理，合成几百层对它来说小菜一碟。这就是硬件加速的本质。

嗯，这里要注意：不是所有属性都能触发合成层。比如 left、top 就不行。所以做动画时，优先用 transform 和 opacity。

4.3 transform 和 opacity 的正确用法

我习惯把动画属性分成三类，方便记忆：

类别	属性示例	触发阶段	性能
❌ 重排触发	left, top, width, height, margin, padding	Layout → Paint → Composite	极差
⚠️ 重绘触发	background-color, color, box-shadow	Paint → Composite	一般
✅ 仅合成触发	transform, opacity	Composite 仅合成	最佳

举个例子，你想让一个卡片从左侧滑入：

/* ❌ 错误做法：触发重排 */
.card {
  position: absolute;
  left: -300px;
  transition: left 0.3s ease;
}
.card.active {
  left: 0;
}

/* ✅ 正确做法：仅触发合成 */
.card {
  transform: translateX(-300px);
  transition: transform 0.3s ease;
}
.card.active {
  transform: translateX(0);
}

效果完全一样，但性能天差地别。前者每帧都要重新计算布局，后者只做合成。

再比如淡入淡出：

/* ✅ 推荐：使用 opacity */
.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fade-in.visible {
  opacity: 1;
}

我曾经见过有人用 visibility 加 height 来做淡入效果，结果页面疯狂重排。其实 opacity 就够了，简单又高效。

4.4 will-change：提前告诉浏览器

有时候浏览器不会自动把元素提升到合成层。你可以用 will-change 主动提示：

.card {
  will-change: transform, opacity;
}

这样浏览器会提前为这个元素创建合成层，动画开始时就不用临时创建了。

4.5 合成层过多的问题

说到内存，我得提一个坑。我曾经在一个项目中，给所有列表项都加了 transform: translateZ(0) 来强制开启硬件加速。结果页面在低端手机上直接崩溃。

为什么？因为每个合成层都是一块独立的纹理，存在 GPU 显存里。层数一多，显存吃紧，GPU 反而变慢。

所以，硬件加速不是万能的。合理使用才是关键。

4.6 知识体系图

下面这张图总结了本章的核心逻辑：

4.7 实战建议

最后，我总结几条实战中摸出来的经验：

• 能用 transform 就别用 left/top：位移用 translate，缩放用 scale，旋转用 rotate。这些都不触发重排。
• 透明度动画只用 opacity：别用 visibility 加 height 的组合拳，那是给自己挖坑。
• 检查合成层：Chrome DevTools → Layers 面板，看看你的动画元素是不是在独立层上。
• 不要滥用硬件加速：每个合成层都有成本。只在需要动画的元素上加 will-change。
• 动画结束后清理：用 JavaScript 监听 transitionend 或 animationend，移除 will-change。

嗯，这一章就到这里。记住这个原则，你的动画性能至少能提升一个档次。