React-fiber基础之requestAnimationFrame和requestIdleCallback

最新推荐文章于 2024-06-19 09:11:23 发布

蚂蚁二娘

最新推荐文章于 2024-06-19 09:11:23 发布

阅读量677

点赞数 1

文章标签： react.js 动画前端

本文链接：https://blog.csdn.net/web2022050901/article/details/128640050

版权

本文详细探讨了屏幕刷新率与浏览器每一帧的执行流程，重点介绍了requestAnimationFrame和requestIdleCallback的使用。requestAnimationFrame在每一帧渲染前执行，用于创建流畅动画，而requestIdleCallback则在浏览器空闲时执行低优先级任务，优化性能并确保响应用户交互。文中通过示例代码解析了两个API的工作原理和应用场景。

摘要由CSDN通过智能技术生成

屏幕刷新率

目前大多数设备的屏幕刷新率是60次每秒
浏览器渲染动画或者页面的每一帧的速率也需要根设备屏幕的刷新率保持一致
页面是一帧一帧绘制出来的，当每秒的帧数（FPS）达到60，页面是流畅的，小于这个值，用户会感觉到卡顿
每一帧的预算时间大概是16.6ms
1s 60帧，所以每帧时间大概16.6ms，我们书写代码时力求不让每一帧工作量超过16.6

每帧浏览器都做了什么

1.阻塞输入事件（输入事件，触摸事件，鼠标滚动事件），非阻塞输入事件（点击，键盘事件）。因为和用户交互，优先级最高
2.定时器，js脚本，微任务
3.开始帧（每一帧的事件，如窗口resize事件，滚动，媒体查询事件）
4.requestAnimateFrame
5.layout布局，计算样式，更新布局
6.绘制paint，记录，合成图层等
7.空闲阶段（idle peroid）requestIdleCallback

requestAnimationFrame

该api告诉浏览器，希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

执行时机是每一帧浏览器进行渲染之前，是一个高优的任务。

当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数 (即你的回调函数)。

回调函数执行次数通常是每秒 60 次，但在大多数遵循 W3C 建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，因此在大多数浏览器里，当requestAnimationFrame() 运行在后台标签页或者隐藏的<iframe> 里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

也就是说，当我们切换浏览器的tab页面，或者浏览器窗口最小化以后，使用改api模拟的动画会暂停，直到当前页面再次出现在屏幕的可视区域。

回调函数会被传入DOMHighResTimeStamp参数，DOMHighResTimeStamp指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。在同一个帧中的多个回调函数，它们每一个都会接受