React 探秘(三)： 时间切片

背景

前文学习了 fiber 架构和双缓存技术，接下来我们深入源码一起学习下时间切片的原理。

React 探秘(一)：fiber 架构

React 探秘(二)：双缓存技术

React 时间切片是 React 通过将任务分割成小的时间片，然后分批次去处理任务，在 js 线程繁忙的时候把控制权交还给浏览器本身如渲染进程等，以提高应用程序性能的一种技术。本文将介绍 React v18.3.1 时间切片并提供一个简单的 demo，以便开发者学习相关知识。

时间切片的主要优点：
提高应用程序的响应性和流畅度，分批次运行任务可以避免长时间占用 CPU。更好地控制渲染过程，让用户可以快速看到应用程序的变化，避免白屏等问题。

时间切片技术位置 fiber 架构的 Scheduler 调度器层。
Scheduler 分为两大部分：

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

本文只介绍时间切片相关内容；

时间切片原理

时间切片的原理就是把我们一次性执行完的任务，切分到不同时间间隔去完成，如果超出这个时间间隔，就会暂时挂起，交给浏览器，等到空闲了继续执行。那么问题就转化为如何实现给任务添加时间间隔？

这里涉及到 js 事件循环机制，同步代码（宏任务）-微任务-宏任务。

• 执行全局代码：当 JavaScript 代码第一次运行时，首先会执行同步代码（相当于一次宏任务），如果遇到微任务会把微任务方微任务队列，遇到宏任务放入宏任务队列
• 检查微任务队列：一旦同步代码（宏任务）完成，事件循环会检查并执行微任务队列中的所有任务，直到队列为空。
• 执行下一个宏任务：如果微任务队列为空，事件循环会从宏任务队列中取出下一个任务并执行。
• 重复上述步骤：这个过程会不断循环，直到所有任务执行完毕。

宏任务：会在下次事件循环中执行，不会阻塞本次页面渲染更新。

微任务：「微任务是在本次页面更新前会全部执行」，这一点与同步执行无异，不会让出主线程。

常见的宏任务方法有：

• setTimeout
• messageChannel
• setImmediate

此外还有 requestIdleCallback 是在浏览器渲染后有空闲时间时执行。

requestIderCallback 方法

window.requestIdleCallback() 方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间 timeout，则有可能为了在超时前执行函数而打乱执行顺序。

通过这个函数我们其实就可以时间一个简单的时间切片：

function workLoop(deadline) {let shouldYield = false;// 存在fiber并且时间空闲while (nextUnitOfWork && !shouldYield) {nextUnitOfWork = performUnitOfWork(nextUnitOfWork);shouldYield = deadline.timeRemaining() < 1; // 剩余时间是否小于1ms 代表任务繁忙}// 没有fiber并且wip存在if (!nextUnitOfWork && workInProgress) {commitRoot();}// 繁忙时继续执行主任务requestIdleCallback(workLoop);
}

我们执行某个 fiberNode 的时候，浏览器主线程被占用，这个时候就可以暂停 fiberNode 的继续执行，等浏览器空闲时，继续 nextUnitOfWork。这就实现了可暂停可继续。但是呢这 api 有限制：

• requestIdleCallback 的执行时机不是完全可控的，这可能导致在不同环境中表现不一致。
• requestIdleCallback 是利用帧之间空闲时间来执行 js，它是一个低优先级的处理策略，但实际上 fiber 的处理上，并不算是一个低优先级任务。

setImmediate

setImmediate 这个是最早执行的宏任务，但是也可能会有兼容性问题。

MessageChannel

MessageChannel 的执行时机比 setTimeout 靠前，而且执行实际准确，但是会有兼容性问题。

setTimeout

setTimeout 执行时机在 messageChannel 之后，如下 demo：

function workLoop() {setTimeout(() => {nextUnitOfWork = performUnitOfWork(nextUnitOfWork);workLoop()}, 0)
}

但是 setTimeout 的递归层级过深的话，延迟就不是1ms，而是4ms，这样会造成延迟时间过长，时间浪费。

看了上面这些方法多多少少都有些问题，那么下面我们讲一下 react 怎么实现时间切片的。

React 18 时间切片源码

源码位置： https://github.com/facebook/react/blob/v18.3.1/packages/scheduler/src/forks/Scheduler.js

可以看到 react 18 中其实就是做了个兼容性判断

• 优先 setImmediate
• 其次 messageChannel
• 最后 setTimeout

直接看源码很容易懵逼，因为源码中包含大量的兼容判断和优先级相关代码，容易混淆我们的视线，因此我们把复杂问题拆解一下，从源码入手，手撸一个 mini 版时间切片。

手撸时间切片

问题拆解

• 入口构建任务队列
• • 创建时间切片，通过当前时间 + 延迟得到过期时间，塞入任务队列
• 创建宏任务
• • 通过 setImmediate 等方法创建宏任务。
• 执行宏任务-循环执行时间切片
• • 递归调用时间切片方法，用于挂起、重启。
• 开启工作循环
• • 循环执行队列任务，超出时间不执行。

构建任务队列

使用 performance.now() 获取更精确的时间，来创建每个任务过期时间，并塞入任务队列中。

// 入口创建 task 并添加过期时间，执行任务
function scheduleCallback(callbcak) {let unitOfwork = {callbcak,expirationTime: performance.now() + 5,}taskQueue.push(unitOfwork)// 开启宏任务requestHostCallback(workLoop)
}

宏任务包装

通过如下三个方法 localSetImmediate MessageChannel localSetTimeout 包装我们的 callback 为宏任务

// 把 performWorkUntilDeadline 方法放入宏任务当中
if (typeof localSetImmediate === 'function') {schedulePerformWorkUntilDeadline = () => {localSetImmediate(performWorkUntilDeadline);};
} else if (typeof MessageChannel !== 'undefined') {const channel = new MessageChannel();const port = channel.port2;channel.port1.onmessage = performWorkUntilDeadline;schedulePerformWorkUntilDeadline = () => {port.postMessage(null);};
} else {schedulePerformWorkUntilDeadline = () => {localSetTimeout(performWorkUntilDeadline, 0);};
}

首次开启任务

拿到当前正在处理的任务，开启执行包装好的宏任务

function requestHostCallback(callback) {scheduledHostCallback = callback;if (!isMessageLoopRunning) {isMessageLoopRunning = true;schedulePerformWorkUntilDeadline();}
}

递归任务执行

执行宏任务，获取当前时间,判断如果还有未完成的任务则开启递归。

// 宏任务执行的方法（核心方法）
const performWorkUntilDeadline = () => {if (scheduledHostCallback !== null) {const currentTime = getCurrentTime();startTime = currentTime;const hasTimeRemaining = true;let hasMoreWork = true;try {// 执行任务 scheduledHostCallback 就是 workLoophasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);} finally {if (hasMoreWork) {// 如果任务队列中还存在任务则继续递归执行schedulePerformWorkUntilDeadline();} else {isMessageLoopRunning = false;scheduledHostCallback = null;}}} else {isMessageLoopRunning = false;}
};

workLoop 开启工作循环

循环执行队列中的任务，currentTask 为空结束循环，判断时间是否过期，过期则不执行任务，把控制权还给浏览器。

function workLoop(hasTimeRemaining, initialTime) {let currentTime = initialTime;currentTask = peek(taskQueue);while (currentTask) {// 判断是时间是否过期if ((currentTask.expirationTime > currentTime) && (shouldYieldToHost() || !hasTimeRemaining)) {break} else {// 执行具体回调currentTask.callbcak()currentTask = taskQueue.shift()// currentTask = peek(taskQueue); // react 18 写法 包含小顶堆的排序算法}}// 还有剩余任务未执行完成返回 trueif (currentTask !== null) {return true;} else {return false;}
}

demo 模拟

下面使具体案例来模拟一下时间切片带来的改善:

完整版时间切片方法：

let taskQueue = [] // 任务队列
let isMessageLoopRunning = false; // 标记 宏任务 正在运行
let scheduledHostCallback = null; // 要执行的函数 workLoop
let currentTask = null; // 当前执行的任务
let startTime = null;  // 任务开始的时间const localSetTimeout = typeof setTimeout === 'function' ? setTimeout : null;
const localClearTimeout =typeof clearTimeout === 'function' ? clearTimeout : null;
const localSetImmediate =typeof setImmediate !== 'undefined' ? setImmediate : null;// 获取当前时间
const getCurrentTime = () => performance.now();
// 根据时间判断是否把控制权交给浏览器
function shouldYieldToHost() {const timeElapsed = getCurrentTime() - startTime;if (timeElapsed < 5) {return false;}return true;
}
// 获取数组第一项
function peek(heap) {return heap.length === 0 ? null : heap[0];
}
// 入口创建 task 并添加过期时间，执行任务
function scheduleCallback(callbcak) {let unitOfwork = {callbcak,expirationTime: performance.now() + 5,}taskQueue.push(unitOfwork)// 开启宏任务requestHostCallback(workLoop)
}// 宏任务执行的方法（核心方法）
const performWorkUntilDeadline = () => {if (scheduledHostCallback !== null) {const currentTime = getCurrentTime();startTime = currentTime;const hasTimeRemaining = true;let hasMoreWork = true;try {// 执行任务 scheduledHostCallback 就是 workLoophasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);} finally {if (hasMoreWork) {// 如果任务队列中还存在任务则继续递归执行schedulePerformWorkUntilDeadline();} else {isMessageLoopRunning = false;scheduledHostCallback = null;}}} else {isMessageLoopRunning = false;}
};// 把 performWorkUntilDeadline 方法放入宏任务当中
if (typeof localSetImmediate === 'function') {schedulePerformWorkUntilDeadline = () => {localSetImmediate(performWorkUntilDeadline);};
} else if (typeof MessageChannel !== 'undefined') {const channel = new MessageChannel();const port = channel.port2;channel.port1.onmessage = performWorkUntilDeadline;schedulePerformWorkUntilDeadline = () => {port.postMessage(null);};
} else {schedulePerformWorkUntilDeadline = () => {localSetTimeout(performWorkUntilDeadline, 0);};
}function requestHostCallback(callback) {scheduledHostCallback = callback;if (!isMessageLoopRunning) {isMessageLoopRunning = true;schedulePerformWorkUntilDeadline();}
}function workLoop(hasTimeRemaining, initialTime) {let currentTime = initialTime;currentTask = peek(taskQueue);while (currentTask) {// 判断是时间是否过期if ((currentTask.expirationTime > currentTime) && (shouldYieldToHost() || !hasTimeRemaining)) {break} else {// 执行具体回调currentTask.callbcak()currentTask = taskQueue.shift()// currentTask = peek(taskQueue); // react 18 写法 包含小顶堆的排序算法}}// 还有剩余任务未执行完成返回 trueif (currentTask !== null) {return true;} else {return false;}
}

demo 模拟实现：

let taskIndex = 0;
let taskTotal = 5000; // 任务数量
const start = Date.now();function handleTask() {for (let j = 0; j < 5000; j++) {// 执行一些耗时操作const btn1Attr = document.getElementById('btn1').attributes;const btn2Attr = document.getElementById('btn2').attributes;const btn3Attr = document.getElementById('btn3').attributes;}if(taskIndex >= taskTotal) {console.log(`任务调度完成，用时：`, Date.now() - start, 'ms!');}
}while (taskIndex <= taskTotal) {scheduleCallback(handleTask) // 时间切片执行// handleTask()  // 普通执行taskIndex++
}document.getElementById('btn1').onclick = function () {console.log(11111, 'click')
}// html
<body><div id="root"><button id="btn1">按钮1</button><button id="btn2">按钮2</button><button id="btn3">按钮3</button><button id="btn4">按钮4</button></div><script src="./sh.js"></script>
</body>

上面这一串代码在使用我们封装的 scheduleCallback 执行任务时，dom 渲染几乎秒开，但是如果使用普通的调用页面则会卡顿 3s 左右，才会出现。

总结

react 使用时间切片提升渲染性能，在熟知原理后，同样我们在业务中也有很多优化场景可以使用到。例如：高频埋点批量切片上传，大量 dom 节点操作等等。