react源码分析：实现react时间分片

我们常说的调度，可以分为两大模块，时间分片和优先级调度

• 时间分片的异步渲染是优先级调度实现的前提
• 优先级调度在异步渲染的基础上引入优先级机制控制任务的打断、替换。

本节将从时间分片的实现剖析react的异步渲染原理，阅读本文你讲可以了解

1. 时间分片是什么
2. 为什么需要时间分片
3. 时间分片在react中是如何运行的
4. 时间分片的极简实现

什么是时间分片

上文提到过，时间分片其实就是一个固定而连续且有间隔的时间区间

固定：时间分片是工作时长是固定的
连续：分片之间是连续的，当前分片内有工作没做完，会留到下个分片继续
有间隔：在进入下一个分片前，会有一定时间的间隔

这些解释比较抽象，可以更加通俗去理解

固定：每天固定工作8小时
连续：每天都要上班
有间隔：明天上班前会休息一段时间

为什么需要时间分片

我们知道，react最重要，也是最耗时的任务是节点遍历。

设想一个页面上有一万个DOM节点，如果我们用同步的方式一个个遍历完需要花费多少时间。而且如果是同步遍历的话，遍历的过程中，JS线程一直会霸占主线程，导致阻塞了浏览器的其他线程，导致卡顿的情况出现。

换个思路解决这个遍历问题，能不能遍历一会，休息一会，休息的过程中就可以把主线程交还给渲染线程和事件线程，这样就能及时渲染节点和响应用户事件，避免造成卡顿。

为了实现遍历一会，休息一会，我们可以将整个过程分解为以下三个步骤

1. 分片开启
2. 分片中断、分片重启
3. 延迟执行

这三个步骤与时间分片的三个特性一一对应

实现分片开启 - 固定

时间分片是独立于React的节点遍历流程的，所以只需要把节点遍历的入口函数以回调函数的形式传入即可，这样就可以让时间分片来决定节点遍历执行时机。

// 节点遍历的入口函数
function Reconcile协调() {
   
    节点遍历()
}
function Schedule调度() {
   
    创建分片(Reconcile协调)
}
1
2
3
4
5
6
7
8
9

第一步，需要将时间分片要调度的函数抽象为一个任务对象

function 创建分片(需要被调度的函数) {
   
    const 新的任务 = {
   
        callback: 需要被调度的函数
    }
}
1
2
3
4
5
6
7

第二步，设定分片工作时长，为了方便后续，可以直接计算过期时间。分片工作时长一般为5ms，但Scheduler会根据任务优先级有所调整，这里为了更好理解，先默认5ms。

const taskQueue = []
function 创建分片(需要被调度的函数) {
   
    const 新的任务 = {
   
        callback: 需要被调度的函数,
        expirationTime: performance.now() + 5000
    }
    taskQueue.push(新的任务)
    发起异步调度()
}
1
2
3
4
5
6
7
8
9
10
11

每次分片的创建其实都是新一轮调度的开始，所以在末尾会发起异步调度

为什么用performance.now()而不用Date.now()

performance.now()返回当前页面的停留时间，Date.now()返回当前系统时间。但不同的是performance.now()精度更高，且比Date.now()更可靠

1. performance.now()返回的是微秒级的，Date.now()只是毫秒级
2. performance.now()一个恒定的速率慢慢增加的，它不会受到系统时间的影响。Date.now()受到系统时间影响，系统时间修改Date.now()也会改变

实现分片中断、重启 - 连续

分片中断

我们在第一章已经将React的虚拟DOM结构从树形结构优化成链表结构，所以能轻松使用while循环实现可中断的遍历

那么如果要将遍历任务和时间分片