前端性能优化：善用 requestAnimationFrame

在前端开发中，动画、滚动监听和 DOM 更新都是比较常见的场景。如果频繁操作 DOM 或执行复杂计算，很容易导致页面卡顿。

requestAnimationFrame（简称 rAF）是浏览器提供的 API，可以帮助我们更合理地安排 UI 更新。

1. 什么是 requestAnimationFrame？

requestAnimationFrame 会在浏览器下一次重绘之前执行回调函数，通常与屏幕刷新率保持同步。

function animate() {
  // 更新动画状态
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

相比使用 setInterval 或 setTimeout 实现动画，rAF 更适合浏览器的渲染机制。

2. 优化高频事件

滚动、鼠标移动和窗口尺寸变化等事件可能在短时间内触发大量回调。

可以使用 rAF 合并同一帧内的多次更新：

let scheduled = false;

window.addEventListener('scroll', () => {
  if (scheduled) return;

  scheduled = true;

  requestAnimationFrame(() => {
    scheduled = false;

    // 执行滚动相关的 DOM 更新
    updatePosition();
  });
});

这样可以避免在一帧内重复执行大量不必要的更新。

3. 取消动画任务

如果组件已经销毁，或者动画不再需要执行，可以通过 cancelAnimationFrame 取消任务。

const id = requestAnimationFrame(() => {
  console.log('执行动画');
});

cancelAnimationFrame(id);

在 Vue、React 等框架中，尤其要注意组件卸载时清理尚未执行的动画任务。

4. 使用时需要注意

• rAF 适合动画和视觉更新，不适合耗时计算。
• 浏览器切换到后台时，rAF 可能暂停或降低执行频率。
• 尽量避免在回调中频繁交替读取和修改 DOM，防止强制同步布局。
• 不要把 rAF 当作通用的防抖或节流方案，它主要用于协调浏览器渲染。

总结

requestAnimationFrame 是前端性能优化中一个简单但实用的 API。

合理使用它，可以让动画和视觉更新更贴合浏览器的渲染节奏，减少不必要的重复工作，改善页面流畅度。