写文章
  1. 码农之家首页
  2. 前端教程

React Scheduler 的原理透析

我心飞翔 • • 前端教程 • 阅读 3

一、引言

在前端开发中，如何高效地管理和调度任务至关重要。任务调度的合理性直接关系到应用的性能，用户体验以及开发效率。这就是为什么React团队开发了Scheduler——一款独特且强大的任务调度工具。

Scheduler背景和目的

Scheduler诞生于一个充满挑战的时代。开发者们需要管理和优化大量的并行任务，以应对日益增长的复杂性和用户对于流畅用户体验的期待。Scheduler的目标就是解决这个问题，通过提供灵活的API和调度策略来帮助开发者高效地管理任务。

Scheduler的主要功能和特点

Scheduler 的主要优点在于其能够优化任务的执行。它使用基于优先级的调度策略来决定如何、何时执行任务。这意味着更重要的任务(如用户交互)可以被优先处理，而次要的任务可以被暂停或推迟，直到有足够的资源来处理它们。

本文主要内容和结构

在本文中，我们将深入研究Scheduler的工作原理和实现方式。首先，我们将探索Scheduler的核心概念和API，并解析它们如何与React应用交互。然后，我们将深入探讨Scheduler的内部实现，包括它是如何在内部调度任务以及各种优先级是如何运作的。最后，我们将分析一些实际的案例，展示如何在实际的React应用中使用Scheduler。

二、Scheduler 的核心概念

Scheduler 是管理和调度任务的核心模块，它主要负责将各种任务按照优先级分配到 JS 主线程执行。为了更好地理解 Scheduler 的工作原理，我们将会介绍其基本架构、核心概念以及工作流程。

基本架构和组成部分

Scheduler 的基础架构主要包含三个核心部分，分别是调度器(Scheduler)，任务队列(Task Queue)，和回调队列(Callback Queue)。

/* 代码示例 */
const Scheduler = {
  /* 调度器 */
  scheduler() { /* ... */ },

  /* 任务队列 */
  taskQueue: [],

   /* 回调队列 */
  callbackQueue: [],
};

核心概念

Fiber（纤程） 代表了一个工作单元。Fiber 是 React 16 的核心算法之一，用于追踪组件树的变化。

Lane (通道） 用于控制任务的优先级，不同的更新会赋值不同的 Lane。

CallbackNode 是一个保存回调信息的对象，包括了回调函数、执行优先级以及是否过期等信息。

工作流程和执行逻辑

Scheduler 的工作流程主要包括任务注册，任务调度和任务执行三个步骤。

  1. 注册任务：根据任务的类型和优先级，创建一个新的任务并加入任务队列中。

  2. 调度任务：Scheduler 将会按照任务的优先级对任务队列进行排序，并根据当前环境来决定是否立即执行任务。

  3. 执行任务：Scheduler 会从任务队列照顺序取出任务并执行，当有高优先级的任务进入队列时，当前的任务会被中断，优先执行高优先级的任务。

以下是一个简化的代码示例：

/* 代码示例 */
const Scheduler = {
   scheduler() {
     /* 将任务加入任务队列 */
     this.addTask(task);

     /* 调度并执行任务 */
     this.scheduleTasks();
     this.runTasks();
   },
};

以上就是 Scheduler 的核心概念以及其工作机制。

三、Scheduler 的优先级管理

随着前端项目及业务复杂程度的加大，对于任务的优先级管理是至关重要的。React 也不例外，它的并发模式就是通过 Scheduler 来管理任务优先级。下面我们就来详细介绍一下 Scheduler 的优先级管理。

Scheduler 如何根据不同的场景和因素划分任务的优先级

Scheduler 的设计初衷就是要在 JS 主线程中按优先级顺序执行任务。它会根据任务的类型、发起时间及用户交互等因素来给任务分配优先级。如同步任务比异步任务优先级更高、用户交互类任务优先级也会提高等。

/* 代码示例 */
// 创建一个同步任务
Scheduler.unstable_scheduleCallback(
  Scheduler.unstable_ImmediatePriority,
  doSomething
);

// 创建一个异步任务
Scheduler.unstable_scheduleCallback(
  Scheduler.unstable_IdlePriority,
  doSomethingElse
);

Scheduler 如何利用 Lane 模型表示和操作任务的优先级

在 Scheduler 中，为表示任务的优先级，引入了 Lane 的概念。在执行任务时，根据任务的 Lane，可以决定其执行的优先级，比如 ImmediateLane 表示立即执行的优先级，UserBlockingLane 表示需要立刻反馈用户交互的优先级等。

Scheduler 如何处理优先级冲突和过期任务的情况

在实际应用中，难免会遇到一些任务优先级发生冲突的情况，Scheduler 对此进行了优雅的处理。当高优先级任务插队时，正在执行的低优先级任务会被打断，以保证高优先级任务能够优先执行。一旦高优先级任务执行完成，再接着执行被打断的低优先级任务。

对于过期的任务，即在规定的时间内没有完成的任务，Scheduler 会提升它们的优先级，以保证任务能够及时完成。

四、Scheduler 的空闲时间利用

在开发复杂的 Web 应用时，如何充分利用浏览器的空闲时间无疑是提升应用性能的一种重要方式。React 在这个方面也做得非常出色，它的 Scheduler 可以充分利用空闲时间来执行低优先级的任务，减轻主线程的压力，提高应用的性能。现在我们就来详细讲解一下这个过程。

Scheduler 如何利用浏览器提供的 requestIdleCallback API 获取空闲时间

Scheduler 利用浏览器提供的 requestIdleCallback API 在浏览器空闲时执行低优先级的任务。requestIdleCallback 函数允许开发者将一些任务排入队列，在浏览器空闲时期执行这些任务。

/* 代码示例 */
// Scheduler 利用 requestIdleCallback API
window.requestIdleCallback((idleDeadline) => {
  while (!idleDeadline.didTimeout && idleDeadline.timeRemaining() > 0) {
    const task = Scheduler.nextTask();
    task && task();
  }
});

Scheduler 如何在空闲时间内执行低优先级的任务，避免阻塞主线程

Scheduler 内部的任务调度机制保证了低优先级的任务能在主线程空闲的时候得到执行，从而在不阻塞主线程的前提下提高了任务的执行效率。

Scheduler 如何根据任务的过期时间和浏览器的空闲时间决定任务的执行时机

Scheduler 会通过跟踪每一个任务的过期时间，以及利用浏览器的 requestIdleCallback API 获取的空闲时间信息，灵活决定每个任务的执行时机，充分利用空闲时间，减轻主线程的压力，实现流畅、高效的用户体验提供了保障。

五、Scheduler 的任务切片机制

打造流畅、高效的用户体验是所有前端框架的共同目标，因此如何充分地利用浏览器的计算资源、如何避免长时间的任务阻塞了浏览器的渲染，这些都成了非常重要的问题。React 的并发模式和任务切片机制（time slicing）为解决这些问题提供了新的解决方案。下面让我们一起详细地了解一下这个机制的实现方式。

Scheduler 如何将一个大的任务分成多个小的任务，实现任务的切片

Scheduler 的任务切片机制，就是将一个大任务分解成一系列的小任务，然后交由浏览器的主线程依次执行。这样做的好处是可以避免长时间的任务阻塞了浏览器的渲染，从而实现了流畅、高效的用户体验。

/* 代码示例 */
function performUnitOfWork(workInProgress) {
  // 取出一部分工作单元
  ...
  // 返回剩余的工作单元
  return nextUnitOfWork;
}

Scheduler 如何在每个任务之间插入一个检查点，实现任务的中断和恢复

Scheduler 会在每个任务切片执行完后，检查浏览器的空闲时间，如果空闲时间已经不足，就将当前的任务切片暂停，以便浏览器去处理其他高优先级的任务（如界面渲染）。当浏览器再次空闲下来时，Scheduler 会在暂停的地方继续执行任务。

/* 代码示例 */
while ((nextUnitOfWork || pendingCommit) && !shouldYield) {
  // 执行任务切片
  ...
  // 检查浏览器的空闲时间
  if(shouldYield) {
    // 如果空闲时间不足，暂停当前的任务
    ...
  }
}

Scheduler 如何根据任务的优先级和浏览器的空闲时间决定任务的执行顺序

在 Scheduler 中，任务的优先级是根据它的类型、触发方式以及触发时间等因素来决定的。当浏览器在闲置时，Scheduler 会选择优先级最高的任务进行执行。如果两个任务的优先级相同，那么根据他们排队的顺序来决定谁先执行。

Scheduler 中的任务切片机制，更好的利用 EventLoop 使得我们能更好地利用浏览器资源，提高了应用的性能和用户体验。

六、Scheduler 的并发模式支持

Scheduler 在支持 React 并发模式方面发挥了重要的作用，通过它，我们能创造出更加平滑、流畅的用户体验。下面，我们将详细介绍一下它是如何做到这一点的。

Scheduler 如何支持 React 的并发模式，实现不同的渲染效果

在并发模式中，React 通过采用 Scheduler 这个任务调度库，实现了一个环境独立、可配置的调度器，通过这样一种高级的调度策略，能够更加有效地进行任务管理，以优化渲染体验。

Scheduler 通过对任务进行分片，将大任务拆分为多个小任务，并根据优先级依次进行处理。这样，对于长时间运行的任务，可以将其切片处理，避免阻塞主线程，从而创造出更加流畅的用户体验。

/* 代码示例 */
// 执行任务，如果任务未完成，会将其挂起，并在浏览器空闲时继续执行
const handle = Scheduler.unstable_scheduleCallback(
  Scheduler.unstable_UserBlockingPriority,
  () => {
    /* 任务代码 */
  }
);

Scheduler 如何在渲染过程中切换不同的模式，如同步模式，并发模式等

React的并发模式是从React 16的Fiber架构之后引入的一个概念，它允许我们在渲染过程中选择合适的模式。Scheduler 本质上是一个任务调度器，可以处理任务的优先级，在合适的时机进行任务的调度。

在并发模式下，Scheduler 能够让React 在主线程空闲的时候进行渲染，从而避免了长时间的渲染任务阻塞主线程。当用户进行交互时，Scheduler 会提高用户交互的优先级，确保界面可以快速响应。

同步模式和并发模式可以根据需要在现有的渲染树上任意切换，为我们的应用提供了极大的灵活性。

Scheduler 如何配合 React 的新特性，如 useTransition，useDeferredValue 等

React 的新特性，如 useTransition，useDeferredValue 等，都是构建在 Scheduler 的基础之上的。

useTransition 允许我们在组件更新时，延迟某些更新的提交时间，让用户体验更加流畅。而 useDeferredValue 则允许我们创建一个可以在一段时间内逐渐更新的值，这在处理 CPU 密集型操作时非常有用。

在并发模式下，这些新特性都是通过 Scheduler 进行调度的，这使得我们能够更好地控制渲染过程，从而提高性能并优化用户体验。

Scheduler 是否可以脱离 React 呢？

当然可以。虽然Scheduler是Facebook为优化React并提高其性能而开发的库，但它无需依赖React，可以独立使用。

Scheduler的主要功能是对异步任务进行优先级控制。如果你在项目中需要管理复杂的异步任务队列，那么可以尝试着使用它（杀鸡用牛刀2333）。

想象你正在开发一个实时聊天项目的场景下。这个项目中有多个交互任务，如发送消息、接收消息、滚动聊天记录、输入预测等。用户在使用过程中，可能会同时触发多个任务，我们需要合理分配各项任务的处理时间和顺序，确保应用流畅，用户体验良好。

import { unstable_scheduleCallback, unstable_UserBlockingPriority, unstable_LowPriority } from 'scheduler';

// 当用户发送消息时，我们将它设置为高优先级任务（UserBlockingPriority）:
function onSendMessage(message) {

  unstable_scheduleCallback(unstable_UserBlockingPriority, () => {
    // 处理发送消息的函数
    handleMessageSend(message);
  })
}

// 同时，我们会接收服务器端推送的消息，并将它设置为低优先级任务（LowPriority）:
function onReceiveMessage(callback) {

  socket.on('message', (message) => {
    unstable_scheduleCallback(unstable_LowPriority, () => {
      // 处理接收消息的函数
      handleMessageReceive(message);
    })
  })
}

在这个例子中，unstable_scheduleCallback函数会把任务放到任务队列中，并会基于所设定的优先级调度这些任务。通过设定优先级，我们可以控制任务的执行顺序，优化用户体验。

例如，当用户正在发送消息时，如果有新的消息推送过来，接收新消息的任务会暂时等待，等到发送消息的任务完成后再执行。这种策略可以减少不必要的页面重渲染，提高应用的性能，同时确保用户交互的流畅性。

最后

Scheduler 是一款优秀的调度库，它以优先级为基础管理异步任务，从而提供更高效、更流畅的用户交互体验。无论是在React项目中优化性能，还是在其他前端项目中管理复杂的异步任务，它都是一个值得信赖的工具。特别是在处理大量数据、进行复杂计算或处理多任务交互的场景中，它可以发挥重要作用。

原文链接：https://juejin.cn/post/7320445602884829234 作者：QiuWz

赞 (0)
我心飞翔我心飞翔
0 0
上一篇 2024年1月6日 上午10:53
下一篇 2024年1月6日 上午11:03

相关推荐

发表回复

登录后才能评论