React 源码解析 – 调度板块原理 – 实现 requestIdleCallback

React 调度原理前置所需要知道的

EventLoop 事件队列

MicroTask和macroTask的api范畴
1macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering
2microtasks: process.nextTick, Promises, Object.observe, MutationObserver

这里给了以前的文章帮助了解
Event Loop 的异步流程
Event Loop 事件循环

requestAnimationFrame

MDN requestAnimationFrame

window.requestAnimationFrame(callback);

• requestAnimationFrame(callback) 会在浏览器每次重绘前执行 callback 回调, 每次 callback 执行的时机都是浏览器刷新下一帧渲染周期的起点上。
• requestAnimationFrame(callback) 的回调 callback 回调参数 timestamp 是回调被调用的时间，也就是当前帧的起始时间。

requestIdleCallback

MDN requestIdleCallback

var handle = window.requestIdleCallback(callback[, options])

• 可选参数 options, { timeout: number } 回调 callback 的过期时间
• callback 回调的参数是 Idle?Deadline 对象，{ didTimeout: boolean(根据 timeout 计算能否超时), timeRemaining: function(当前帧剩余的空闲时间) }

参考 requestIdleCallback 的用法
requestIdleCallback 调度

时间片原理

• 在每一帧的中会先执行 macrotasks 任务 -> 再执行 UI rendering -> 最后有剩余时间执行 Idle 回调

• react 16 之前，react 通过虚拟 dom 升级是同步的，一旦有升级就会一直执行到升级完毕, 假如升级很复杂就会一直占用浏览器主线程，这时候浏览器本身的动画和客户输入操作就会出现卡慢或者没响应。

• react 16 后，采用时间片的方式处理升级卡慢的问题。
• 给每个 react 升级任务一个过期时间 timeout，维护一个 react 升级队列
• 通过 requestAnimationFrame 找到每一帧的开始时间，再计算出下一帧的开始时间
• 把优先级最高的 react 升级任务推入 event loop 的 tasks queue 中
• 每次 event loop 开始 react 升级的 tasks 时都会检查这个任务能否到期 timeout 了，只有 timeout 时才会执行
• react 升级任务会先进入 renderRoot 渲染阶段升级 fiberTree 上的内容，再进行 completeRoot 提交阶段更改 dom 的最终结果。
• react 升级任务 didTimeout 过期时执行 renderRoot ，这个渲染阶段哪怕时间很长也最大限度的保证了浏览器高优先级别的动画和客户输入的流畅运行

React 的 requestIdleCallback 方案

实现 timeout

• 通过 react 的加载时间，升级任务的 expirationTime 计算出一个 timeout 时间
• 调度时通过 timeout 计算出一个 过期的时间点

实现时间片维护

didTimeout 和 timeRemaining 实现

• 只有发现当前 task 任务的到期时间已经超过当前时间了 didTimeout 才为 true

  

总结

• 调度时通过 requestAnimationFrame api 在浏览器每次重绘前做想做的事
• requestAnimationFrame 回调 animationTick 在浏览器动画执行前 执行
• 他在 animationTick 中确定了下一帧结束的时间点
• 由于不知道 react 升级需要多少时间，所以没有在 animationTick 中判断 timeRemaining() 当前帧剩余时间来执行 react 升级
• 而是把用于 react 升级的 flushWork 通过 postMessage 推入下个 tick 事件队列中的 idleTick 回调，也就是 macrotasks
• 在 window.addEventListener(‘message’, idleTick, false); 的 idleTick 中一直拖到 frameDeadline – currentTime <= 0 当前帧完全过期时
• 才把 didTimeout = true, 再 执行 prevScheduledCallback(didTimeout); – flushWork(didTimout) 这次 react 升级。
• 这次 macrotasks 的 flushWork 先于 requestAnimationFrame 执行
• 这时 flushWork 就算升级时间超过当前帧剩余时间借用了下一帧的时间，也是最大限度的保证了浏览器动画的流畅性和优先级。