React为什么引入fiber架构

1. 在fiber架构之前：

堆栈的递归调和算法，会阻塞主线程。
在React 18之前，React使用的是基于堆栈的递归调和算法(dom-diff)，这种算法在进行虚拟DOM比较时可能会阻塞主线程，导致页面渲染卡顿，用户体验不佳。为了解决这个问题，React团队引入了Fiber架构。为了让大家有直观的感受引入Fiber架构，可以看下这样的一个例子

function updateDomTree(parent, children) {
    // 遍历子组件
    for (let i = 0; i < children.length; i++) {
      const child = children[i];
      // 创建或更新 DOM 节点
      updateDOMNode(parent, child);
      // 递归调和子组件的子组件
      if (child.children && child.children.length > 0) {
        updateDomTree(child, child.children);
      }
    }
  }
  
  // 更新整个组件树
  updateDomTree(root, root.children);

这是一个一气呵成的过程，因为javascript是单线程的，如果组件非常多就会出现卡顿。

2. 为什么浏览器会卡顿

• 执行 javascript
• 样式重新计算
• 布局更新
• 绘制
• 合成
• 显示在屏幕
  浏览器显示需要做大量的工作。

3. 浏览器原理可以看下这篇

https://developer.chrome.com/blog/inside-browser-part3/#inner-workings-of-a-renderer-process

4. 不卡顿的策略

为了不卡顿，浏览器每秒钟要刷新频率要达到每秒 60次，每一帧都要16.7毫秒来完成上面的工作。如果执行的时间过长就会导致卡顿。

我们这么思考，浏览器要处理的事情很多，有轻重缓急，不重要的事就等浏览器不忙的时候再去执行。

要想利用浏览器的空余时间来工作，有一个前提要求，那就是任务是一个个独立的任务。而我们引入Fiber架构的原因，就是为了将我们原本一气呵成的堆栈调用进行拆分，拆分成一个个可以独立运行的任务，充分利用浏览器的工作机制，提升性能。