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架构的原因，就是为了将我们原本一气呵成的堆栈调用进行拆分，拆分成一个个可以独立运行的任务，充分利用浏览器的工作机制，提升性能。
