中断渲染，利用fiber解决性能问题，性能优化又有的说了

深入理解 React Fiber 机制：从 requestAnimationFrame 与 requestIdleCallback 看可中断渲染

在现代前端开发中，React 已成为构建用户界面的主流框架之一。然而，随着应用复杂度的提升，组件数量增多、组件树深度加深，传统的 React 渲染机制逐渐暴露出性能瓶颈------长时间占用主线程，导致页面卡顿、交互延迟。

为了解决这一问题，React 团队在 React 16 版本中引入了全新的核心协调算法------Fiber 架构 。它不仅是架构上的重构，更是对渲染过程的一次革命性优化：实现了可中断、可恢复的渲染流程，从而保障了用户交互的优先级和流畅性。

---

一、问题背景：为什么需要 Fiber？

当一个 React 应用包含大量组件或组件树非常深时，渲染过程会变得极其耗时。每个组件都需要经历以下步骤：

• JSX 编译为虚拟 DOM（React Element）
• 创建组件实例（类组件）或执行函数（函数组件）
• 执行生命周期方法（如 componentDidMount、useEffect 等）
• 虚拟 DOM Diff 对比
• 最终挂载到真实 DOM

这些操作都是同步执行的，一旦开始渲染，就必须"一口气"完成。这会导致：

⚠️ 主线程被长时间占用，浏览器无法响应用户的点击、滚动等高优先级任务。

结果就是：页面"卡死"，用户体验极差。

核心问题总结：

• 渲染过程不可中断
• 无法优先处理用户交互
• 大型组件树导致主线程阻塞

---

二、Fiber 的解决方案：可中断的渲染机制

React Fiber 的核心思想是：将渲染工作拆分为多个小任务，在浏览器空闲时执行，必要时暂停，让出主线程给更高优先级的任务（如用户输入）。

为了实现这一点，React 借鉴并超越了浏览器提供的两个关键调度 API：requestAnimationFrame 和 requestIdleCallback。下面我们重点剖析这两个 API 的原理及其在 Fiber 中的应用。

---

三、深入解析：requestAnimationFrame 与 requestIdleCallback

1. requestAnimationFrame（简称 rAF）

✅ 是什么？

requestAnimationFrame 是浏览器提供的一种用于动画渲染 的 API。它会在下一次重绘之前调用指定的回调函数，通常每秒执行约 60 次（即每 16.67ms 一次），与屏幕刷新率同步。

requestAnimationFrame((timestamp) => {
  // timestamp 是当前时间戳
  console.log('下一帧即将渲染');
});

✅ 特点：

特性	说明
执行频率	与屏幕刷新率同步（通常 60fps）
优先级	高，浏览器会优先保证动画流畅
是否阻塞	回调内代码过长仍会阻塞主线程
是否可中断	否，一旦开始执行必须完成

✅ 在 React 中的角色：

React 并不直接使用 rAF 来执行渲染任务，但它用它来"锚定"渲染时机。

• 当 React 检测到状态更新时，它会调用 rAF 来安排一个"开始渲染"的信号。
• 这确保了 React 的更新尽可能在每一帧的开始阶段启动，留出足够时间完成渲染，避免掉帧。
• 在 Fiber 的调度器中，rAF 被用来触发"工作循环"的启动，作为高优先级任务的入口。

🔍 类比 ：rAF 就像一个"闹钟"，告诉 React："现在是新的一帧，你可以开始安排任务了。"

---

2. requestIdleCallback（简称 rIC）

✅ 是什么？

requestIdleCallback 是浏览器提供的一种用于在空闲时间执行低优先级任务的 API。它允许开发者将非关键任务延迟到浏览器空闲时执行。

requestIdleCallback((deadline) => {
  // deadline.timeRemaining() 表示当前帧还剩多少空闲时间
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    performOneTask();
  }
});

✅ 参数 deadline 提供两个关键信息：

属性	含义
timeRemaining()	当前帧还剩多少毫秒可用于执行任务（通常 ≤ 5ms）
didTimeout	是否因超时而强制执行（可设置 timeout 参数）

✅ 执行时机：

浏览器在完成以下工作后，如果还有剩余时间，就会执行 rIC 的回调：

1. 执行 JS 脚本
2. 重排（reflow）
3. 重绘（repaint）
4. 合成（compositing）

🕒 理想情况下，每帧 16.67ms，若前三步只用了 10ms，则剩下 6.67ms 可用于 rIC 任务

✅ 在 React Fiber 中的启发作用：

Fiber 的设计直接受到 rIC 的启发------"在浏览器空闲时做一点事"。

React 原本希望使用 rIC 来实现可中断渲染，但很快发现其局限性：

问题	说明
兼容性差	IE 和部分旧浏览器不支持
触发不及时	在交互频繁时，可能长时间没有"空闲"
时间不可控	timeRemaining() 返回值不稳定，难以规划任务

❌ 因此，React 团队没有直接使用 rIC ，而是基于其思想，自己实现了一套更强大的任务调度器（Scheduler）。

---

四、React 的替代方案：Scheduler + Fiber 架构

虽然 rIC 不够用，但它的核心理念被完美继承：

将长任务拆分，利用帧的剩余时间执行，避免阻塞主线程

React 自研的 Scheduler 模块实现了更精细的控制：

✅ Scheduler 的优势：

特性	说明
跨平台兼容	不依赖 rIC，可在所有环境运行
时间切片（Time Slicing）	每个任务最多执行 5ms，超时则中断
优先级调度	支持不同优先级任务（Sync、Transition、Idle）
超时机制	低优先级任务可设置超时，避免饿死

✅ 工作流程示例：

// Scheduler 内部伪代码逻辑
function workLoop(deadline) {
  let shouldYield = false;

  while (nextUnitOfWork && !shouldYield) {
    performUnitOfWork(nextUnitOfWork);

    // 检查是否超过时间片（如 5ms）
    if (deadline.timeRemaining() < 1) {
      shouldYield = true;
    }
  }

  if (nextUnitOfWork) {
    // 中断，等待下一帧继续
    requestAnimationFrame(workLoop);
  } else {
    // 所有任务完成，进入 Commit 阶段
    commitRoot();
  }
}

requestAnimationFrame(workLoop);

🔁 这个循环每帧运行一次，每次只做一点工作，实现了真正的"可中断渲染"。

---

五、Fiber 节点与任务单元

在 Fiber 架构中，每一个 Fiber 节点就是一个工作单元（UnitOfWork）。

• React 从根节点开始，逐个处理每个 Fiber 节点
• 每处理完一个节点，检查是否超时
• 如果超时，暂停并保存当前进度（通过 requestIdleCallback 或 Scheduler）
• 下次空闲时，从中断处继续

// Fiber 节点结构简化
{
  type: 'div',
  props: { ... },
  return: parent,
  child: firstChild,
  sibling: nextSibling,
  alternate: workInProgress, // 双缓存
  pendingProps,
  memoizedProps,
  ...
}

这种链式结构使得 React 可以灵活地遍历、中断、恢复，而不再依赖递归调用栈。

---

六、总结：Fiber 的核心价值

传统 React	Fiber 架构
同步渲染，不可中断	异步可中断渲染
基于递归遍历	基于链表结构 + 任务调度
用户交互可能被阻塞	优先响应用户操作
无优先级概念	支持多优先级任务调度

✅ Fiber 解决的核心问题：

通过任务分片 + 浏览器空闲调度，打破"渲染必须一口气完成"的限制，实现流畅的用户体验。

---

七、结语：从 API 到架构的飞跃

requestAnimationFrame 和 requestIdleCallback 是浏览器为高性能应用提供的原始工具。React Fiber 并没有止步于使用它们，而是汲取其思想，构建了更强大、更可控的调度系统。

• rAF 提供了帧同步的时机
• rIC 启发了空闲调度的设计
• React Scheduler 实现了跨平台、高精度、可中断的任务执行

🌟 Fiber 的本质：不是简单地调用某个 API，而是构建一个智能的"操作系统"，让 UI 渲染像多任务系统一样高效、流畅、可预测。

理解 rAF 与 rIC，是理解 Fiber 的起点；而理解 Fiber，则是掌握现代 React 的关键。

---