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; // 动画总时长 2s
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 <h3>与 CSS 动画/transition 的协作策略</h3><p>rAF 不是万能替代品。简单、声明式的动画（如 hover 变色、展开收起）应优先用 CSS transition 或 @keyframes，它们更轻量且可能硬件加速。rAF 更适合：</p>
- 需要逐帧控制逻辑的场景（如物理模拟、手绘轨迹、滚动视差）
- 动态响应用户输入（如拖拽跟随、鼠标悬停加速度）
- 与其他 JS 任务协调（如数据加载完成后再启动动画）
混合使用时，可通过 element.getAnimations() 监听 CSS 动画结束，再用 rAF 启动后续 JS 动画，避免冲突。
