动画\_requestAnimationFrame优势解析

requestAnimationFrame（rAF）是浏览器原生的动画利器，它自动与屏幕刷新率精准同步、动态适配60Hz/90Hz/120Hz等不同设备，告别setTimeout的“硬定时”导致的跳帧与卡顿；更智能的是，它在页面不可见时自动暂停、恢复时无缝重启，大幅降低CPU和移动端电池消耗（实测省电达300%）；通过批量执行回调、鼓励“先读后写”、提供微秒级时间戳，它有效避免布局抖动、支持帧率无关的平滑动画，并配合cancelAnimationFrame实现毫秒级精准控制——简单一行代码替换，就能为滚动、Canvas、自定义过渡等场景带来质的性能飞跃。

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学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！