React 调度器（Scheduler）深度解析：实现异步渲染的时间切片技术
React 16.x 版本引入的 Concurrent Mode（并发模式）是 React 历史上的一次重大变革，而调度器（Scheduler）则是 Concurrent Mode 的核心底层支撑。本文将深入探讨 React 调度器的工作原理，特别是时间切片（Time Slicing）技术如何实现异步渲染，并结合源码分析任务优先级与中断逻辑。
一、React 渲染架构的演进
在探讨调度器之前，我们需要了解 React 渲染架构的演进历程：
-
Stack Reconciler（React 15 及以前）
- 同步渲染，递归执行 DOM diff，无法中断
- 当组件树庞大时，可能导致主线程长时间阻塞，造成页面卡顿
- 用户交互（如滚动、点击）无法及时响应
- 渲染过程不可中断，即使有更高优先级的任务也必须等待当前渲染完成
-
Fiber Reconciler（React 16 及以后）
- 引入 Fiber 架构，将渲染工作拆分成多个小任务（Fiber 节点）
- 支持任务中断与恢复，实现异步渲染
- 为 Concurrent Mode 提供基础
- Fiber 节点包含任务优先级、暂停和恢复的能力
- 采用链表结构替代递归，实现可中断的渲染
-
Concurrent Mode（并发模式）
- 基于 Fiber 架构和调度器实现
- 允许不同优先级的任务共存，高优先级任务可以中断低优先级任务
- 实现时间切片，避免长时间阻塞主线程
- 提供更流畅的用户体验，特别是在复杂应用中
二、调度器的核心作用
React 调度器的核心作用是决定何时执行什么任务，以及以何种优先级执行。它主要解决以下问题：
- 避免长时间阻塞主线程：将渲染任务拆分成多个小任务，在浏览器空闲时间执行
- 实现任务优先级：不同类型的任务（如用户交互、数据获取）可以有不同的优先级
- 支持任务中断与恢复：高优先级任务可以中断低优先级任务，待高优先级任务完成后再恢复
- 时间管理：确保渲染任务不会占用过多主线程时间，影响用户体验
- 向后兼容：在不破坏现有 API 的前提下引入新的渲染机制
三、时间切片（Time Slicing）技术详解
时间切片是调度器的核心技术之一，它允许 React 将渲染工作分解为多个小块，在每一帧的空闲时间执行一部分，从而避免长时间阻塞主线程。
1. 浏览器渲染帧与 requestIdleCallback
现代浏览器的刷新频率通常是 60Hz，即每 16.6ms 刷新一次。但浏览器需要在这 16.6ms 内完成以下工作：
-
处理用户输入事件
-
执行 JavaScript 代码
-
计算样式和布局（重排）
-
绘制（重绘）
为了不影响用户体验，JavaScript 代码执行时间应该控制在 5ms 以内。如果超过这个时间，就可能导致帧率下降，出现卡顿现象。
为了利用浏览器的空闲时间，HTML 标准提供了requestIdleCallback API：
javascript
requestIdleCallback((deadline) => {
// deadline.timeRemaining() 返回当前帧剩余的空闲时间
while (deadline.timeRemaining() > 0 && tasks.length > 0) {
executeTask(tasks.pop());
}
// 如果任务没有完成，在下一帧继续执行
if (tasks.length > 0) {
requestIdleCallback(handleIdleCallback);
}
});
2. React 对 requestIdleCallback 的模拟实现
由于requestIdleCallback存在以下问题：
-
浏览器兼容性不足
-
最低延迟 20ms，对于交互性要求高的场景不够及时
-
无法精确控制执行时机
-
在移动设备上表现不稳定
React 团队实现了自己的requestIdleCallback polyfill，主要基于MessageChannel和requestAnimationFrame：
javascript
// React调度器中对requestIdleCallback的模拟实现
let schedulePerformWorkUntilDeadline;
if (typeof window !== 'undefined' && typeof window.requestIdleCallback === 'function') {
// 使用原生requestIdleCallback
schedulePerformWorkUntilDeadline = (callback) => {
const id = requestIdleCallback(callback);
return () => cancelIdleCallback(id);
};
} else {
// 自定义实现
const channel = new MessageChannel();
const port = channel.port2;
const performWorkUntilDeadline = () => {
callback(deadline);
};
channel.port1.onmessage = performWorkUntilDeadline;
schedulePerformWorkUntilDeadline = (callback) => {
port.postMessage(null);
return () => {};
};
}
这种实现方式的优势在于：
- 可以精确控制任务执行时机
- 利用
requestAnimationFrame确保在每一帧的开始执行 - 兼容性更好，几乎支持所有现代浏览器
- 可以更灵活地控制任务执行的时间窗口
3. 时间切片的工作流程
时间切片的核心工作流程如下：
-
任务拆分：将大型渲染任务拆分为多个小的 Fiber 节点
-
时间分配：为每个渲染任务分配一定的执行时间（通常为 5ms）
-
执行检查：在每个任务执行后，检查是否还有剩余时间
-
中断与恢复：如果时间用尽，保存当前状态，中断任务，在下一帧继续执行
javascript
function workLoop(hasTimeRemaining, initialTime) {
let currentTime = initialTime;
advanceTimers(currentTime);
currentTask = peek(taskQueue);
while (currentTask !== null) {
// 如果任务已经过期，或者还有剩余时间，继续执行
if (
shouldYieldToHost() ||
currentTask.expirationTime > currentTime
) {
// 时间用尽，退出循环
break;
}
// 执行当前任务
const continuationCallback = currentTask.callback();
if (typeof continuationCallback === 'function') {
// 任务未完成，保存继续执行的回调
currentTask.callback = continuationCallback;
} else {
// 任务完成，移除任务
if (currentTask === peek(taskQueue)) {
remove(taskQueue, currentTask);
}
}
// 继续处理下一个任务
advanceTimers(currentTime);
currentTask = peek(taskQueue);
}
// 如果还有任务未完成，返回true，表示需要继续执行
return currentTask !== null;
}
四、任务优先级与中断逻辑
React 调度器定义了 5 种任务优先级：
- ImmediatePriority：立即执行的优先级，用于处理紧急的用户交互（如点击、输入）
- UserBlockingPriority：用户阻塞级优先级，用于处理需要快速响应的交互（如滚动、拖拽）
- NormalPriority：正常优先级，用于大多数 UI 更新、数据获取等
- LowPriority：低优先级，用于不紧急的任务（如通知、非关键数据加载）
- IdlePriority：空闲优先级，用于可以延迟到浏览器空闲时执行的任务
1. 优先级与超时时间
每个优先级对应一个超时时间（单位：毫秒）：
-
ImmediatePriority: -1（立即执行）
-
UserBlockingPriority: 250
-
NormalPriority: 5000
-
LowPriority: 10000
-
IdlePriority: 无限大
当任务超时时，会自动提升为最高优先级执行，确保不会饿死。
2. 任务调度与中断
React 调度器维护两个任务队列：
-
timerQueue：尚未到期的任务队列，按到期时间排序
-
taskQueue：已经到期的任务队列，按优先级排序
调度器的工作流程：
- 将新任务加入 timerQueue 或 taskQueue
- 如果有新的最高优先级任务，中断当前正在执行的低优先级任务
- 在每一帧的空闲时间，从 taskQueue 中取出最高优先级的任务执行
- 如果当前帧的空闲时间用尽，保存当前任务状态，中断执行，在下一帧继续
3. 源码中的任务调度核心逻辑
以下是简化版的任务调度核心逻辑：
javascript
// React调度器核心逻辑简化版
let taskQueue = [];
let timerQueue = [];
let currentTask = null;
let isPerformingWork = false;
let currentPriorityLevel = NormalPriority;
// 任务优先级常量
const ImmediatePriority = 1;
const UserBlockingPriority = 2;
const NormalPriority = 3;
const LowPriority = 4;
const IdlePriority = 5;
function getTimeoutForPriorityLevel(priorityLevel) {
switch (priorityLevel) {
case ImmediatePriority:
return -1; // 立即执行
case UserBlockingPriority:
return 250; // 250ms后超时
case NormalPriority:
return 5000; // 5秒后超时
case LowPriority:
return 10000; // 10秒后超时
case IdlePriority:
return Infinity; // 无限超时
default:
return 5000;
}
}
function scheduleCallback(priorityLevel, callback) {
const currentTime = getCurrentTime();
const startTime = currentTime;
const timeout = getTimeoutForPriorityLevel(priorityLevel);
const expirationTime = startTime + timeout;
const newTask = {
id: taskIdCounter++,
callback,
priorityLevel,
startTime,
expirationTime,
sortIndex: expirationTime,
};
// 将任务加入队列
if (startTime > currentTime) {
// 尚未到期的任务加入timerQueue
newTask.sortIndex = startTime;
insertIntoTimerQueue(newTask);
// 如果是第一个timer任务，安排检查
if (peek(timerQueue) === newTask) {
requestHostTimeout(handleTimeout, startTime - currentTime);
}
} else {
// 已到期的任务加入taskQueue
newTask.sortIndex = expirationTime;
insertIntoTaskQueue(newTask);
// 如果是同步优先级，立即执行
if (currentPriorityLevel === ImmediatePriority) {
performSyncWorkOnRoot(root);
} else {
// 否则，安排在空闲时间执行
requestHostCallback(flushWork);
}
}
return newTask;
}
function flushWork(hasTimeRemaining, initialTime) {
isPerformingWork = true;
try {
// 处理到期的timer任务
advanceTimers(initialTime);
// 取出最高优先级的任务
currentTask = peek(taskQueue);
while (currentTask !== null) {
// 如果任务已过期，或者有剩余时间，执行任务
if (
currentTask.expirationTime <= initialTime ||
(!hasTimeRemaining && !isYieldy)
) {
// 记录当前优先级
const previousPriorityLevel = currentPriorityLevel;
currentPriorityLevel = currentTask.priorityLevel;
// 执行任务
const callback = currentTask.callback;
const continuationCallback = callback();
// 恢复之前的优先级
currentPriorityLevel = previousPriorityLevel;
if (typeof continuationCallback === 'function') {
// 任务未完成，继续执行
currentTask.callback = continuationCallback;
} else {
// 任务完成，移除任务
remove(taskQueue, currentTask);
}
// 继续处理下一个任务
advanceTimers(initialTime);
currentTask = peek(taskQueue);
} else {
// 时间用尽，退出循环
break;
}
}
// 如果还有未完成的任务，安排在下一帧继续
if (currentTask !== null) {
return true;
} else {
// 检查timerQueue中是否有到期的任务
const firstTimer = peek(timerQueue);
if (firstTimer !== null) {
requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
}
return false;
}
} finally {
isPerformingWork = false;
currentTask = null;
}
}
function shouldYieldToHost() {
// 如果有任务超时，立即让出控制权
if (currentTask.expirationTime <= currentTime) {
return false;
}
// 如果没有剩余时间，让出控制权
if (!hasTimeRemaining) {
return true;
}
// 如果已经执行了足够长的时间，让出控制权
return getCurrentTime() - startTime >= 5; // 5ms时间窗口
}
五、时间切片的实际应用与效果
1. 长列表渲染优化
传统的长列表渲染会导致主线程长时间阻塞，而使用时间切片技术可以将渲染工作分散到多个帧中：
jsx
function LongList({ items }) {
const [visibleItems, setVisibleItems] = useState(10);
const [isLoading, setIsLoading] = useState(false);
// 使用useEffect和requestIdleCallback模拟时间切片
useEffect(() => {
if (visibleItems < items.length && !isLoading) {
setIsLoading(true);
// 使用requestIdleCallback处理渲染
const handleIdleCallback = (deadline) => {
// 有剩余时间时渲染一些项目
while (deadline.timeRemaining() > 0 && visibleItems < items.length) {
setVisibleItems(prev => prev + 1);
}
// 如果还有项目未渲染，继续请求空闲回调
if (visibleItems < items.length) {
requestIdleCallback(handleIdleCallback);
} else {
setIsLoading(false);
}
};
requestIdleCallback(handleIdleCallback);
}
}, [visibleItems, items.length, isLoading]);
return (
<div>
{items.slice(0, visibleItems).map(item => (
<div key={item.id}>{item.name}</div>
))}
{visibleItems < items.length && <div>加载中...</div>}
</div>
);
}
2. 提升交互响应性
通过时间切片，可以确保在复杂渲染过程中，用户交互仍然能够及时响应：
jsx
function App() {
const [count, setCount] = useState(0);
// 模拟耗时渲染
const items = Array.from({ length: 10000 }).map((_, i) => i);
return (
<div>
<button onClick={() => setCount(prev => prev + 1)}>
点击: {count}
</button>
<LongList items={items} />
</div>
);
}
在这个例子中，即使渲染 10000 个项目，用户点击按钮的响应仍然非常流畅。
3. 动画与过渡效果优化
时间切片也可以用于优化复杂动画和过渡效果：
jsx
function AnimatedComponent() {
const [progress, setProgress] = useState(0);
useEffect(() => {
const animate = () => {
// 使用requestAnimationFrame和时间切片控制动画
requestAnimationFrame(timestamp => {
setProgress(prev => {
const next = prev + 0.01;
if (next >= 1) return 1;
return next;
});
if (progress < 1) {
animate();
}
});
};
animate();
}, [progress]);
return (
<div style={{ width: `${progress * 100}%`, height: '50px', backgroundColor: 'blue' }} />
);
}
六、调度器的未来发展
React 团队正在持续改进调度器，未来可能会看到以下发展：
- 更智能的优先级算法：根据用户行为和性能数据自动调整任务优先级
- 与浏览器原生 API 更紧密的集成：利用未来可能出现的更高效的浏览器调度 API
- 更细粒度的任务控制：允许开发者更精确地控制任务的执行时机和优先级
- 服务器端渲染的调度优化：将调度器的优势扩展到服务器端渲染场景
- 与 Web Workers 的结合：将一些计算密集型任务转移到 Web Workers 中执行
- 开发者工具增强：提供更详细的调度性能分析工具
七、调度器的性能考量与最佳实践
使用 React 调度器时，需要注意以下性能考量和最佳实践：
- 避免过度拆分任务：过于细粒度的任务会增加调度开销
- 合理设置任务优先级：根据任务的重要性和紧急程度设置适当的优先级
- 优化渲染逻辑：减少不必要的渲染，避免重复计算
- 使用 useMemo 和 useCallback：缓存计算结果和回调函数，避免不必要的重新渲染
- 避免阻塞主线程：将耗时的计算任务放在低优先级执行
- 测试性能边界：在不同性能的设备上测试应用，确保在低端设备上也有良好的体验
- 使用 React Profiler：分析应用性能，找出性能瓶颈
总结
React 调度器是 Concurrent Mode 的核心组件，它通过时间切片技术实现了异步渲染，有效解决了传统同步渲染导致的页面卡顿问题。调度器的关键特性包括：
-
任务优先级系统，支持不同类型任务的差异化处理
-
时间切片技术，将渲染工作分散到多个帧中
-
任务中断与恢复机制，高优先级任务可以中断低优先级任务
-
兼容各种浏览器的 requestIdleCallback 实现
-
任务超时机制，确保所有任务最终都会被执行
