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

一句话分清任务切片 把一个大任务拆成很多个小任务时间切片 给这些小任务限定执行时间到点就停不卡页面React Fiber 任务切片 时间切片1. 任务切片Task Splitting是什么把一个巨大、一口气执行不完的任务拆成一个个可以分步执行的小单元。目的任务可以随时停下来可以随时继续可以被高优先级任务插队可以废弃旧任务形象比喻你要搬 1000 块砖不切片一次性搬完 → 累死页面卡死任务切片分成 1000 次每次搬 1 块这就是 Fiber 做的事把整棵虚拟 DOM 树→ 拆成一个个Fiber 节点每个节点就是一个小任务单元。代码层面理解// 不切片卡死for(leti0;i10000;i){heavyWork(i)}// 任务切片拆成小任务leti0functionwork(){heavyWork(i)iif(i10000){nextWork(work)// 下次再做}}任务切片 结构拆分2. 时间切片Time Slicing是什么规定主线程每次最多只能执行 X msReact 是 5ms时间一到必须让出主线程给浏览器渲染。目的不让 JS 长时间霸占线程保证页面流畅不卡顿保证输入、点击、动画不延迟形象比喻你有 1 小时搬砖时间不切片一直搬不休息 → 页面卡死时间切片每搬 5 分钟就休息一下让页面先渲染代码层面理解functionrun(){conststartperformance.now()// 最多执行 5mswhile(performance.now()-start5){if(!hasTask())breakdoOneTask()}// 时间到了休息下次继续schedule(run)}时间切片 时间控制3. 两者关系最关键没有任务切片 → 时间切片毫无意义如果任务是整块不可拆分的你想停也停不下来。没有时间切片 → 任务切片白拆了任务拆小了但你一口气执行完还是会卡页面。4. 结合 React 一句话总结Fiber 架构 任务切片把虚拟 DOM 树 → 拆成一个个 Fiber 节点实现可中断、可恢复、可插队、可放弃时间切片用 MessageChannel 控制每 5ms 让出主线程实现不阻塞渲染、页面流畅5. 超级精简记忆面试必背任务切片 把大任务拆小结构层面时间切片 每 5ms 强制暂停时间层面Fiber 任务切片 时间切片任务切片让它能停时间切片让它必须停