共计 4025 个字符，预计需要花费 11 分钟才能阅读完成。
作者：温荣蛟
上篇提到为了解决任务调度粒度管制不够的问题，React 引入了 Fiber 架构。Fiber 将一个 DOM 更新工作拆分为由多个原子化可调度的节点组成的汇合，从而提供了细粒度的任务调度能力。
Fiber 这个名词并不是 React 的独创，和服务器端开发中的中纤程（Fiber）雷同，后端开发中的纤程，也有着不同的名字，例如 C /C++ 的协程、Java 中的 Loom（孵化中）、Go 中的 goroutine；这些不同名字的背地其实都是一个目标——通过线程复用升高线程的应用老本。
操作系统提供了过程和线程供用户进行应用，其中线程是操作系统调度的最小单位。然而线程的应用老本很高，次要体现在每个线程都是本人独立的内存空间、线程切换须要的管制工夫很长。这就导致了当呈现大量线程时，会引起操作系统的压力变大，从而耗费大量的资源，升高性能。因而，在服务端开发等须要用到大量线程的场景下，会通过一些机制对操作系统的线程进行复用，这个机制就是服务器端的 Fiber.
然而在前端畛域，js 只提供了一个线程，不存在线程切换的场景。是不是就阐明了 Fiber 机制无奈利用到前端？React 又为何将本身调度机制命名为 Fiber？Fiber 在前端畛域的作用体现在什么方面？或者换句话说，前端 Fiber 的意义又是什么？
本章将从 Fiber 的构造动手，为读者揭开 React Fiber 的神秘面纱。接着，剖析 Fiber 机制在 Task 调度过程中的运行机制，最初剖析 Fiber 的意义。
第一节 Fiber 架构
图 2 -1 Fiber 架构图
如图 2 - 1 所示，Fiber 架构由 2 局部组成：散发器（dispatcher）和调度器（scheduler）。散发器负责承受页面触发的事件，并将其转换为由 FiberNode 组成的 Task。交给调度器进行调度。调度器负责根据调度规定对 Task 进行细粒度的调度。
dispatcher: 它能够是一个组件的初始化挂载动作，也能够是某个事件触发的更新。
scheduler：不论是挂载工作还是更新工作，都会推送到 schedule 调度器模块中，schedule 模块将确定该工作的执行机会。
图 2 -2 例子
图 2 - 2 展现了一个外卖页面的示意图，当用户点击退出购物车时，会触发该按钮的点击事件，将页面整体刷新为右图的样子。
当用户点击按钮时，触发点击事件，将事件会触发散发器的转换动作。能够先简略的认为散发器将触发 4 个 FiberNode 的更新, 别离是：
删除“退出购物车”按钮；减少“+”的圆形按钮；减少“-”的圆形按钮；减少一个计数文本“1”。须要读者明确的是，本节提到的例子只是为了不便读者了解 React Fiber 机制。实际上，事件工作的拆分会根据一套更简单的机制进行。并不是简略的依照显示的成果进行切分。
第二节 Task
散发器与调度器之间通过 Task 进行通信。Task 对应的是组件的挂载或更新动作。由 FiberRoot 和 FiberTree 形成。
FiberRoot: 上述触发的挂载或则更新将初始化一个 FiberRoot 对象，是此次工作 FiberTree 的根节点。FiberRoot 的 currentTree 上的 stateNode 属性指向触发本次事件的 DOM 节点，即 FiberRoot 节点链接了 DOM 节点和对应的工作节点。
FiberTree: 多个 node 节点组成。是事件波及的所有节点的更新动作的汇合。
2.1 FiberTree
图 2 -2 FiberTree 示意图
如图 2 -2，FiberTree 是由一个一个 FiberNode 以单链表的模式组合成的节点汇合。
FiberNode 是调度器执行的最小单位，每执行完一个 FiberNode 更新后，线程的控制权将转交给调度器，由调度器来抉择下一个执行的工作（持续或中断插入其余工作）。
第三节 散发器
第一节中提到散发器负责事件触发和更新，散发器除了处理事件的散发还须要负责节点的更新散发。当 FiberNode 进行更新操作时，散发器会依据 FiberNode 上的 tag 属性进行散发解决，不同的类型进入不同的更新逻辑。本文筛选 3 个最罕用的向读者介绍。
3.1 HostComponent
宿主组件：它代表的是浏览器原生反对的 html 标签，如 div/p/span...，该类型的节点须要解决的逻辑比拟少，次要逻辑有：1. 节点状态的标记
2. 文本域的非凡解决
3. 上下文切换
3.2 FunctionComponent
函数组件：开发者应用函数申明的组件。在 hooks 呈现之前，函数组件个别作为纯组件呈现，外部无数据交互。函数组件外部的次要逻辑是：
- 上下文切换
- 状态标记
- hooks 执行
- 持续子节点更新或挂载
3.3 ClassComponent
类组件：应用 class 申明的组件。类组件和函数组件的区别在于，类组件提供了组件的申明周期，函数组件应用 hooks 实现相似性能。它的次要逻辑是：
- 上下文切换
- 状态标记
- 实例挂载
- 申明周期钩子执行
- 持续子节点的更新或挂载
第四节 Task 调度过程
介绍了 Task 的组成，本节将会向读者介绍 Task 是如何参加调度器的两大重要过程的。4.1 工作启动
组件的初始化挂载或事件驱动更新都会触发一个工作的启动。如第二节所讲，创立一个新工作首先会创立一个 FiberRoot，FiberRoot 作为终点对 FiberTree 进行挂载或更新。散发器对 FiberTree 的每一个 FiberNode 散发更新组合成了一个 Task，并且将该 Task 提交给调度器。调度器确定该工作的执行机会，当满足启动条件时，工作启动。
4.2 工作挂起
工作进入调度器后，开始执行过程。在执行每个节点单元的时候会先判断浏览器是否有空余工夫执行下一个工作单元。当不满足向下执行条件时（比方有其余高优先级的工作插入，或则以后工夫片已用完），工作中断，被挂起。它的从新执行机会是由 schedule 模块管制，具体是怎么管制将在 scheduler 调度策略中细讲。
4.3 工作复原
工作执行过程中，每一个 FiberNode 的执行后果都会标记在属性上。调度模块从新执行挂起工作时，实质上是从新执行该更新工作，在具体更新每一 FiberNode 的时候会依据节点上的缓存属性判断该节点是否（props 参数前后比对）须要从新计算更新数据，须要则逻辑不变，不须要则跳过。
4.4 工作完结
当整个 FiberTree 中的节点都被解决后，对立提交所有 FiberNode 更新。并将更新后果对立反馈到界面上，到此工作完结，工作将会被登记，同时回收 FiberRoot 保留的上下文。
第五节 React Fiber 的意义
React Fiber 实质上将 js 提供的一个工作线程进行复用，以实现对工作细粒度的管制。
React Fiber 和服务端开发的 Fiber 相比，都是通过精妙的设计扭转以后线程正在执行的工作，从而实现线程复用。因而 React 将本身的调度机制命名为 Fiber 也是正当的。
前文曾经阐明了，js 是单线程语言，不存在线程切换的老本，那么 React 设计的 Fiber 的意义就剩一个了：进步工作的调度效率。
5.1 响应工夫和周转工夫
在资源调度中，评估调度器效率的两个指标是响应工夫 (Response Time) 和周转工夫(Turnaround Time)，两者的定义如下：
T 周转工夫 = T 实现工夫 - T 达到工夫
T 响应工夫 = T 首次运行 - T 达到工夫
ATT(Average Turnaround Time)=(∑_N▒〖T_周转工夫 (n)〗)/N
ART(Average Response Time)=(∑_N▒〖T_响应工夫 (n)〗)/N
周转工夫指的是工作进入零碎到最终实现所通过的工夫。均匀周转工夫则用来评估调度器的调度性能。思考一个极其状况，T0 时刻，ABC 三个工作同时进入调度器，A 工作须要 4 秒，B 工作须要 10s，C 工作须要 2s。若调度器依照 BAC 的程序执行工作，ATT=（10+14+16）/3=13.33 秒。若调度器依照 CAB 的程序执行，则 ATT=(2+6+18)/3=8.67 秒。
响应工夫指的是调度器第一次执行工作时所通过的工夫，均匀响应工夫用来掂量调度零碎响应工作的能力。对于交互多的零碎而言，均匀响应工夫是一个十分重要的指标，毕竟用户不心愿本人输出按下键盘后须要期待很长时间能力失去响应。
5.2 工作粒度
响应工夫和周转工夫形成了评估调度零碎的两个重要指标，对这两个指标进行优化的一个无效伎俩是将一个大工作拆分为多个小工作，一次执行只执行一个小工作，小工作执行完结后，再依据调度策略执行另一个工作的小工作，通过轮转的形式，使得各个工作都能偏心地取得执行，从而升高 ATT 和 ART。
图 2 -2 工作切分
图 2 - 2 展现了一个工作切分后调度的一个示例。例子中应用的是最短执行工夫优先的调度策略。不难看出，通过将大工作切分为小工作后进行调度，能够无效升高零碎的均匀周转工夫和均匀响应工夫，大幅度提高了调度效率。然而本例中的最短执行工夫优先的算法在理论中不可能被利用，因为在事实中很难当时获取工作的执行工夫，React 中有一些更精妙的调度策略，会在下一章进行具体讲述。
这种切分的实质是升高了工作的粒度，因而，工作的粒度很大水平上决定了调度的效率。工作粒度大的零碎，无奈无效地进行调度。
5.3 Fiber 意义
确实，js 没有提供多线程，即便工作切分后也无奈利用多线程对工作进行减速，但这不意味着 React 的 Fiber 机制是有效的。
React Fiber 的意义在于细化工作粒度，调度策略会影响不同场景下的调度成果，但这些调度策略的前提是工作粒度要足够小，否则任何调度策略都会遇到调度零碎的零碎瓶颈。
第六节 总结
本章梳理了 Task 建设到 Task 拆分再到挂起复原的逻辑。从中不难发现 Fiber 架构对 Task 进行拆解，升高了工作阻塞的时长，对工作整体来说没有提速。
本章对 Fiber 的底层机制进行了剖析，剖析了工作粒度对调度的影响。在通过 Fiber 机制对工作进行细粒度的切分后，通过调度策略优化性能成为了可能，下一章将具体介绍调度器中的不同调度策略。
