requestAnimationFrame实现高性能动画同步显示器刷新

在追求极致流畅的Web动画体验时，requestAnimationFrame（简称rAF）是开发者的核心工具。它并非简单的定时器，而是浏览器提供的智能调度机制，旨在让动画逻辑与屏幕的物理刷新节奏同步。无论用户设备是60Hz、90Hz还是120Hz的刷新率，rAF都能自动适配，从根本上避免因时机不当导致的丢帧、卡顿或资源浪费。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

为什么 rAF 比 setTimeout/setInterval 更适合动画

许多初学者容易将rAF误解为“每16.7毫秒执行一次”的setTimeout，这低估了它的能力。其核心在于“按需调用”——由浏览器在下一帧画面绘制之前，统一调度和执行回调函数。这种机制带来了几个关键优势：

• 自动节流：当页面被隐藏或最小化时，动画回调会自动暂停，节省CPU和电量。
• 智能对齐：它能无缝匹配当前显示器的刷新率。即使从60Hz切换到120Hz的高刷屏，代码也无需修改。
• 统一调度：浏览器可以智能地将同一帧内的多个rAF回调合并处理，减少不必要的布局计算和绘制开销。
• 高精度时间戳：回调函数接收一个DOMHighResTimeStamp参数，提供微秒级的时间精度，为制作与时间严格相关的动画（如物理模拟）奠定了基础。

基础用法：一个标准的动画循环

启动动画循环的正确方式，是在每一帧渲染完成后，主动请求下一帧。以下是一个标准范式：

function animate(timestamp) {
  // timestamp 是自页面加载以来的毫秒数（高精度）
  update(timestamp); // 更新状态（如位置、透明度）
  render();          // 渲染视图（如修改 style 或 canvas 绘图）
  requestAnimationFrame(animate); // 请求下一帧
}
requestAnimationFrame(animate); // 启动循环

有两点需要特别注意：首先，切忌用setTimeout去包裹rAF调用，这会破坏浏览器维护的同步性。其次，对于大多数匀速动画，通常不需要手动计算帧时间差（例如判断是否超过16.7ms），因为rAF本身已保证了调用的稳定性。

关键优化技巧

仅正确调用rAF还不够。要实现高性能动画，还需在渲染流水线上进行优化，避开性能消耗点。

• 只做必要更新：避免在每一帧中频繁读取offsetTop、getBoundingClientRect等样式属性，这会触发强制同步布局，即“布局抖动”。
• 优先使用合成属性：动画尽量使用transform和opacity属性。现代浏览器会将这些动画交给GPU的合成器线程处理，跳过主线程耗时的样式计算和布局。
• 避免频繁DOM操作：集中修改样式类名、使用DocumentFragment进行批量DOM插入，能有效减少重排和重绘。
• 用时间差做平滑插值：根据rAF回调提供的两次时间戳差值来计算位移，而不是使用固定步长。这样无论帧率如何波动，动画速度都保持恒定。

以下是一个基于时间插值的匀速移动示例：

let startTime = 0;
const DURATION = 2000; // 动画总时长 2秒

function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;
  const progress = Math.min(elapsed / DURATION, 1);
  element.style.transform = `translateX(${progress * 300}px)`;
  if (progress < 1) requestAnimationFrame(animate);
}

与 CSS 动画/transition 的协作策略

需要明确的是，rAF并非要取代CSS动画。对于简单的、声明式的状态过渡（例如悬停变色、元素展开），transition或@keyframes通常是更轻量、更高效的选择，浏览器很可能直接启用硬件加速。

那么，rAF的适用场景在哪里？它更适合以下情况：

• 需要复杂逐帧逻辑控制的动画，例如游戏中的物理运动、自定义绘制轨迹或复杂的滚动视差效果。
• 需要动态响应用户连续输入的交互，如拖拽元素的实时跟随、带有加速度的鼠标移动效果。
• 需要与其他异步JavaScript任务精密协调，例如等待一批数据加载完毕后再触发动画序列。

在混合使用CSS动画和rAF时，可以利用element.getAnimations()这个API来监听CSS动画的完成事件，然后再用rAF启动后续的JavaScript动画流程，从而实现平滑的无缝衔接。