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），浏览器可合并重排重绘，减少渲染开销。
立即学习“Java免费学习笔记（深入）”；
频繁读写 offsetTop / clientWidth 等属性 + setTimeout → 容易触发多次强制同步布局（Layout Thrashing）rAF 天然鼓励你把状态计算、DOM 更新、样式变更打包到一次回调里，更符合渲染管线逻辑
带高精度时间戳，便于帧率无关动画
回调函数接收一个 DOMHighResTimeStamp 参数（单位毫秒，精度达微秒级），从页面加载开始计时。你可以据此计算真实经过时间，实现稳定速度的动画，不受帧率波动影响。
例如：位移 = 起始位置 + 速度 × (time – startTime)，而不是靠“每帧加 1px”即使某帧耗时略长，下帧也能自动补偿，动画节奏不漂移配合 cancelAnimationFrame，可精准控制启停与暂停恢复
基本上就这些。它不复杂，但容易忽略——尤其在用 setTimeout 做滚动动画、Canvas 渲染或自定义过渡时，换上 rAF 往往就是最直接有效的性能提升点。
以上就是JavaScript中什么是动画_requestAnimationFrame优势的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541189.html
微信扫一扫 
支付宝扫一扫 
