当前位置：首页 > news >正文

React Scheduler（调度器）

news 2025/9/16 10:25:12

React Scheduler（调度器）是实现“非阻塞渲染”的核心模块，其核心原理是通过优先级区分任务、利用浏览器空闲时间分片执行任务，避免长任务阻塞UI线程。以下从「优先级设计」「任务调度机制」「浏览器协作策略」三个维度详细解析：

一、核心目标：解决“同步渲染阻塞问题”

在React 15及之前，组件渲染是同步递归执行的：一旦开始渲染，会持续占用JS线程直到完成。如果遇到复杂组件树（如1000个列表项），会阻塞浏览器的用户交互（点击、输入）、动画等关键操作，导致页面卡顿。

Scheduler的出现就是为了实现**“可中断的异步渲染”**：

将长任务拆分成多个短任务（“切片”）；
每个短任务执行后，主动让出JS线程给浏览器；
浏览器处理完UI事件、动画后，再继续执行剩余任务。

二、优先级设计：给任务“贴标签”，决定执行顺序

Scheduler将任务分为5级优先级（从高到低），不同类型的更新对应不同优先级，确保关键操作（如用户输入）优先执行：

优先级常量	对应场景	特点
`ImmediatePriority`	同步执行的紧急任务（如`flushSync`）	立即执行，不延迟
`UserBlockingPriority`	用户交互（点击、输入、滚动）	高优先级，25ms内必须执行完毕
`NormalPriority`	普通更新（如`setState`）	正常优先级，50ms内执行完毕
`LowPriority`	低优先级更新（如列表渲染）	可延迟，100ms内执行完毕
`IdlePriority`	空闲时执行的任务（如日志上报）	仅在浏览器完全空闲时执行

优先级的本质：通过「过期时间」（expirationTime）表示——优先级越高，过期时间越近（即“越快必须执行”）。例如：

UserBlockingPriority 的过期时间 = 当前时间 + 25ms；
如果任务执行时已超过过期时间，会被视为“紧急任务”，同步执行剩余部分。

三、任务调度的核心机制

Scheduler的工作流程可概括为：“入队→排序→执行→中断→恢复”，具体通过以下关键步骤实现：

1. 任务入队：用“小顶堆”存储任务

当调用 scheduleCallback(priority, callback) 时，Scheduler会创建一个「任务对象」：

const task = {callback,       // 任务函数（如组件渲染逻辑）priorityLevel,  // 优先级等级expirationTime, // 过期时间（决定执行顺序）...
};

任务被加入「优先级队列」，队列采用小顶堆（min-heap）数据结构，确保每次能快速取出「过期时间最近」（优先级最高）的任务。

2. 任务执行：“切片执行”+“浏览器协作”

Scheduler通过 requestHostCallback 启动任务循环，核心逻辑如下：

步骤1：取出最高优先级任务
从堆中取出过期时间最近的任务，执行其 callback 函数。

步骤2：执行任务切片
任务函数执行时，会返回一个“剩余任务函数”（如果任务未完成）。例如：

// 任务函数示例（伪代码）
function taskCallback(didUserCallbackTimeout) {// 执行一部分工作（如渲染10个列表项）const moreWork = doSomeWork(); if (moreWork) {// 返回剩余任务，后续继续执行return taskCallback; }return null; // 任务完成
}

步骤3：检查是否需要让出线程
每次任务切片执行后，Scheduler会检查：
- 是否已超过浏览器的“空闲时间片”（通常是5ms）；
- 是否有更高优先级的新任务插入队列。
  如果满足任一条件，立即暂停当前任务，让出JS线程。

3. 中断与恢复：利用浏览器API实现协作

Scheduler依赖浏览器的空闲时间API实现线程让出，核心是 requestIdleCallback 和 setTimeout 的降级方案：

理想情况：使用 requestIdleCallback，浏览器在空闲时（如帧渲染完成后）回调通知Scheduler继续执行任务；
降级情况：requestIdleCallback 兼容性差且延迟较高，Scheduler实际使用 setTimeout(0) 模拟“宏任务延迟”，确保任务能被中断。

恢复执行：当浏览器空闲或延迟时间到达后，Scheduler再次调用 requestHostCallback，从堆中取出任务继续执行，直到所有任务完成。

四、关键代码解析：核心函数的协作流程

Scheduler的核心逻辑集中在 scheduler/src/Scheduler.js 中，以下是关键函数的协作关系：

scheduleCallback：任务入队入口
- 根据优先级计算 expirationTime；
- 创建任务对象并插入小顶堆；
- 调用 requestHostCallback 启动任务循环。
requestHostCallback：触发任务执行
- 向浏览器注册“空闲时回调”（通过 schedulePerformWorkUntilDeadline）；
- 浏览器空闲时，会调用 performWorkUntilDeadline。
performWorkUntilDeadline：任务执行循环
- 从堆中取出最高优先级任务；
- 执行任务的 callback 函数，获取剩余任务；
- 检查是否超时或有更高优先级任务，决定是否继续执行或中断；
- 若有剩余任务，再次注册回调等待下一次空闲时间。
cancelCallback：取消任务
- 将任务标记为已取消，避免被执行；
- 后续从堆中取出任务时，会跳过已取消的任务。

五、与React Fiber架构的配合

Scheduler并非孤立存在，而是与Fiber架构深度协作，实现“可中断的渲染”：

Fiber的“切片渲染”：React的Reconciler（协调器）将组件树遍历拆分成一个个Fiber节点的处理（每个节点处理即一个“切片”），每次处理完一个节点，就会检查Scheduler是否需要中断；
优先级对齐：Fiber节点的更新优先级（通过Lane模型表示）与Scheduler的任务优先级对应，确保高优先级的更新（如用户输入）能打断低优先级的渲染（如列表渲染）。