React-fiber基础之requestAnimationFrame和requestIdleCallback

React-fiber基础之requestAnimationFrame和requestIdleCallback
屏幕刷新率
- 目前大多数设备的屏幕刷新率是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() 运行在后台标签页或者隐藏的</code> 里时，<code>requestAnimationFrame()</code> 会被暂停调用以提升性能和电池寿命。 也就是说，当我们切换浏览器的tab页面，或者浏览器窗口最小化以后，使用改api模拟的动画会暂停，直到当前页面再次出现在屏幕的可视区域。 回调函数会被传入<code>DOMHighResTimeStamp</code>参数，<code>DOMHighResTimeStamp</code>指示当前被 <code>requestAnimationFrame()</code> 排序的回调函数被触发的时间。在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数，单位毫秒，最小精度为 1ms(1000μs)。 通俗的说，该api会给传递的回调函数一个参数，该参数是当前页面渲染完成到当前函数执行时，已经过去了多少时间。这个参数的值在后续的每次渲染都会不断增加，因为浏览器渲染完毕以后，时间总是在增加。当然呢刷新页面以后会被重置。 <h4><a name="t3"></a><a id="demo_37"></a>demo：</h4> <pre data-index="0" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { height: 200px; width: 0; background-color: aqua; transition: all 0.1s; } </style> </head> <body> <div></div> <script> const div = document . querySelector('div') let width = 0 const animationWidth = (time) => { width += 10 div.style.width = width + 'px' div.innerHTML = (width / 10) + '%' // 如果页面渲染了两秒时间过去了还没执行完就不执行动画了 if (width < 1000 && time < 2000) requestAnimationFrame(animationWidth) } requestAnimationFrame(animationWidth) </script> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li></ul></pre> 我们在回调函数中，再把当前的动画回调函数放入requestAnimationFrame中，会在下一次渲染页面前继续执行该动画函数 <h3><a name="t4"></a><a id="requestIdleCallback_84"></a>requestIdleCallback</h3> <code>window.requestIdleCallback()</code> 方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主<a href="https://so.csdn.net/so/search?q=%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"事件循环\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"事件循环\"}"}" data-tit="事件循环" data-pretit="事件循环">事件循环</a>上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间<code>timeout</code>，则有可能为了在超时前执行函数而打乱执行顺序。 在浏览器每次渲染页面时，我们会反馈（响应用户的输入），页面的拖拽，浏览器大小的改变，js主线程的任务，微任务宏任务，requestAnimationFrame回调，浏览器进行绘制，如果这些事情做完以后，还有剩余时间，我们认为这就是当前渲染帧的空闲时间，这个时间浏览器可以交给我们开发者（js主线程执行一些优先级不高的任务）。 可以这样认为，我们使用这个api了，那么浏览器在当前帧还有剩余时间，那么就会把执行权交给我们，但是我们也需要在剩余时间结束之前把执行权还给浏览器。 要记住，拿到执行权，然后在使用完毕以后，把执行权还给浏览器，这个是我们开发者和浏览器的 “君子协议”，你当然拿到执行权可以不交给浏览器了（比如我们进行一次死循环，那么很显然浏览器会卡死，没办法响应用户输入等）。 <h4><a name="t5"></a><a id="demo_97"></a>demo：</h4> <pre data-index="1" class="set-code-hide prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> const sleep = (time) => { const now = Date . now() while (Date . now() < now + time) { } } const worksQueue = [ () => { console . log('任务A开始') sleep(20) console . log('任务A结束') }, () => { console . log('任务B开始') sleep(20) console . log('任务B结束') }, () => { console . log('任务C开始') sleep(20) console . log('任务C结束') }, () => { console . log('任务D开始') sleep(20) console . log('任务D结束') }, () => { console . log('任务E开始') sleep(20) console . log('任务E结束') } ] const doSomething = (idleDeadline) => { // idleDeadline.timeRemaining() // 返回值是剩余时间 while (idleDeadline. timeRemaining() > 0 && worksQueue.length) { console . log(idleDeadline. timeRemaining()) const work = worksQueue. shift() work() } // 还有任务 if(worksQueue.length) requestIdleCallback(doSomething) } requestIdleCallback(doSomething) <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li></ul></pre> 看打印结果，可以发现： <img src="https://1000bd.com/contentImg/2024/04/20/08bca7422f94faa3.png" alt="在这里插入图片描述"> 我们可以看出来，前面的剩余时间都很正常，但是中间出现了一个50，这个是为什么？ 因为浏览器可以发现，我们页面已经长时间没有发生过交互了，而对于人眼来说，响应交互的时延小于在50ms，也就是一秒20帧，人不会感觉明显的卡顿，所以浏览器会多给我们一些时间来执行这些优先级不高的任务。 如果我们把任务执行时间延长，比如一个任务需要1000ms，会发生什么？ <pre data-index="2" class="set-code-hide prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> const worksQueue = [ () => { console . log('任务A开始') sleep(20) console . log('任务A结束') }, () => { console . log('任务B开始') sleep(1000) console . log('任务B结束') }, () => { console . log('任务C开始') sleep(20) console . log('任务C结束') }, () => { console . log('任务D开始') sleep(1000) console . log('任务D结束') }, () => { console . log('任务E开始') sleep(20) console . log('任务E结束') } ] <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/20/85fa4757237a425b.png" alt="在这里插入图片描述"> 很明显，浏览器都会提醒我们，执行的时候时间超时了。 <h4><a name="t6"></a><a id="requestIdleCallback_193"></a>requestIdleCallback第二个参数</h4> 但是，因为这个任务是非常低优先级的，可能任务在多次渲染后，仍没有机会很执行。 所以我们还可以传递一个参数，timeout指定超时时间，如果超时了（太长时间还没执行该任务），那么我们也去执行这些低优先级的任务。 如果didTimeout为ture，表明当前任务正在执行，且上次因为超时没有执行该任务 <pre data-index="3" class="set-code-hide prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">const sleep = (time) => { const now = Date . now() while (Date . now() < now + time) { } } const worksQueue = [ () => { console . log('任务A开始') sleep(20) console . log('任务A结束') }, () => { console . log('任务B开始') sleep(20) console . log('任务B结束') }, () => { console . log('任务C开始') sleep(20) console . log('任务C结束') }, () => { console . log('任务D开始') sleep(20) console . log('任务D结束') }, () => { console . log('任务E开始') sleep(20) console . log('任务E结束') } ] const doSomething = (idleDeadline) => { // idleDeadline.didTimeout // 是否过期过期了就强制执行该任务 // idleDeadline.timeRemaining() // 返回值是剩余时间 while ((idleDeadline. timeRemaining() > 0 || idleDeadline.didTimeout) && worksQueue.length) { console . log(idleDeadline.didTimeout) console . log(idleDeadline. timeRemaining()) const work = worksQueue. shift() work() } // 还有任务 if (worksQueue.length) requestIdleCallback(doSomething, { timeout: 10 }) } requestIdleCallback(doSomething, { timeout: 100 }) <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/20/8e55143f59e85a2b.png" alt="在这里插入图片描述"> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1739721">创业思维和商业模式的区别，从0到1：构建到突破，专业新零售全案策划</a> <a href="/Article/Index/1403847">如何制作自己的数字人</a> <a href="/Article/Index/949762">AndroidJetpack应用指南学习笔记13--DataBinding的简单使用</a> <a href="/Article/Index/1499915">opencv内存溢出del释放变量 (python)</a> <a href="/Article/Index/1191012">Flink SQL管理平台flink-streaming-platform-web安装搭建-整理</a> <a href="/Article/Index/1185013">大话HTTP协议，基础的扎实才决定了你的高度</a> <a href="/Article/Index/1519082">ARM/Linux嵌入式面经（四）：浙江大华</a> <a href="/Article/Index/1429255">基于单片机的自动停车收费系统的设计</a> <a href="/Article/Index/1668506">【保姆级图文教程】QT下载、安装、入门、配置VS Qt环境</a> <a href="/Article/Index/779553">TikTok视频播放量低，是被限流了吗？</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weixin_45747310/article/details/127969338 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

屏幕刷新率

每帧浏览器都做了什么

requestAnimationFrame