vdom和Fiber比较

356 阅读1分钟

这里主要讨论的是为什么在16.0版本后,开始使用fiber

  • 将虚拟dom对象构造成fiber对象
  • 根据fiber对象渲染成真实dom

时间复杂度

  • vdom结构,遍历一棵树结构的时间复杂度:O(n³)

  • fiber链表结构,遍历链表结构的时间复杂度是:O(n)

能否被打断

  • vdom:遍历是不可以被打断的

  • fiber:遍历可以被打断

总结

vdom
  • 更新采用的是循环递归
  • 任务一旦开始,无法结束,知道任务结束,主线程一直被占用
  • 导致大量组件实例存在时,执行效率变低
  • 用户交互的动画效果,出现页面卡顿
fiber
  • 利用浏览器空闲时间执行,不会长时间占用主线程
  • 将对比、更新dom的操作碎片化
  • 碎片化的任务,可以根据需要暂停

fiber空闲时间调度