1.requestIdleCallback
requestIdleCallback(workLoop);
这是浏览器给出的一个新API
requestIdleCallback接收一个回调,这个回调会在浏览器空闲时调用,每次调用会传入一个 deadline,可以拿到当前还空余多久可以左自己的事情
然后我们就可以在这个空余时间去遍历自己的fiber tree
2.fiber tree
整体是个链表
我们假设有这样一个元素树
链表生成的过程是:
-
root的child设置为div
-
然后在div的找它的child(将找到的children里的第一个 h1设置为div的child)
-
然后h1找它的child,也就是p
-
一直从上往下找到底
-
然后从底开始找p的兄弟a
-
a再找它的兄弟
-
如果a没有兄弟,回到父节点找h1的兄弟
-
一直找下去直到回到root
从上往下找child,从左到右从下往上的找兄弟 直到回到root 这时候返回的是一个fiber 但是这个fiber是链表的头 它联系着所有fiber 这样就可以把得到的fiber tree 拿去渲染节点了