React Diff 和 Fiber架构

传统diff算法的优化

• 根据根节点一次递归子节点进行更新的比对，算法复杂度0(n^3), 意味着1000个节点需要数十亿的比对，而CPU每秒大约处理30亿次计算机的指令任务，何况浏览器还需执行其它的任务。
• 在策略上优化diff算法：
  1. Dom节点的跨层级移动忽略不计，即先创建移动节点到目标位置然后删除移动节点；
     TreeDiff: 只比较同层级
  2. 同级节点通过唯一id进行区分；
     ComponentDiff: 相同组件创建出的组件，按同源策略比较虚拟Dom递归到子元素,如果不是直接替换新的
  3. 同类组件生成相同结构树节点；
     ElementDiff:
     有key属性的话根据key值来比较对应的新旧节点来判断删除新增修改
     没有设置的话比较整个节点的内容

diff算法到Fiber架构

• diff算法产生的问题
  面对数量庞大层级复杂的节点业务，大量dom的更新占用过多的内存和计算时间将导致：

1. 渲染UI不流畅
2. 用户时间操作得不到及时反馈

• fiber架构实现的要素

1. vdom ---> fiberNode
   fiberNode = return + sibling + children

// children 
if(stateNode.render)  {
    children = stateNode.render();
}else children = fiber.children;

原本的虚拟DOM编译后是递归的代码执行，栈调度式的执行，无法在执行中途break、continue、suspend操作，于是需要一种链表结构，使其更具有灵活性，性能也要比递归更好。

2. 如何决定在什么时间段执行任务片段
   下面是一些自救措施： （帧数控制调用，闲时调用，多线程调用， 进入可视区调用）
   • requestAnimationFrame
   • requestIdleCallback
   • web worker
   • IntersectionObserver

updateFiberAndView有出两个时间段，一个给自己的虚拟dom渲染，一个给浏览器的
requestAnimationFrame帮我们执行第二个时间段保证流畅性，
requestIdleCallback会在帧结束时并且有空闲时间。或者用户不与网页交互时，在下次时间循环之前执行回调

/*
* 将空闲时间控制在100ms以内，不影响视觉感官的阻塞
**/
 //  timeout 任务执行时间超时多少毫秒，回调会放在下一次空闲使其执行
    requestIdelCallback(workTask, { timeout: 1000 });
    function workTask (deadline) {
      // deadline.timeRemaining()可以获取到当前帧剩余时间
      while ((deadline.timeRemaining() > 0 || deadline.didTimeout)   && tasks.length > 0) {
        workTask();
      }
      if (tasks.length > 0){
        requestIdleCallback(workTask);
      }
    }

• react为了兼容，自己实现requestIdleCallback
  requestAnimationFrame + 计算帧时间及下一帧时间 + MessageChannel 就是我们实现 requestIdleCallback
  react的requestIdleCallback实现