在你已经知道什么是fiber以及react为什么需要fiber，并且知道raf和ric这两个api的前提下阅读
react fiber也叫协程或者纤维，是把react任务分成一个个小任务，再通过调度在浏览器空闲时间来执行相关任务，避免阻塞浏览器渲染、响应用户行为等高优先级的任务。
本文只是模仿react实现任务在浏览器的空闲时间的中断、恢复和执行，并不代表是react的全部源码
首先用数据模拟一个fiber树(双向链表)
// 模拟耗时任务
function sleep(delay) {
for (let start = Date.now(); Date.now() - start <= delay;) {
}
}
// 模拟fiber节点
let A1 = {type: 'div', key: 'A1'}
let B1 = {type: 'div', key: 'B1', return: A1}
let B2 = {type: 'div', key: 'B2', return: A1}
let C1 = {type: 'div', key: 'C1', return: B1}
let C2 = {type: 'div', key: 'C2', return: B1}
A1.child = B1
B1.sibling = B2
B1.child = C1
C1.sibling = C2
let rootFiber = A1
使用 requestIdleCallback 来实现调度
let nextUnitOfWork=null //下一个执行单元
function workLoop(deadline){
console.log(`本次调度开始，本帧剩余时间${deadline.timeRemaining()}`)
while ((deadline.timeRemaining()>0||deadline.didTimeout)&&nextUnitOfWork){
nextUnitOfWork=performUnitOfWork(nextUnitOfWork)
}
console.log('结束控制交给浏览器')
// 没有下次执行单元即任务结束
if(!nextUnitOfWork){
console.log('render阶段结束了')
}else{
window.requestIdleCallback(workLoop,{timeout:1000})
}
}
function performUnitOfWork(fiber){
beginWork(fiber) // 处理此fiber
if(fiber.child){ // 如果有儿子,返回大儿子
return fiber.child
}// 如果没有儿子，说明此fiber已经完成了
while(fiber){
completeUnitOfWork(fiber)
if(fiber.sibling){
return fiber.sibling // 如果有弟弟就返回弟弟
}
fiber=fiber.return // 此时while循中的fiber为上一次的父亲
}
}
function completeUnitOfWork(fiber){
// 收集effect
console.log(fiber.key,'结束')
}
function beginWork(fiber){
// 调和阶段
console.log(fiber.key,'开始')
}
nextUnitOfWork=rootFiber
// debugger
// workLoop(rootFiber)
window.requestIdleCallback(workLoop,{timeout:1000})
总结：
1、设置 requestIdleCallback 回调，告诉浏览器在空闲执行 workLoop
2、在 workLoop 中，nextUnitOfWork 为下一个执行单元，便于中断后恢复执行，requestIdleCallback的回调函数有一个默认参数deadline（包含timeRemaining方法：检查本帧是否还有空闲时间，didTimeout：是否已经超过过期时间）。判断是否还有剩余时间和还有剩余任务，有就执行任务，没有则交还控制权给浏览器。如果还有任务未执行，则告诉浏览在下一帧空闲时执行任务。
使用 requestAnimationFrame 和MessageChannel 实现
// 帧截止时间
let frameDeadline = 0
// 初始当前帧率为30fps，则帧执行时间为33ms
// 上一帧执行时间
let previousFrameTime = 33
// 30fps下，每一帧执行时间
let activeFrameTime = 33
// 执行回调
let callback = null
// 上一个工作单元，默认为根节点
let nextUnitOfWork = rootFiber
// 计算rIC参数，剩余时间 帧截止时间-js执行时间 即为剩余时间
let frameDeadlineObject = {
timeRemaining:
typeof performance === "object" && typeof performance.now === "function"
? function () {
return frameDeadline - performance.now()
}
: function () {
return frameDeadline - Date.now()
},
}
// 计算调整帧率，得出帧截止时间
function animationTick(rafTime) {
// 计算出下一帧执行时间，这里的frameDeadline为上一帧的截止时间
let nextFrameTime = rafTime - frameDeadline + activeFrameTime
// 如果连续2帧的执行时间都小于帧执行时间，则说明可以提高帧率
if (nextFrameTime < activeFrameTime && previousFrameTime < activeFrameTime) {
if (nextFrameTime < 8) {
// 最高提高的120fps，
nextFrameTime = 8
}
// 取连续2帧中执行时间较大的，防止执行超过帧截止时间
activeFrameTime =
nextFrameTime < previousFrameTime ? previousFrameTime : nextFrameTime
} else {
previousFrameTime = nextFrameTime
}
// 计算出帧截止时间，大概结束时间 = 默认这是一帧的开始时间 + 一帧大概耗时
frameDeadline = rafTime + activeFrameTime
console.log('本帧结束时间',frameDeadline)
}
// 发布订阅
let channel = new MessageChannel(); // 该对象实例有且只有两个端口，并且可以相互收发事件。
let port1 = channel.port1;
let port2 = channel.port2;
// 订阅消息
port2.onmessage = () => {
// 执行任务
callback(frameDeadlineObject)
}
// 模拟实现requestIdleCallback
window.requestIdleCallbackPolyfill = function (cb) {
requestAnimationFrame(rafStartTime => {
animationTick(rafStartTime)
callback = cb
// 发布消息
port1.postMessage(null);
});
}
// 任务队列
function workLoop(deadline) {
console.log(`本次调度开始，本帧剩余时间${deadline.timeRemaining()}`)
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && nextUnitOfWork) {
// console.log(`本帧的剩余时间${deadline.timeRemaining()}`)
nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
}
console.log('结束控制交给浏览器')
// 没有下次执行单元即任务结束
if (!nextUnitOfWork) {
console.log('render阶段结束了')
} else {
window.requestIdleCallbackPolyfill(workLoop, {timeout: 1000})
}
}
// 执行任务单元
function performUnitOfWork(fiber) {
beginWork(fiber) // 处理此fiber
if (fiber.child) { // 如果有儿子,返回大儿子
return fiber.child
}// 如果没有儿子，说明此fiber已经完成了
while (fiber) {
completeUnitOfWork(fiber)
if (fiber.sibling) {
return fiber.sibling // 如果有弟弟就返回弟弟
}
fiber = fiber.return // 此时while循中的fiber为上一次的父亲
}
}
// 工作完成单元
function completeUnitOfWork(fiber) {
console.log(fiber.key, '结束')
}
// 开始任务
function beginWork(fiber) {
sleep(10)
console.log(fiber.key, '开始')
}
window.requestIdleCallbackPolyfill(workLoop, {timeout: 1000})
requestAnimationFrame(callback) 会在浏览器每次重绘前执行 callback 回调, 每次 callback 执行的时机都是浏览器刷新下一帧渲染周期的起点上。
requestAnimationFrame(callback) 的回调 callback 回调参数 timestamp 是回调被调用的时间，也就是当前帧的起始时间
总结：1、大致流程和使用requestIdleCallback一样，关键点在于如何得到当前帧的剩余时间（剩余时间=结束时间-已耗费的时间）
2、requestIdleCallbackPolyfill 借助requestAnimationFrame在animationTick函数中需要做的就是调整帧率和计算出帧的截止结束时间，activeFrameTime是一个假定时间（在react中的初始化假定时间也是33ms），保留需要执行的回调函数（若在rAF函数中执行，会加长帧的执行时间，因此将回调函数放在onmessage中去异步执行）
3、performance.now()这个web api表示为从time origin之后到当前调用时经过的时间 参考地址
4，最后在workLoop中，判断是否还有剩余时间执行任务
