0
点赞
收藏
分享

微信扫一扫

视频截屏(视频转图片)

东方小不点 2024-04-27 阅读 18

问题

JavaScript引擎和浏览器的渲染引擎两个线程是互斥的,当有一个线程在执行的时候,另一个线程只能挂起等待。

如果JavaScript线程长时间占用主线程,那么渲染引擎的线程就得长时间等待,页面长时间不更新,会导致页面的响应度变差,给用户的感觉就是页面很卡。

这也是React15的栈调度 所面临的问题。当React在渲染组件的时候,从开始到渲染完成整个过程一气呵成,不能中断。

如果组件很大的话,那么JS线程会一直执行,然后等到整个虚拟DOM树计算完成后,才会交给渲染线程,这样就导致一些用户交互的任务不能立即得到处理,导致卡顿。

Fiber是什么

Fiber是就是React16以后做的一个改变和优化,是对React核心算法的一次重新实现。

做了这些操作:

  1. 给每一个任务增加了优先级,优先级高的任务可以中断优先级低的任务,然后再重新执行优先级低的任务;
  2. 增加了异步任务:调用了requestIdleCallback API ,浏览器空闲的时候执行
  3. DOM diff树变成链表,一个DOM对应两个Fiber,对应两个队列,这是为了找到被中断的任务重新执行。

从架构的角度来看,Fiber是对React核心算法【调和过程】的重写

从编码的角度来看,Fiber是React诶不定义的一种数据结构,它是Fiber树结构的节点单位。

一个Fiber就是一个对象,这个对象包含了元素信息、元素的更新操作队列、类型。它的结构源码如下:

举报

相关推荐

0 条评论