动效图标性能优化：让界面流畅不卡顿

手机App里那些跳动的加载图标、滑动时弹出的点赞动画，看着挺酷，但一不小心就会让页面卡成PPT。尤其是中低端设备上，动效图标一旦没处理好，用户手指还没抬起来，界面还在那儿慢慢吞吞地转圈。

为什么动效图标会拖慢性能？

每个动效本质都是连续的画面刷新。比如一个旋转的SVG图标，每秒播放60帧，浏览器就得不断计算位置、重绘图像。如果多个动效同时跑，再加上页面本身有滚动、交互响应，CPU和GPU很快就会吃紧。更别提有些开发者直接用GIF做图标，那种未经压缩的位图动画，内存占用高得离谱。

减少重绘与回流

改变元素的宽高或位置，容易触发浏览器的回流（reflow）和重绘（repaint），这是性能杀手。想让动效顺滑，优先使用 transform 和 opacity 来驱动动画，这两者能被GPU加速，不会引发布局变化。

.icon-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

上面这个旋转动画只改了 transform，浏览器会把它提升为独立图层，交给GPU处理，效率比用 left 或 top 搞位移强得多。

控制动画的触发频率

用户快速点击按钮时，图标连续播放五次“成功”动画，每次都要完整走完1秒，视觉上堆成一团。这时候可以用防抖或节流控制触发频率，或者动画结束后才允许下一次播放。

let isAnimating = false;
const icon = document.querySelector('.check-icon');

function playCheckAnimation() {
  if (isAnimating) return;
  isAnimating = true;

  icon.classList.add('animate');
  setTimeout(() => {
    icon.classList.remove('animate');
    isAnimating = false;
  }, 600);
}

这样即使用户连点三次，每次动画之间也有缓冲，不会堆积渲染压力。

精简SVG结构

很多设计师给的SVG图标包含多余图层、注释和冗余路径点。导入项目前记得用工具如 SVGO 压一下。一个简单的播放按钮图标，原始文件可能有2KB，优化后不到500B，加载和解析都更快。

必要时降级处理

不是所有设备都配得上华丽动效。可以通过 JavaScript 检测设备性能，比如用 matchMedia 判断是否开启减少动画偏好。

if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  document.body.classList.add('no-animations');
}

然后在CSS里统一关闭复杂动效，既照顾体验敏感用户，也减轻老机型负担。

用Web Animations API 精准控制

比起纯CSS动画，Web Animations API 提供更细粒度的操作能力，比如暂停、反向播放、动态调整时间轴。对于需要交互响应的动效图标，这种控制力很实用。

const iconEl = document.querySelector('#heart-icon');
const animation = iconEl.animate(
  [{ transform: 'scale(1)' }, { transform: 'scale(1.4)' }],
  { duration: 300, fill: 'forwards' }
);

// 用户取消喜欢，直接反向播放
animation.reverse();

避免反复添加删除class导致样式重算，提升响应速度。