动画的性能优化

动画在现代网页中扮演着重要角色，但性能问题常导致卡顿或耗电。从CSS角度优化动画性能，需要关注渲染流程、硬件加速和合成层管理。

渲染流程与性能瓶颈

浏览器渲染动画的流程分为五个阶段：

1. JavaScript计算
2. 样式计算
3. 布局（Layout）
4. 绘制（Paint）
5. 合成（Composite）

最容易引发性能问题的是布局和绘制阶段。例如修改元素的width或height会触发重排（Reflow），而修改background-color会触发重绘（Repaint）。

/* 触发重排的动画 */
@keyframes bad-animation {
  from { width: 100px; }
  to { width: 200px; }
}

/* 触发重绘的动画 */
@keyframes better-animation {
  from { background: red; }
  to { background: blue; }
}

优先使用transform和opacity

这两个属性不会触发布局或绘制，直接在合成阶段处理。现代浏览器会将这些元素提升为单独的合成层，由GPU加速处理。

/* 高性能动画示例 */
.box {
  transition: transform 0.3s ease;
}
.box:hover {
  transform: scale(1.1) translateX(10px);
}

实测数据显示，使用transform实现的动画比修改left/top的动画帧率高3-5倍。特别是在移动设备上，这种差异更加明显。

will-change属性的正确使用

这个CSS属性可以提前告知浏览器元素可能的变化，让浏览器提前优化：

.animated-element {
  will-change: transform, opacity;
}

但需要注意：

1. 不要滥用，每个will-change都会创建新的合成层
2. 使用后应及时移除
3. 最佳实践是在动画开始前添加，结束后移除

// 正确的will-change使用方式
element.addEventListener('mouseenter', () => {
  element.style.willChange = 'transform';
});

element.addEventListener('animationend', () => {
  element.style.willChange = 'auto';
});

避免布局抖动（Layout Thrashing）

连续读取和修改DOM样式会导致浏览器反复执行布局计算：

// 错误的做法 - 导致多次强制同步布局
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
  const width = box.offsetWidth; // 读取
  box.style.width = width + 10 + 'px'; // 写入
});

应使用批量读写模式：

// 正确的做法 - 先读取后写入
const boxes = document.querySelectorAll('.box');
const widths = [];
boxes.forEach(box => {
  widths.push(box.offsetWidth); // 批量读取
});

boxes.forEach((box, i) => {
  box.style.width = widths[i] + 10 + 'px'; // 批量写入
});

优化动画时间函数

ease-in-out等标准缓动函数可能导致帧率不稳定，可以使用cubic-bezier()自定义更平滑的曲线：

/* 标准缓动 */
.standard {
  transition: transform 0.5s ease-in-out;
}

/* 优化后的缓动 */
.optimized {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.4, 1);
}

对于复杂动画序列，建议使用Web Animations API：

element.animate([
  { transform: 'translateY(0)', opacity: 1 },
  { transform: 'translateY(100px)', opacity: 0.5 }
], {
  duration: 1000,
  easing: 'cubic-bezier(0.5, 0, 0.5, 1)',
  fill: 'forwards'
});

合成层管理策略

过多的合成层会导致内存占用过高，特别是在移动设备上。可以通过以下方式优化：

1. 限制will-change的使用范围
2. 对静态内容避免使用transform: translateZ(0)
3. 使用content-visibility: auto管理渲染区域

/* 谨慎使用硬件加速 */
.accelerated {
  transform: translateZ(0); /* 创建合成层 */
}

/* 更智能的渲染控制 */
.container {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

动画性能调试工具

Chrome DevTools提供多种动画调试功能：

1. Performance面板记录动画帧率
2. Rendering面板显示绘制矩形和层边界
3. Layers面板查看合成层情况

关键指标包括：

• 帧率保持在60fps以上
• 单个帧的渲染时间小于16ms
• 避免长时间的JavaScript执行

移动端特殊优化

移动设备需要额外注意：

1. 减少动画的持续时间（300ms以内）
2. 使用touch-action: manipulation改善触摸响应
3. 优先使用CSS动画而非JavaScript动画

/* 移动端优化示例 */
.mobile-button {
  transition: transform 0.2s ease;
  touch-action: manipulation;
}
.mobile-button:active {
  transform: scale(0.95);
}

动画降级策略

为低性能设备提供备选方案：

.animation {
  transform: translateY(0);
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    transition: none;
  }
}

JavaScript检测性能：

const isLowPerformance = window.performance.memory.usedJSHeapSize > 50 * 1024 * 1024;
if (isLowPerformance) {
  document.documentElement.classList.add('low-performance');
}