作者：温荣蛟
上篇提到为了解决任务调度粒度管制不够的问题，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机制对工作进行细粒度的切分后，通过调度策略优化性能成为了可能，下一章将具体介绍调度器中的不同调度策略。