1、原因:
react中的render()方法在更新的时候是进行递归操作的,如果在更新的过程中有大量的节点需要更新,就会出现长时间占用JS主线程,并且整个递归过程是无法被打断的,由于JS线程和GUI线程是互斥的,所以可能会看到UI的卡顿
2、实现Fiber架构时,必须要解决的两个问题:
a、保证任务在浏览器空闲的时候执行
b、将任务进行碎片化
requestIdleCallback
requestIdleCallback(callback)是实验性API,可以传入一个回调函数,回调函数能够收到一个deadline对象,通过该对象的timeRemaining()方法可以获取到当前浏览器的空闲时间,如果有空闲时间,那么就执行一小段任务,如果时间不足了,则继续requestIdleCallback,等到浏览器又有空闲时间的时候再接着执行。
链表结构
目前的虚拟DOM是树结构,当任务被打断后,树结构无法恢复之前的任务继续执行,所以需要一种新的数据结构,即链表,链表可以包含多个指针,可以轻易找到下一个节点,继而恢复任务的执行。Fiber采用的链表中包含三个指针,parent指向其父Fiber节点,child指向其子Fiber节点,sibling指向其兄弟Fiber节点。一个Fiber节点对应一个任务节点。
参考