requestAnimationFrame优势详解

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《动画requestAnimationFrame优势解析》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

requestAnimationFrame（rAF）是浏览器原生、与屏幕刷新率自动同步的动画API，具备自动节能、批量处理、高精度时间戳和精准启停等优势，显著提升动画性能与能效。

requestAnimationFrame（常简写为 rAF）是浏览器原生提供的、专为动画设计的 API。它不是“自己控制时间”，而是把动画任务交给浏览器，由浏览器在下一次屏幕刷新前自动调用你的回调函数——也就是说，它天然和屏幕刷新节奏保持一致。

与屏幕刷新率自动同步

rAF 的执行频率不是固定 16.67ms，而是紧贴设备实际刷新率：60Hz 屏幕约每 16.7ms 一次，90Hz 屏幕约 11.1ms，120Hz 屏幕约 8.3ms。浏览器会动态适配，无需手动计算或切换逻辑。

• setTimeout(16) 是“我定个闹钟”，但闹钟响时浏览器可能正忙，导致跳帧或卡顿
• rAF 是“我预约浏览器下次画图前那一刻”，浏览器保证在绘制前给你留出计算和更新 DOM 的窗口

自动节能，后台暂停

当用户切走标签页、最小化窗口或锁屏时，rAF 会立刻停止触发回调。这不只是省电，更避免了无意义的 JS 执行、DOM 操作和样式计算。

• setInterval 即使页面不可见，仍持续运行，CPU 占用不降
• rAF 停止后，页面重新可见时自动恢复，无需额外监听 visibilitychange
• 移动端电池消耗可降低 300%（实测数据）

批量处理 + 避免布局抖动

同一帧内多个 rAF 回调会集中执行；配合“先读后写”原则（比如先 getBoundingClientRect，再改 style），浏览器可合并重排重绘，减少渲染开销。

• 频繁读写 offsetTop / clientWidth 等属性 + setTimeout → 容易触发多次强制同步布局（Layout Thrashing）
• rAF 天然鼓励你把状态计算、DOM 更新、样式变更打包到一次回调里，更符合渲染管线逻辑

带高精度时间戳，便于帧率无关动画

回调函数接收一个 DOMHighResTimeStamp 参数（单位毫秒，精度达微秒级），从页面加载开始计时。你可以据此计算真实经过时间，实现稳定速度的动画，不受帧率波动影响。

• 例如：位移 = 起始位置 + 速度 × (time - startTime)，而不是靠“每帧加 1px”
• 即使某帧耗时略长，下帧也能自动补偿，动画节奏不漂移
• 配合 cancelAnimationFrame，可精准控制启停与暂停恢复

基本上就这些。它不复杂，但容易忽略——尤其在用 setTimeout 做滚动动画、Canvas 渲染或自定义过渡时，换上 rAF 往往就是最直接有效的性能提升点。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《requestAnimationFrame优势详解》文章吧，也可关注golang学习网公众号了解相关技术文章。