React Fiber = 任务切片 + 时间切片

一句话分清

任务切片 = 把一个大任务拆成很多个小任务
时间切片 = 给这些小任务限定执行时间，到点就停，不卡页面

React Fiber = 任务切片 + 时间切片

1. 任务切片（Task Splitting）

是什么？

把一个巨大、一口气执行不完的任务 ，

拆成一个个可以分步执行的小单元。

目的

任务可以随时停下来
可以随时继续
可以被高优先级任务插队
可以废弃旧任务

形象比喻

你要搬 1000 块砖：

不切片：一次性搬完 → 累死（页面卡死）
任务切片：分成 1000 次，每次搬 1 块

这就是 Fiber 做的事：

把整棵虚拟 DOM 树

→ 拆成一个个 Fiber 节点

每个节点就是一个小任务单元。

代码层面理解

js 复制代码

// 不切片（卡死）
for (let i=0; i<10000; i++) {
  heavyWork(i)
}

// 任务切片（拆成小任务）
let i = 0
function work() {
  heavyWork(i)
  i++
  if (i < 10000) {
    nextWork(work) // 下次再做
  }
}

任务切片 = 结构拆分

2. 时间切片（Time Slicing）

是什么？

规定：主线程每次最多只能执行 X ms（React 是 5ms）

时间一到，必须让出主线程给浏览器渲染。

目的

不让 JS 长时间霸占线程
保证页面流畅不卡顿
保证输入、点击、动画不延迟

形象比喻

你有 1 小时搬砖时间：

不切片：一直搬，不休息 → 页面卡死
时间切片：每搬 5 分钟就休息一下，让页面先渲染

代码层面理解

js 复制代码

function run() {
  const start = performance.now()

  // 最多执行 5ms
  while (performance.now() - start < 5) {
    if (!hasTask()) break
    doOneTask()
  }

  // 时间到了，休息，下次继续
  schedule(run)
}

时间切片 = 时间控制

3. 两者关系（最关键）

没有任务切片 → 时间切片毫无意义

如果任务是整块不可拆分 的，

你想停也停不下来。

没有时间切片 → 任务切片白拆了

任务拆小了，但你一口气执行完 ，

还是会卡页面。

4. 结合 React 一句话总结

Fiber 架构 =

任务切片

把虚拟 DOM 树 → 拆成一个个 Fiber 节点

实现：可中断、可恢复、可插队、可放弃
时间切片

用 MessageChannel 控制每 5ms 让出主线程

实现：不阻塞渲染、页面流畅

5. 超级精简记忆（面试必背）

任务切片 = 把大任务拆小（结构层面）
时间切片 = 每 5ms 强制暂停（时间层面）
Fiber = 任务切片 + 时间切片
任务切片让它能停，时间切片让它必须停