Fiber

13 阅读1分钟

why?

  1. 使react的渲染过程可以被中断,其实主要是“协调”这个过程,对比diff虚拟dom树的过程可能会非常耗时,为了不长时间占用浏览器导致的卡顿,每一帧有规律的执行
  2. 让位给高优先级的任务
  3. 不用es6原生的generator做中断和恢复?改造代码量大,不希望维护额外的状态

requestIdleCallback使浏览器在一帧有空闲的时候执行回调 浏览器在一帧内都做什么事情?

  1. 处理用户输入事件
  2. 执行js
  3. requestAnimation的调用
  4. layout布局
  5. 绘制

那么如果浏览器一直很忙怎么办? requestIdleCallback可以有timeout参数,如果超过timeout一直没有被执行,那么会在下一帧强制被执行回调 但是requestIdleCallback的兼容性很不好 所以react实际上是用messageChannel去自己实现了这个能力

任务是有优先级的,

  1. Immediate
  2. userBlocking阻塞用户使用的
  3. normal
  4. Low,可以被延后,但是总会被执行的
  5. Idle