requestIdleCallback 与 React 工作循环机制总结
你可以把浏览器想象成一个非常忙碌的工人，它的主线程（Main Thread）一直在处理各种任务： 1. 响应用户 ：处理点击、滚动、输入等事件。 2. 执行 JS ：运行你的 JavaScript 代码。 3. 渲染页面 ：计算布局（Layout）、绘制（Paint）。 这些都是高优先级任务。通常，为了让动画和交互流畅，浏览器会尽力保持在 60fps 每秒 60 帧的刷新率，这意味着 每帧（Frame）的时间大约是 16.67ms` 。
一、核心认知：纠正关键流程误区
| 错误认知 | 正确逻辑 | 关键关系总结 |
|---|---|---|
| requestIdleCallback 在 performUnitOfWork 内执行 | performUnitOfWork 在 requestIdleCallback 触发的 workLoop 内执行 | requestIdleCallback 是 “发令枪”，workLoop 是 “执行者”，performUnitOfWork 是 “最小工作单元” |
| 一次空闲时间完成整个更新任务 | 多次空闲时间 “切片” 完成更新任务 | 核心策略：化整为零，积少成多 |
二、核心机制：“蚂蚁搬家” 式工作流程（类比记忆）
| 类比对象 | React 对应概念 | 作用说明 |
|---|---|---|
| 要搬的 “家” | workInProgress Fiber 树 | 需要构建的待渲染 Fiber 树（更新任务主体） |
| “蚂蚁” | workLoop 函数 | 负责循环处理任务的核心逻辑 |
| “搬一粒米” | performUnitOfWork 函数 | 处理单个 Fiber 节点（最小工作单元，耗时短） |
| “每次可工作时间” | requestIdleCallback 的 deadline.timeRemaining () | 每一帧剩余的空闲时间（通常几毫秒） |
| “米堆暂存点” | workInProgress 指针 + 内存中的 Fiber 树 | 保存当前工作进度，支持暂停后续传 |
完整工作流程（四步记忆法）
- 发令：启动空闲任务
更新触发后，React 调用 requestIdleCallback 向浏览器 “预约” 空闲时间，同时准备好待处理的 workInProgress 树和初始 workInProgress 指针（指向根 Fiber）。
- 干活：切片处理任务
浏览器空闲时触发回调，启动 workLoop 循环，循环条件为：
while (deadline.timeRemaining() > 1ms && workInProgress !== null)
-
- 每次循环调用 performUnitOfWork 处理一个 Fiber 节点（“搬一粒米”），耗时通常 < 1ms；
-
- 处理完当前节点后，workInProgress 指针自动指向 next 节点（子 / 兄弟 / 父节点，按深度优先遍历）。
- 暂停：保存进度待续
当满足以下任一条件时，workLoop 退出，暂停工作：
-
- 时间耗尽：deadline.timeRemaining() ≤ 1ms（避免占用下一帧关键时间）；
-
- 高优任务插入：浏览器有新的高优任务（如用户输入、渲染）需执行。
暂停时，workInProgress 指针和已构建的 Fiber 树进度会保存在内存中（“米堆暂存”），同时 React 再次调用 requestIdleCallback 预约下一次空闲时间。
- 续传：恢复之前进度
下一次浏览器空闲时，requestIdleCallback 再次触发，workLoop 读取内存中保存的 workInProgress 指针，从上次暂停的节点继续处理，重复 “干活 - 暂停” 流程，直到 workInProgress === null（整个 Fiber 树处理完成）。
三、三大疑点解答（直击核心）
| 疑点 | 核心答案 | 记忆关键点 |
|---|---|---|
| 几毫秒空闲时间能做什么？ | 处理单个 Fiber 节点（performUnitOfWork 设计为轻量操作，单次耗时通常 < 1ms），积少成多可完成复杂树构建 | 不追求 “一次做完”，追求 “每次做一点” |
| 没做完的任务怎么办？ | 进度保存在内存（workInProgress 指针 + Fiber 树），下次空闲时从断点继续，实现 “断点续传” | Fiber 架构的核心能力：可中断、可恢复 |
| 是集合空闲时间还是用每帧空闲？ | 用 “每一帧” 的剩余空闲时间，而非集合空闲时间，避免任务堆积导致延迟 | 见缝插针，不囤时间，即时利用 |
四、关键对比：React 工作循环 vs 传统同步渲染
| 对比维度 | React 空闲调度（requestIdleCallback + workLoop） | 传统同步渲染 |
|---|---|---|
| 时间利用方式 | 碎片化利用每帧空闲时间，不阻塞主线程 | 占用连续主线程时间，易阻塞交互 |
| 任务中断能力 | 支持中断（时间耗尽 / 高优任务插入时暂停） | 不可中断，必须一次性完成 |
| 进度保存 | 内存保存进度，支持断点续传 | 无进度保存，中断即重新开始 |
| 用户体验 | 高优任务（输入、点击）可插队，交互流畅 | 高优任务需等待渲染完成，易卡顿 |
