requestanimationframe 比 setinterval 更适合动画，因其自动对齐屏幕刷新率、页面后台时暂停、时间戳精准且与渲染管线协同；需递归调用、手动控制启停、避免重复调度及dom重排。
requestAnimationFrame 是浏览器专为动画设计的 API，比 setInterval 更精准、更省电、更顺滑——它会自动对齐屏幕刷新率（通常是 60fps），且在页面不可见时暂停执行，避免后台耗能。
为什么 requestAnimationFrame 比 setInterval 更适合动画
• setInterval 不感知屏幕刷新节奏，容易出现“掉帧”或“卡顿”，比如设成 16ms 也不一定准时执行；
• requestAnimationFrame 由浏览器调度，在下一帧绘制前触发，天然与渲染管线协同；
• 页面切到后台时，requestAnimationFrame 自动暂停，setInterval 却照常运行，浪费资源；
• 动画时间戳精确（传入毫秒级时间参数），方便做匀速、缓动等计算。
基础用法：用递归调用替代 setInterval 循环
不是“启动一次就完事”，而是每次执行完，主动请求下一帧：
<script><br> let startTime = performance.now();<br> function animate(currentTime) {<br> // 计算已过时间、更新元素位置/样式等<br> const elapsed = currentTime - startTime;<br> const progress = (elapsed % 2000) / 2000; // 2秒循环<br> const x = Math.sin(progress * Math.PI * 2) * 100 + 200;<br> document.getElementById('box').style.transform = `translateX(${x}px)`;<br><br> // 关键：递归请求下一帧<br> requestAnimationFrame(animate);<br> }<br> // 启动动画<br> requestAnimationFrame(animate);<br> </script>
进阶技巧：控制启停、节流与性能优化
• 手动启停：用变量标记状态，只在需要时调用 requestAnimationFrame：
let isRunning = true;
function animate() {
if (!isRunning) return;
// ... 动画逻辑
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
// 暂停：isRunning = false；恢复：isRunning = true; requestAnimationFrame(animate);
• 避免重复调用：防止多次点击“开始”导致多层嵌套 requestAnimationFrame；
• 用时间戳做增量计算：别依赖帧数计数，用传入的 currentTime 做差值，保证动画速率稳定（即使偶尔掉帧也不偏移）；
• 结合 CSS transform 和 will-change：提升动画元素至合成层，减少重排重绘，真正实现 60fps。
常见误区提醒
• ❌ 不要写成 setInterval(() => requestAnimationFrame(...), 16) —— 这既没解决 setInterval 的问题，又叠加了两层调度；
• ❌ 不要在 requestAnimationFrame 回调里做大量 DOM 查询或复杂计算，会拖慢帧率；
• ❌ 不要忘记清理：页面卸载或组件销毁时，确保没有悬空的动画循环（虽然浏览器通常会自动回收，但主动管理更稳妥）。
