requestAnimationFrame（rAF）是实现流畅JavaScript动画的核心API，它通过在浏览器重绘前调用回调函数，使动画与屏幕刷新率同步。相比setTimeout或setInterval，rAF能根据设备实际刷新率（如60Hz或120Hz）动态调整执行频率，避免卡顿和掉帧，并在页面不可见时自动暂停，节省资源。其基本用法是定义一个递归调用requestAnimationFrame的动画函数，利用浏览器传入的高精度时间戳（currentTime）计算动画进度，结合performance.now()实现精准控制。使用时需注意仅单次触发，需手动维持动画循环，避免复杂计算影响性能，并通过逻辑条件终止动画。掌握rAF是现代前端高性能动画的基础实践。
JavaScript动画的核心在于控制元素的样式随时间变化，而实现流畅动画的关键是选择合适的时机更新画面。传统做法使用setTimeout或setInterval驱动动画，但这类方法无法与浏览器的刷新节奏同步，容易造成卡顿或掉帧。现代Web推荐使用requestAnimationFrame（简称rAF）来实现更高效、更平滑的动画效果。
什么是RequestAnimationFrame？
requestAnimationFrame是一个浏览器提供的API，它告诉浏览器你希望执行动画，并请求浏览器在下一次重绘之前调用指定的回调函数。该方法会根据屏幕刷新率自动调节执行频率，通常是每秒60次（即约16.7毫秒/帧），从而保证动画与屏幕刷新同步，避免撕裂和卡顿。
rAF的优势在于：
- 由浏览器统一调度，节省资源，页面不可见时自动暂停
- 自动适配设备刷新率（如60Hz、120Hz）
- 比
setTimeout更精准，减少不必要的重绘
rAF的基本用法
使用requestAnimationFrame非常简单。你需要定义一个动画循环函数，在函数内部更新动画状态并再次调用rAF，形成递归调用：
function animate(currentTime) {
// 更新动画逻辑，例如移动元素位置
const elapsed = currentTime - startTime;
element.style.transform = `translateX(${elapsed / 10}px)`;
// 继续请求下一帧
if (elapsed < 2000) { // 动画持续2秒
requestAnimationFrame(animate);
}
}
// 开始动画
const startTime = performance.now();
requestAnimationFrame(animate);
参数currentTime是由浏览器传入的时间戳，表示当前帧开始的时间，精度高于Date.now()，适合做精确的时间计算。
与setTimeout对比
若使用setTimeout(animate, 16)模拟60fps，看似合理，但存在几个问题：
- 时间间隔固定，无法适应屏幕刷新节奏
- 在页面后台运行时仍可能执行，浪费CPU和电量
- 容易因JS阻塞导致跳帧
而rAF会在页面隐藏时暂停调用，回到前台后继续，更加智能节能。
注意事项与最佳实践
使用requestAnimationFrame时需注意以下几点：
- 每次调用
rAF只触发一次回调，需在回调中再次调用以维持动画 - 避免在
rAF回调中进行复杂计算，影响渲染性能 - 可结合
performance.now()做高精度时间差计算 - 动画结束时无需“清除”定时器，可通过条件判断停止递归调用
基本上就这些。掌握requestAnimationFrame的原理和用法，是实现高性能JS动画的基础。它让动画更流畅、更省电，是现代前端开发的标准做法。
