如何借助requestAnimationFrame达成与显示器刷新同步的高性能动画

requestAnimationFrame（rAF）是实现与显示器刷新率同步、高流畅度动画的核心手段，它由浏览器在下一次重绘前调度回调，自动适配60Hz/90Hz/120Hz等刷新率，具备自动节流、智能对齐、统一调度和高精度时间戳等优势。

使用 requestAnimationFrame（简称 rAF）是实现与显示器刷新率同步、高流畅度动画的核心手段。它让浏览器决定何时执行动画帧，自动适配设备的刷新率（如 60Hz、90Hz、120Hz），避免强制重绘、丢帧或卡顿。

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

rAF 不是“每 16.7ms 执行一次”的定时器，而是由浏览器在下一次重绘前调度回调，确保动画逻辑与屏幕刷新严格对齐。它具备以下优势：

• 自动节流：页面后台运行时暂停调用，节省资源
• 智能对齐：匹配当前显示器刷新率，即使切换到 120Hz 屏幕也不需改代码
• 统一调度：浏览器可将多个 rAF 回调合并进同一帧，减少 layout / paint 开销
• 更精准的时间戳：回调参数提供高精度 DOMHighResTimeStamp（单位毫秒，精确到微秒级）

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

不要用递归调用 rAF 前先清空上一帧——正确写法是每次渲染后主动请求下一帧：

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

注意：不要在 animate 内部用 setTimeout 包裹 rAF，这会破坏同步性；也无需手动计算帧间隔（如 (timestamp - lastTime) > 16.7），rAF 本身已保证帧率稳定。

关键优化技巧

高性能动画不只靠 rAF，还需配合渲染链路优化：

• 只做必要更新：避免在每一帧中读取 offsetTop、getBoundingClientRect 等触发强制同步布局（layout thrashing）
• 优先使用合成属性：对 transform 和 opacity 动画，浏览器可直接交由 GPU 合成，跳过主线程样式计算与布局
• 避免频繁 DOM 操作：批量修改 class、使用 documentFragment 或虚拟 DOM 减少重排重绘
• 用时间差做平滑插值：根据两次 rAF 的时间差计算位移量，而非固定步长，适应不同刷新率

例如实现匀速移动：

let startTime = 0;const DURATION = 2000; // 动画总时长 2sfunction 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 不是万能替代品。简单、声明式的动画（如 hover 变色、展开收起）应优先用 CSS transition 或 @keyframes，它们更轻量且可能硬件加速。rAF 更适合：

• 需要逐帧控制逻辑的场景（如物理模拟、手绘轨迹、滚动视差）
• 动态响应用户输入（如拖拽跟随、鼠标悬停加速度）
• 与其他 JS 任务协调（如数据加载完成后再启动动画）

混合使用时，可通过 element.getAnimations() 监听 CSS 动画结束，再用 rAF 启动后续 JS 动画，避免冲突。