requestAnimationFrame是什么？它有什么优势？

requestAnimationFrame 是浏览器原生提供的高性能动画调度API，它巧妙地与屏幕刷新节奏严格同步（如60Hz下每16.7ms触发一次），自动适配不同刷新率、后台暂停、智能降频保帧率，并批量合并DOM更新以大幅减少重排重绘开销；相比 setInterval 或 setTimeout，它更省电、更流畅、更贴近浏览器渲染管线本质——是现代Web视觉动画不可或缺的基石，简单易用却暗藏精妙设计，掌握它，就掌握了丝滑动画的第一把钥匙。

requestAnimationFrame 是浏览器原生提供的动画 API，本质是“告诉浏览器：我有个动画要画，请在下一次屏幕刷新前帮我调用一下函数”。它不自己定时间，而是由浏览器根据当前屏幕刷新节奏来调度执行时机。

跟屏幕刷新完全同步

主流显示器刷新率是 60Hz，也就是每 16.7ms 刷新一帧。requestAnimationFrame 的回调会严格对齐这个节奏，在每次重绘前触发。这意味着动画不会“抢跑”或“迟到”，避免了 setInterval 那种与刷新错位导致的掉帧、卡顿或抖动。

• 60Hz 屏幕 → 回调约每 16.7ms 执行一次
• 75Hz 屏幕 → 自动变成约每 13.3ms 一次
• 页面被最小化或切到后台标签页 → 回调自动暂停，不消耗资源

所有 DOM 更新集中批量处理

如果你在一帧内多次修改样式或布局，requestAnimationFrame 会把它们合并进一次重排（reflow）和重绘（repaint），而不是像 setTimeout 那样逐次触发、反复强制渲染。这直接减少了性能开销，尤其对复杂动画或频繁交互场景很关键。

更省电、更智能的调度

它不是“拼命执行”，而是配合浏览器渲染管线动态调节：

• 主线程繁忙时，会适当延迟回调，防止阻塞导致丢帧
• 检测到连续几帧执行超时，可能主动降频（比如从 60fps 降到 30fps），保持动画稳定而非崩溃
• 移动端锁屏或 WebView 进入后台时，自动停止，大幅降低 CPU 和电池消耗

使用简单但必须注意终止

它默认是递归调用的，比如：

要停止时，得用 cancelAnimationFrame(id)，其中 id 就是 requestAnimationFrame 返回的数字标识——这点和 clearTimeout 类似，忘了存 id 就停不掉。

基本上就这些。它不是万能的，但只要是涉及视觉变化的 JS 动画，requestAnimationFrame 几乎就是现代 Web 的标准起点。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。