React 探秘(三)： 时间切片

家里有蜘蛛2024-10-26 20:38

文章目录

背景

前文学习了 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，则有可能为了在超时前执行函数而打乱执行顺序。

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

js 复制代码 
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：

js 复制代码 
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() 获取更精确的时间，来创建每个任务过期时间，并塞入任务队列中。

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

宏任务包装

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

js 复制代码 
// 把 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);
    };
}

首次开启任务

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

js 复制代码 
function requestHostCallback(callback) {
    scheduledHostCallback = callback;
    if (!isMessageLoopRunning) {
        isMessageLoopRunning = true;
        schedulePerformWorkUntilDeadline();
    }
}

递归任务执行

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

js 复制代码 
// 宏任务执行的方法（核心方法）
const performWorkUntilDeadline = () => {
    if (scheduledHostCallback !== null) {
        const currentTime = getCurrentTime();
        startTime = currentTime;
        const hasTimeRemaining = true;

        let hasMoreWork = true;
        try {
          // 执行任务 scheduledHostCallback 就是 workLoop
            hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
        } finally {
            if (hasMoreWork) {
                // 如果任务队列中还存在任务则继续递归执行
                schedulePerformWorkUntilDeadline();
            } else {
                isMessageLoopRunning = false;
                scheduledHostCallback = null;
            }
        }
    } else {
        isMessageLoopRunning = false;
    }
};

workLoop 开启工作循环

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

js 复制代码 
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 写法 包含小顶堆的排序算法
        }
    }
    // 还有剩余任务未执行完成返回 true
    if (currentTask !== null) {
        return true;
    } else {
        return false;
    }
}

demo 模拟

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

完整版时间切片方法：

js 复制代码 
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 就是 workLoop
            hasMoreWork = 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 写法 包含小顶堆的排序算法
        }
    }
    // 还有剩余任务未执行完成返回 true
    if (currentTask !== null) {
        return true;
    } else {
        return false;
    }
}

demo 模拟实现：

js 复制代码 
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 节点操作等等。

相关推荐
ekskef_sef7 分钟前
32岁前端干了8年，是继续做前端开发，还是转其它工作
前端
sunshine64131 分钟前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻1 小时前
Vue（四）
前端·javascript·vue.js
蜜獾云1 小时前
npm淘宝镜像
前端·npm·node.js
dz88i81 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr1 小时前
解锁 GitBook 的奥秘：从入门到精通之旅
前端·gitbook
顾平安2 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网2 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工2 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
不是鱼2 小时前
构建React基础及理解与Vue的区别
前端·vue.js·react.js
热门推荐
01构建高效的广告投放系统：应用架构的设计与实现02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO