动画的性能优化

动画在现代网页设计中扮演着重要角色，但性能问题常导致卡顿或掉帧。通过优化CSS动画的实现方式，可以显著提升用户体验和页面流畅度。

减少重绘和回流

动画触发重绘或回流会消耗大量性能。使用transform和opacity属性能避免布局计算，因为它们只触发合成阶段：

/* 优化前 - 触发回流 */
.box {
  left: 100px;
  transition: left 0.3s ease;
}

/* 优化后 - 仅触发合成 */
.box {
  transform: translateX(100px);
  transition: transform 0.3s ease;
}

绝对定位元素会脱离文档流，减少对其他元素的影响：

.animated-element {
  position: absolute;
  will-change: transform; /* 提示浏览器提前优化 */
}

合理使用硬件加速

强制GPU加速可减轻CPU负担，但过度使用会导致内存问题：

.accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

注意硬件加速的副作用：

• 增加显存占用
• 可能导致字体模糊
• 移动端电池消耗加快

优化动画时间函数

linear函数计算成本最低，复杂曲线如cubic-bezier(0.68, -0.55, 0.265, 1.55)会增加计算负担：

/* 性能更好的简单缓动 */
.move {
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 复杂动画考虑用JavaScript分段处理 */

控制动画复杂度

复合动画应分解为独立属性：

/* 不推荐 - 同时动画多个属性 */
.box {
  transition: all 0.3s ease;
}

/* 推荐 - 分离控制 */
.box {
  transition: 
    transform 0.3s ease-out,
    opacity 0.2s linear;
}

帧率与性能平衡

通过@media (prefers-reduced-motion)适配用户偏好：

.animation {
  animation: slide 1s ease;
}

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

JavaScript中动态检测：

const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
if (motionQuery.matches) {
  element.style.animationPlayState = 'paused';
}

分层与合成优化

使用will-change提前声明变化属性：

.optimized-layer {
  will-change: transform, opacity;
  /* 实际动画时才添加此类 */
}

分层策略示例：

1. 静态背景层
2. 滚动内容层
3. 悬浮动画层
4. 模态框层

避免布局抖动

连续读取/写入样式会导致强制同步布局：

// 错误示范
function resizeAll() {
  const boxes = document.querySelectorAll('.box');
  boxes.forEach(box => {
    box.style.width = box.offsetWidth + 10 + 'px';
  });
}

// 正确做法
function resizeAll() {
  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';
  });
}

动画性能监测工具

Chrome DevTools 关键指标：

• FPS 实时图表
• Performance 面板的火焰图
• Layers 面板查看合成层

// 手动计算FPS
let frameCount = 0;
let lastTime = performance.now();

function checkFPS() {
  frameCount++;
  const now = performance.now();
  if (now >= lastTime + 1000) {
    console.log(`FPS: ${frameCount}`);
    frameCount = 0;
    lastTime = now;
  }
  requestAnimationFrame(checkFPS);
}
checkFPS();

移动端特殊考量

触摸事件处理优化：

// 使用被动事件监听器
window.addEventListener('touchmove', onTouchMove, { 
  passive: true 
});

// 防抖处理快速滑动
let lastY = 0;
function onTouchMove(e) {
  const y = e.touches[0].clientY;
  if (Math.abs(y - lastY) > 30) return;
  lastY = y;
  // 处理动画
}

电池模式下的降级方案：

navigator.getBattery().then(battery => {
  if (battery.level < 0.2) {
    document.body.classList.add('low-power-mode');
  }
});

关键渲染路径优化

CSS动画应放在独立图层：

.animation-layer {
  position: absolute;
  z-index: 10;
  contain: strict; /* 限制影响范围 */
}

避免在动画元素上使用以下属性：

• box-shadow
• border-radius
• filter
• clip-path

动画生命周期管理

复杂场景使用Web Animation API：

const animation = element.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(100px)' }
], {
  duration: 1000,
  fill: 'forwards'
});

// 精确控制
animation.pause();
animation.currentTime = 500;
animation.playbackRate = 0.5;

内存管理注意事项

结束动画后释放资源：

function startAnimation() {
  const animation = element.animate(...);
  animation.onfinish = () => {
    element.style.transform = 'translateX(100px)';
    animation.cancel();
  };
}

物理动画优化

实现弹性动画时限制迭代次数：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  /* 减少中间关键帧 */
}

复杂物理效果考虑使用CSS Houdini：

if (CSS.animationWorklet) {
  await CSS.animationWorklet.addModule('spring-animator.js');
  new WorkletAnimation(
    'spring',
    new KeyframeEffect(element, [{transform: 'scale(1)'}, {transform: 'scale(2)'}], 
    {duration: 1000}),
    document.timeline
  ).play();
}