Fiber 架构
Fiber 也称协程、或者纤程。可以理解为一种执行单元或者一种链表数据结构
前置知识
并发 (Concurrency)
定义：并发指的是多个任务在同一时间段内交替执行。它们可能共享相同的资源 (如 CPU)，但并不是在同一时刻同时运行。强调的是多个任务在时间上交替进行，通常依赖于操作系统的任务调度和切换。
实际上在单核的物理环境下同时只能有一个程序在运行
特点
- 任务切换：系统通过任务切换的方式实现多个任务的执行
- 资源共享：多个任务可能会共享相同的资源 (如内存、文件等)
- 非阻塞：一个任务在等待资源时，可以让出资源供其他任务使用，避免系统资源的浪费
示例：在一个多任务操作系统中，同时打开多个应用程序，如浏览网页的同时听音乐。操作系统通过快速切换，使得用户感觉到多个应用程序在同时运行。
并行 (Parallelism)
定义：并行指的是在同一时刻有多个任务真正地同时执行。通常，这需要多个处理器或多核处理器来支持。强调的是多个任务在空间上同时进行，依赖于硬件 (如多处理器或多核处理器) 的支持。
特点
- 同时执行：多个任务在同一时刻在不同的处理器或处理器核心上同时执行
- 独立资源：每个任务使用独立的资源，避免了资源竞争
- 加速计算：适用于计算密集型任务，通过并行计算可以显著提高任务的执行速度
示例：在一个具有多核处理器的计算机中，进行视频渲染或科学计算时，每个处理器核心可以处理一部分任务，从而加快整体的处理速度。
单处理器进程调度策略
0️⃣ 先到先得(First-Come-First-Served, FCFS)
1️⃣ 轮转
2️⃣ 最短进程优先(Shortest Process Next, SPN)
3️⃣ 最短剩余时间(Shortest Remaining Time, SRT)
4️⃣ 最高响应比优先(HRRN)
5️⃣ 反馈法
类比浏览器 JS 执行环境
JS 是单线程运行的，要负责很多任务，如 JS 解析和执行、绘制、事件处理、静态资源加载和处理等，这些任务类似于上面的“进程”，可能某些任务阻塞了，就造成了卡顿，解决办法有三种
- 优化每个任务，让它有多快就多快。挤压CPU运算量
- 快速响应用户，让用户觉得够快，不能阻塞用户的交互
- 尝试 Worker 多线程
Vue 是第一种，React 是第二种
React 16 之前采用递归比对 DOM 树，找出需要变动的节点，然后同步更新它们，称为协调 Reconcilation。整个递归过程不可中断。在 Reconcilation 期间，React 会霸占着浏览器资源，一则会导致用户触发的事件得不到响应, 二则会导致掉帧，用户可以感知到这些卡顿。
React Fiber
React Fiber 是 React v16 引入的新协调引擎，其设计思想旨在解决 React 以前版本在处理大型和复杂应用时的一些性能瓶颈和可扩展性问题。以下是 React Fiber 的主要设计思想和目标：
1. 可中断的渲染 (Interruptible Rendering)
传统的 React 渲染过程是同步的，一旦开始就不会停止，直到整个组件树渲染完毕。这可能会导致在处理复杂更新时出现长时间的阻塞，影响用户体验。React Fiber 引入了可中断的渲染，将渲染过程分解为多个小的任务块，使得浏览器在必要时可以中断渲染过程来处理其他任务（如用户交互）。
2. 优先级调度 (Priority Scheduling)
React Fiber 为不同类型的更新任务分配不同的优先级。这样可以确保高优先级的任务（如用户输入）得到及时响应，而低优先级的任务（如不常见的后台数据更新）可以延迟处理。这种调度机制提高了应用的响应性。
Immediate (-1) - 这个优先级的任务会同步执行, 或者说要马上执行且不能中断
UserBlocking (250ms) 这些任务一般是用户交互的结果, 需要即时得到反馈
Normal (5s) 应对哪些不需要立即感受到的任务，例如网络请求
Low (10s) 这些任务可以放后，但是最终应该得到执行，例如分析通知
Idle (没有超时时间) 一些没有必要做的任务 (e.g. 比如隐藏的内容)，可能会被饿死
3. 增量渲染 (Incremental Rendering)
React Fiber 允许组件的渲染过程是增量的，而不是一次性完成。这意味着大型组件树可以分块处理，每次处理一部分，直到整个树都渲染完成。这种增量渲染减少了主线程的占用时间，使得其他任务可以更流畅地进行。
4. 恢复和重用工作单元 (Reconciliation and Reusability of Work Units)
React Fiber 通过创建一个 Fiber 节点链表结构，将每个组件的更新分解为可以恢复和重用的工作单元。每个 Fiber 节点表示一个组件及其状态信息，Fiber 链表使得 React 可以灵活地暂停、恢复和重用这些工作单元。
5. 一致性和并发模式 (Concurrency Mode)
React Fiber 设计为支持未来的并发模式，这使得 React 能够更好地处理异步渲染任务。通过并发模式，React 可以在保持界面一致性的同时，处理复杂的异步任务，提高应用的整体性能和用户体验。
6. 后备 (Back and Retry)
在遇到高优先级任务时，React Fiber 可以中断当前的渲染任务，并在适当的时候重试。这种后备和重试机制确保了高优先级任务能够迅速得到处理，而低优先级任务则在后台继续进行。
7. 逐帧渲染 (Frame-by-Frame Rendering)
React Fiber 将渲染工作分割到多个帧（Frame）中进行，每帧只处理少量的更新操作。这种逐帧渲染使得应用在处理大量更新时，能够避免界面卡顿，提高用户体验。
通过以上设计思想，React Fiber 解决了传统同步渲染模式的一些局限性，使得 React 能够更高效地处理复杂应用中的频繁更新任务，提高了应用的响应性和性能。
主动让出机制：React 在约定事件片内执行完毕，然后将控制权交还给浏览器，同时申请下一个时间片
通过超时检查机制来让出控制权
React 对比 Vue
React 因为先天的不足——无法精确更新，所以需要 React Fiber 把组件渲染工作切片；而 Vue 基于数据劫持，更新粒度很小，没有这个压力；
React Fiber 这种数据结构使得节点可以回溯到其父节点，只要保留下中断的节点索引，就可以恢复之前的工作进度；
参考链接：