React Fiber架构 vs Stack架构

forever_Mamba
119 阅读9分钟

React v15 以及之前的架构称之为 Stack 架构，从 V16 开始，React重构了整体架构，新架构被称之为 Fiber 架构，新架构相比旧架构有一个最大的特点就是能够实现时间切片。

  • 旧架构的问题？
  • 新架构的解决思路

旧架构的问题

React 使用JavaScript 构建快速响应的大型web应用程序的首选方式;

有哪些情况会导致我的web应用无法快速响应;

总结起来，实际上有两大场景会限制快速响应;

  • 当你需要执行大量计算或者设备本身的性能不足的时候，页面会出现掉帧、卡顿的现象，这个本质上是来自于CPU的瓶颈
  • 进行I/O的时候，需要等待数据返回后再进行后续操作，等待的过程中无法快速响应，这种情况实际上是来源于 I/O 的瓶颈

CPU瓶颈

平时我们再浏览网页的时候，网页实际上是有浏览器绘制出来的，就像一个小朋友在画画一样

平时我们所浏览的网页，里面往往会有一些动起来的东西，比如轮播图、百叶窗之类， 本质其实就是浏览器不停的在进行绘制。

大多数设备的刷新频率为 60FPS，意味着1秒钟需要绘制 60 次， 1000ms/60 =16.66 ms，也就是说浏览器每隔 16ms 就需要绘制一帧。 浏览器在绘制一帧画面的时候，实际上会有很多的事情要做：

浏览器关键路径渲染

我们可以将浏览器的渲染任务被称之为“渲染流水线”，每次执行流水线的时候，大致是需要如上的一些步骤，但是并不是说每一次所有的任务都需要全部执行：

  • 当通过JS 或者CSS 修改 DOM 元素的几何属性（比如长度、宽度）时，会触发完整的渲染流水线，这种情况称之为重排（回流）
  • 当修改的属性不涉及几何属性（比如字体、颜色）时，会省略掉流水线中的 Layout、Layer 过程，这种情况称之为重绘
  • 当修改“不涉及重排、重绘的属性（比如 transform 属性）”时，会省略流水线中 Layout、Layer、Print 过程，仅执行合成线程的绘制工作，这种情况称之为合成

如果按照性能高低进行排序的话，合成 > 重绘 > 重排 （css性能优于js性能）

回流和重绘

浏览器绘制的频率是 16.66ms 一帧，但是执行 JS 与渲染流水线实际上是在同一个线程上执行，也就是意味着如果 JS 执行的时间过长，不能够及时渲染下一帧，页面就会掉帧，就是页面卡顿。

在 Reactv15 之前就存在这个问题，JS 代码执行的时间过长。 在 React 中，需要去计算整颗虚拟 DOM 树，虽然说这是JS 层面的计算，相比直接操作DOM，节省了很多时间，但是每次重新去计算整颗虚拟 DOM 树，会造成每一帧的JS代码的执行时间过长，从而导致动画、还有一些实时更新得不到及时的响应，造成卡顿的视觉效果。

在 React V16 版本之前，进行两颗虚拟DOM 树的对比的时候，需要涉及到遍历上面的结构，这个时候只能使用递归，而且这种递归是不能够打断的，从而造成了 JS 执行时间过长。

image.png

这样的架构模式，官方就称之为 Stack 架构模式，因为采用的是递归，会不停的开启新的函数栈。

I/O 瓶颈

对于前端开发来讲，最主要的1/O 瓶颈就是网络延迟。

网络延迟是一种客观存在的现象，那么如何减少这种现象对用户的影响呢？React 团队给出的答案是：将人机交互的研究成果整合到 UI中。

用户对卡顿的感知是不一样的，输入框哪怕只有轻微的延迟，用户也会认为很卡，假设是加载一个列表，哪怕 loading 好几秒，用户也不会觉得卡顿。

对于 React 来讲，所有的操作都是来自于自变量的变化导致的重新渲染，我们只需要针对不同的操作赋予不同的优先级即可。

具体来说，主要包含以下三个点：

  • 为不同操作造成的"状态变化“赋予不同的优先级
  • 所有优先级统一调度，优先处理“最高优先级的更新”
  • 如果更新正在进行（进入虚拟 DOM 相关工作），此时有“更高优先级的更新”产生的话，中段当前的更新，优先处理高优先级更新

要实现上面的这三个点，就需要 React 底层能实现：

  • 用于调度优先级的调度器
  • 调度器对应的调度算法
  • 支持可中断的虚拟 DOM 的实现

所以不管是解决CPU 的瓶颈还是 I/O 的瓶颈，底层的诉求都是需要实现 time slice

新架构的解决思路

解决CPU 瓶颈

从 Reactv16 开始，官方团队正式引用了 Fiber 的概念，这是一种通过链表来描述 UI 的方式，本质上你也可以看作是一种虚拟 DOM 的实现。

官方对虚拟DOM的解释：

与其将“Virtual DOM”视为一种技术，不如说它是一种模式，人们提到它时经常是要表达不同的东西。在React 的世界里，术语”Virtuai DoM”通常与 React元素关联在一起，因为它们都是代表了用户界面的对象。而 React 也使用一个名为"fibers”的内部对象来存放组件树的附加信息。上述二者也被认为是 React 中“Virtual DOM”实现的一部分。

Fiber 本质上也是一个对象，但是和之前 React元素不同的地方在于对象之间使用链表的结构串联起来，child 指向子元素，sibling 指向兄弟元素，return 指向父元素。 如下图：

image.png 使用链表这种结构，有一个最大的好处就是在进行整棵树的对比（reconcile）计算时，这个过程是可以被打断。

在发现一帧时间已经不够，不能够再继续执行JS，需要渲染下一帧的时候，这个时候就会打断JS的执行，优先渲染下一帧。渲染完成后再接着回来完成上一次没有执行完的JS 计算。

image.png

官方还提供了一个 Stack 架构和 Fiber 架构的对比示例：claudiopro.gihub.io/react-fiber…

下面是 React 源码中创建 Fiber 对象的相关代码：

const createFiber = function (tag, pendingProps, key, mode) {
    //创建 fiber 节点的实例对象
    return new FiberNode(tag, pendingProps, key, mode) ;
}

function FiberNode(tag, pendingProps, key, mode) {
  // Instance
  this.tag = tag;
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null; // 映射真实 DOM

  // Fiber 上下、前后 fiber 通过链表的形式进行关联
  this.return = null;
  this.child = null;
  this.sibling = null;
  this.index = 0;

  this.ref = null;
  // 和 hook 相关
  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.firstContextDependency = null;

  this.mode = mode;

  // Effects
  this.effectTag = NoEffect;
  this.nextEffect = null;

  this.firstEffect = null;
  this.lastEffect = null;

  this.expirationTime = NoWork;
  this.childExpirationTime = NoWork;

  this.alternate = null;

}　

解决 I/O 瓶颈

从 React v16 开始引入了 Scheduler（调度器），用来调度任务的优先级。

React v16之前：

  • Reconciler（协调器）：vdom的实现，根据自变量的变化计算出UI的变化
  • Renderer（渲染器）：负责将 UI 的变化渲染到宿主环境

从 React v16 开始，多了一个动作：

  • Scheduler（调度器）；调度任务的优先级，高优先级的任务会优先进入到 Reconciler
  • Reconciler（协调器）：vdom的实现，根据自变量的变化计算出UI的变化
  • Renderer（渲染器）：负责将 UI 的变化渲染到宿主环境

新架构中，Reconciler 的更新流程也从之前的递归变成了”可中断的循环过程”。

function workLoopConcurrent(
  // 如果还有任务，并且时间切片还有剩余的时间
  while(workInProgress !== null && !shouldYield()) {
  performUnitofWork(workInProgress)
  }
}

function shouldYield(){
 // 当前时间是否大于过期时间
 // 其中 deadline = getCurrentTime（） + yieldInterval
 // yieldInterval 为调度器预设的时间间隔，默认为 5ms
  return getCurrentTime() >= deadline;
}

每次循环都会调用 shouldVield 判断当前的时间切片是否有足够的剩余时间，如果没有足够的剩余时间，就暂停 reconciler 的执行，将主线程还给渲染流水线，进行下一帧的渲染操作，渲染工作完成后，再等待下一个宏任务进行后续代码的执行。

总结

题目：是否了解过 React 的架构？新的 Fiber 架构相较于之前的Stack 架构有什么优势？

React v15及其之前的架构：

  • Reconciler（协调器）：VDOM 的实现，负责根据自变量变化计算出UI变化
  • Renderer（渲染器）：负责将 UI 变化渲染到宿主环境中

这种架构称之为 Stack架构，在 Reconciler 中，mount 的组件会调用 mountComponent，update 的组件会调用updateComponent，这两个方法都会递归更新子组件，更新流程一旦开始，中途无法中断。

但是随着应用规模的逐渐增大，之前的架构模式无法再满足“快速响应“这一需求，主要受限于如下两个方面：

  • CPU瓶颈：由于VDOM 在进行差异比较时，采用的是递归的方式，JS 计算会消耗大量的时间，从而导致动画、还有一些需要实时更新的内容产生视觉上的卡顿。
  • I/0瓶颈：由于各种基于“自变量“变化而产生的更新任务没有优先级的概念，因此在某些更新任务（例如文本框的输入）有稍微的延迟，对于用户来讲也是非常敏感的，会让用户产生卡顿的感觉。

新的架构称之为Fper架构：

  • Scheduler（调度器）：调度任务的优先级，高优先级任务会优先进入到 Reconciler cation
  • Reconciler（协调器）：VDOM 的实现，负责根据自变量变化计算出UI 变化
  • Renderer（渲染器）：负责将 UI 变化渲染到宿主环境中

首先引入了 Fiber 的概念，通过一个对象来描述一个 DOM 节点，但是和之前方案不同的地方在于，每个 Fiber 对象之间通过链表的方式来进行串联。通过 child 来指向子元索，通过 sibling 指向兄弟元素，通过 return 来指向父元素。

在新架构中，Reconciler 中的更新流程从递归变为了“可中断的循环过程”。每次循环都会调用 shouldYield 判断当前的 Timeslice 是否有剩余时间，没有剩余时间则暂停更新流程，将主线程还给渲染流水线，等待下一个宏任务再继续执行。这样就解决了 CPU 的瓶颈问题。

另外在新架构中还引入了 Scheduler 调度器，用来调度任务的优先级，从而解决了1/0 的瓶颈问题。

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏

avatar
文章
阅读
粉丝