rAF比setInterval更优因其与屏幕刷新率同步，避免掉帧；2. 页面不可见时自动暂停，节省资源；3. 浏览器控制帧率对齐，减少卡顿；4. 提供高精度时间戳，提升动画精度。
在实现网页动画时，使用setInterval虽然简单直接，但存在性能问题和帧率不稳定的缺陷。现代 Web 开发推荐使用requestAnimationFrame（简称 rAF）来替代 setInterval 实现更流畅、更高效的动画效果。
为什么 rAF 比 setInterval 更优？
rAF 是浏览器专为动画设计的 API，它与屏幕刷新率同步，通常每秒执行 60 次（即 16.7ms/帧），能有效避免掉帧或过度渲染。
自动节流：当页面不可见（如切换标签页）时，rAF 会暂停执行，节省 CPU 和电池资源。
帧率对齐：浏览器决定何时绘制下一帧，确保动画与刷新率一致，减少卡顿和闪烁。
更高精度计时：rAF回调函数接收一个高精度时间戳参数，比 Date.now() 或 performance.now() 更准确。
如何用 rAF 替代 setInterval？
将原本基于定时器的循环改为递归调用 rAF，控制动画生命周期。
function animateElement(element) {let start = null;function step(timestamp) {if (!start) start = timestamp;const progress = timestamp - start;element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;if (progress requestAnimationFrame(step);}}requestAnimationFrame(step);}上面的例子让元素在 2 秒内平滑移动 200px，利用时间差计算进度，避免依赖固定间隔。
Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载立即学习“Java免费学习笔记（深入）
”；
注意事项与最佳实践为了发挥 rAF 的最大优势，需注意以下几点：不要嵌套 setTimeout/setInterval：混合使用会导致帧节奏混乱，失去同步优势。
及时终止动画：在组件销毁或用户交互中断时，通过不再调用 rAF 终止循环。
结合 CSS 动画做取舍：简单变换建议用 CSS transition 或 @keyframes，复杂逻辑再用 JS 控制。
避免长时间运行任务：JS 执行时间过长仍会造成卡顿，必要时可分片处理。
基本上就这些。用 requestAnimationFrame 替代 setInterval 不仅提升动画质量，也更符合现代浏览器的渲染机制。掌握这个模式，是写出高性能前端动画的关键一步。