实现 React requestIdleCallback 调度能力

时间：2022-01-01 02:29:12

实现 React requestIdleCallback 调度能力

1.前言

Elab掘金: React Fiber架构浅析[1] 已对 React Fiber架构 实现进行了浅析。React内部实现了该方法 requestIdleCallback，即一帧空闲执行任务，但Schedular + Lane 模式远比 requestIdleCallback 复杂的多。这里我们先通过了解 requestIdleCallback都做了些什么，再尝试通过 requestAnimationFrame + MessageChannel 来模拟 React 对一帧空闲判断的实现。

2.requestIdleCallback

window.requestIdleCallback()[2]

2.1 概念理解

实现 React requestIdleCallback 调度能力

图: 简单描述帧生命周期

RequestIdleCallback 简单的说，判断一帧有空闲时间，则去执行某个任务。

目的是为了解决当任务需要长时间占用主进程，导致更高优先级任务(如动画或事件任务)，无法及时响应，而带来的页面丢帧(卡死)情况。

故RequestIdleCallback 定位处理的是: 不重要且不紧急的任务。

RequestIdleCallback 参数说明:

  • window.requestIdleCallback(callback[, options]); callback为要执行的回调函数，该函数会接收deadline作为对象。
  1. //回调函数接收deadline
  2.  
  3. typeDeadline={
  4.  
  5. timeRemaining:()=>number//当前剩余的可用时间。即该帧剩余时间。
  6.  
  7. didTimeout:boolean//是否超时。
  8.  
  9. }
  10.  
  11.  
  12.  
  13. //接收回调任务
  14.  
  15. typeRequestIdleCallback=(cb:(deadline:Deadline)=>void,options?:Options)=>number

2.2 实现demo

requestIdleCallback 处理任务说明:

Demo: https://linjiayu6.github.io/FE-RequestIdleCallback-demo/

Github: RequestIdleCallback 实验[3]

实现 React requestIdleCallback 调度能力

  1. constbindClick=id=>
  2.  
  3. element(id).addEventListener('click',Work.onAsyncUnit)
  4.  
  5. //绑定click事件
  6.  
  7. bindClick('btnA')
  8.  
  9. bindClick('btnB')
  10.  
  11. bindClick('btnC')
  12.  
  13.  
  14.  
  15. varWork={
  16.  
  17. //有1万个任务
  18.  
  19. unit:10000,
  20.  
  21. //处理单个任务需要处理如下
  22.  
  23. onOneUnit:function(){for(vari=0;i<=500000;i++){}},
  24.  
  25.  
  26.  
  27. //处理任务
  28.  
  29. onAsyncUnit:function(){
  30.  
  31. //空闲时间基准为1ms
  32.  
  33. constFREE_TIME=1
  34.  
  35. //执行到第几个任务
  36.  
  37. let_u=0
  38.  
  39.  
  40.  
  41. functioncb(deadline){
  42.  
  43. //当任务还没有被处理完&一帧还有的空闲时间>1ms
  44.  
  45. while(_u<Work.unit&&deadline.timeRemaining()>FREE_TIME){
  46.  
  47. Work.onOneUnit()
  48.  
  49. _u++
  50.  
  51. }
  52.  
  53. //任务干完,执行回调
  54.  
  55. if(_u>=Work.unit){
  56.  
  57. //执行回调
  58.  
  59. return
  60.  
  61. }
  62.  
  63. //任务没完成,继续等空闲执行
  64.  
  65. window.requestIdleCallback(cb)
  66.  
  67. }
  68.  
  69. window.requestIdleCallback(cb)
  70.  
  71. }
  72.  
  73. }

以上是 window.requestIdleCallback 的实现流程。

核心: 即浏览器去在一帧有空闲的情况下，去执行某个低优先级的任务。

2.3 缺陷

MAY BE OFFTOPIC: requestIdleCallback is called only 20 times per second - Chrome on my 6x2 core Linux machine, it's not really useful for UI work. requestAnimationFrame is called more often, but specific for the task which name suggests.[4]

  • 实验 api，兼容情况一般。
  • 实验结论: requestIdleCallback FPS只有20ms，正常情况下渲染一帧时长控制在16.67ms (1s / 60 = 16.67ms)。该时间是高于页面流畅的诉求。
  • 个人认为: RequestIdleCallback 不重要且不紧急的定位。因为React渲染内容，并非是不重要且不紧急。不仅该api兼容一般，帧渲染能力一般，也不太符合渲染诉求，故React 团队自行实现。

3.React requestIdleCallback 实现实验

想要实现requestIdleCallback的处理，有2个点需要解决:

  • When: 如何判断一帧是否有空闲?
  • Where: 如果有了空闲，在一帧中哪里去执行任务?

3.1 requestAnimationFrame 计算一帧到期时间点

requestAnimationFrame[5]

是由系统来决定回调函数的执行时机。 它会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随屏幕的刷新频率，不会引起丢帧和卡顿。

浏览器刷新率在60Hz, 渲染一帧时长控制在16.67ms (1s / 60 = 16.67ms)。

DOMHighResTimeStamp[6]

requestAnimationFrame 参数如下:

  1. //回调函数接收rafTime即开始执行一帧的开始时间
  2.  
  3. //接收回调任务
  4.  
  5. typeRequestAnimationFrame=(cb:(rafTime:number)=>void)

计算一帧用到期的时间点。

  1. //计算出当前帧结束时间
  2.  
  3. vardeadlineTime;
  4.  
  5. window.selfRequestIdleCallback=function(cb){
  6.  
  7. requestAnimationFrame(rafTime=>{
  8.  
  9. //结束时间=开始时间+一帧用时16.667ms
  10.  
  11. deadlineTime=rafTime+16.667
  12.  
  13. //......
  14.  
  15. })
  16.  
  17. }

以上使用 requestAnimationFrame 来计算结束的时间点。

我们暂且将空闲时间的判断放到后面去解决，先来看在时间充裕情况下，在什么时机去执行某任务。

3.2 MessageChannel 宏任务 执行任务

MessageChannel()[7]

MessageChannel创建了一个通信的管道，这个管道有两个端口，每个端口都可以通过postMessage发送数据，而一个端口只要绑定了onmessage回调方法，就可以接收从另一个端口传过来的数据。

在看着方法实现之前，你可能有疑问:

为什么使用宏任务处理呢?

核心是将主进程让出，将浏览器去更新页面。

利用事件循环机制，在下一帧宏任务的时候，执行未完成的任务。

为什么不是微任务?

走远了。对一个事件循环机制来说，在页面更新前，会将所有的微任务全部执行完，故无法达成将主线程让出给浏览器的目的。

既然用了宏任务，那为什么不使用 setTimeout 宏任务执行呢?

如果不支持MessageChannel的话，就会去用 setTimeout 来执行，只是退而求其次的办法。

现实情况是: 浏览器在执行 setTimeout() 和 setInterval() 时，会设定一个最小的时间阈值，一般是 4ms。

  1. vari=0
  2.  
  3. var_start=+newDate()
  4.  
  5. functionfn(){
  6.  
  7. setTimeout(()=>{
  8.  
  9. console.log("执行次数,时间",++i,+newDate()-_start)
  10.  
  11. if(i===10){
  12.  
  13. return
  14.  
  15. }
  16.  
  17. fn()
  18.  
  19. },0)
  20.  
  21. }
  22.  
  23. fn()

实现 React requestIdleCallback 调度能力

故，利用MessageChannel来执行宏任务，且模拟setTimeout(fn, 0)，还没有时延哦。

实现如下:

  1. //计算出当前帧结束时间点
  2.  
  3. vardeadlineTime
  4.  
  5. //保存任务
  6.  
  7. varcallback
  8.  
  9. //建立通信
  10.  
  11. varchannel=newMessageChannel()
  12.  
  13. varport1=channel.port1;
  14.  
  15. varport2=channel.port2;
  16.  
  17.  
  18.  
  19. //接收并执行宏任务
  20.  
  21. port2.onmessage=()=>{
  22.  
  23. //判断当前帧是否还有空闲，即返回的是剩下的时间
  24.  
  25. consttimeRemaining=()=>deadlineTime-performance.now();
  26.  
  27. const_timeRemain=timeRemaining();
  28.  
  29. //有空闲时间且有回调任务
  30.  
  31. if(_timeRemain>0&&callback){
  32.  
  33. constdeadline={
  34.  
  35. timeRemaining,//计算剩余时间
  36.  
  37. didTimeout:_timeRemain<0//当前帧是否完成
  38.  
  39. }
  40.  
  41. //执行回调
  42.  
  43. callback(deadline)
  44.  
  45. }
  46.  
  47. }
  48.  
  49. window.requestIdleCallback=function(cb){
  50.  
  51. requestAnimationFrame(rafTime=>{
  52.  
  53. //结束时间点=开始时间点+一帧用时16.667ms
  54.  
  55. deadlineTime=rafTime+16.667
  56.  
  57. //保存任务
  58.  
  59. callback=cb
  60.  
  61. //发送个宏任务
  62.  
  63. port1.postMessage(null);
  64.  
  65. })
  66.  
  67. }

4.React 源码 requestHostCallback

SchedulerHostConfig.js[8]

执行宏任务(回调任务)

  • requestHostCallback: 触发一个宏任务 performWorkUntilDeadline。
  • performWorkUntilDeadline: 宏任务处理。
    • 是否有富裕时间, 有则执行。
    • 执行该回调任务后，是否还有下一个回调任务, 即判断 hasMoreWork。
    • 有则继续执行 port.postMessage(null);
  1. letscheduledHostCallback=null;
  2.  
  3. letisMessageLoopRunning=false;
  4.  
  5.  
  6. constchannel=newMessageChannel();
  7.  
  8. //port2发送
  9.  
  10. constport=channel.port2;
  11.  
  12. //port1接收
  13.  
  14. channel.port1.onmessage=performWorkUntilDeadline;
  15.  
  16. constperformWorkUntilDeadline=()=>{
  17.  
  18. //有执行任务
  19.  
  20. if(scheduledHostCallback!==null){
  21.  
  22. constcurrentTime=getCurrentTime();
  23.  
  24. //Yieldafter`yieldInterval`ms,regardlessofwhereweareinthevsync
  25.  
  26. //cycle.Thismeansthere'salwaystimeremainingatthebeginningof
  27.  
  28. //themessageevent.
  29.  
  30. //计算一帧的过期时间点
  31.  
  32. deadline=currentTime+yieldInterval;
  33.  
  34. consthasTimeRemaining=true;
  35.  
  36. try{
  37.  
  38. //执行完该回调后,判断后续是否还有其他任务
  39.  
  40. consthasMoreWork=scheduledHostCallback(
  41.  
  42. hasTimeRemaining,
  43.  
  44. currentTime,
  45.  
  46. );
  47.  
  48. if(!hasMoreWork){
  49.  
  50. isMessageLoopRunning=false;
  51.  
  52. scheduledHostCallback=null;
  53.  
  54. }else{
  55.  
  56. //Ifthere'smorework,schedulethenextmessageeventattheend
  57.  
  58. //oftheprecedingone.
  59.  
  60. //还有其他任务,推进进入下一个宏任务队列中
  61.  
  62. port.postMessage(null);
  63.  
  64. }
  65.  
  66. }catch(error){
  67.  
  68. //Ifaschedulertaskthrows,exitthecurrentbrowsertasksothe
  69.  
  70. //errorcanbeobserved.
  71.  
  72. port.postMessage(null);
  73.  
  74. throwerror;
  75.  
  76. }
  77.  
  78. }else{
  79.  
  80. isMessageLoopRunning=false;
  81.  
  82. }
  83.  
  84. //Yieldingtothebrowserwillgiveitachancetopaint,sowecan
  85.  
  86. //resetthis.
  87.  
  88. needsPaint=false;
  89.  
  90. };
  91.  
  92. //requestHostCallback一帧中执行任务
  93.  
  94. requestHostCallback=function(callback){
  95.  
  96. //回调注册
  97.  
  98. scheduledHostCallback=callback;
  99.  
  100. if(!isMessageLoopRunning){
  101.  
  102. isMessageLoopRunning=true;
  103.  
  104. //进入宏任务队列
  105.  
  106. port.postMessage(null);
  107.  
  108. }
  109.  
  110. };
  111.  
  112. cancelHostCallback=function(){
  113.  
  114. scheduledHostCallback=null;
  115.  
  116. };

参考资料

[1]Elab掘金: React Fiber架构浅析: https://juejin.cn/post/7005880269827735566

[2]window.requestIdleCallback(): https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback

[3]RequestIdleCallback 实验: https://github.com/Linjiayu6/FE-RequestIdleCallback-demo

[4]MAY BE OFFTOPIC: requestIdleCallback is called only 20 times per second - Chrome on my 6x2 core Linux machine, it's not really useful for UI work. requestAnimationFrame is called more often, but specific for the task which name suggests.: https://github.com/facebook/react/issues/13206#issuecomment-418923831

[5]requestAnimationFrame: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

[6]DOMHighResTimeStamp: https://developer.mozilla.org/zh-CN/docs/Web/API/DOMHighResTimeStamp

[7]MessageChannel(): https://developer.mozilla.org/zh-CN/docs/Web/API/MessageChannel/MessageChannel

[8]SchedulerHostConfig.js: https://github.com/facebook/react/blob/v17.0.1/packages/scheduler/src/forks/SchedulerHostConfig.default.js

原文链接：https://mp.weixin.qq.com/s/OK0TBW1obk4Y7lJWMkwgNQ

标签：

相关文章