一、為什么要用 fiber架構

　在react16 之前，react是用 diff 算法對vitrulDom進行對比更新渲染，這種 diff 算法對比 如果遇到需要大量時間執行的方法任務時，就會造成頁面卡頓

二、什么是 fiber 架構

　fiber架構簡單點說就是 任務切片（一個耗時任務在瀏覽器空閑時，分多次執行），這樣就在用戶感官上頁面流暢不卡頓

瀏覽器卡頓判斷標準：

 正常情況下人眼感受到的 每秒 60幀，也就是16.6ms/幀，如果超過超過這個值，就會感受到卡頓，如果說某個任務耗時超過16.6ms就會造成頁面暫時卡頓

fiber怎么做：

  fiber 架構會把一個要耗時任務會分解成無數個執行只需大概5ms的任務片段，在瀏覽器空閑時執行

如何判斷瀏覽器是否空閑：

  瀏覽器有個API叫  requestIdleCallback 

 requestIdleCallback回調函數: 回調函數是在主線程空閑時被調用的函數。每次調用時，都會傳入一個IdleDeadline對象，該對象提供一個timeRemaining()方     法，用來檢測當前幀中剩余的空閑時間。

注意：requestIdleCallback 是一個宏任務，在事件列表中是最后執行的

but?。?！react 并沒有使用瀏覽器原生的 requestIdleCallback 方法（因為瀏覽器兼容，目前只要chorm支持）

react 而是用了  MessageChannel 進行任務調度

什么是 MessageChannel？

MessageChanne設計初衷是為了方便 我們在不同的上下文之間進行通訊，例如web Worker,iframe
它提供了兩個端口（port1 和 port2），通過這些端口，消息可以在兩個獨立的線程之間雙向傳遞

const channel = new MessageChannel();
const port1 = channel.port1;
const port2 = channel.port2;

// 設置 port1 的消息處理函數
port1.onmessage = (event) => {
    console.log('Received by port1:', event.data);
    port1.postMessage('Reply from port1'); // 向 port2 發送回復消息
};

// 設置 port2 的消息處理函數
port2.onmessage = (event) => {
    console.log('Received by port2:', event.data);
};

// 通過 port2 發送消息給 port1
port2.postMessage('Message from port2');

react 是實現是復雜的，他要設計任務執行優先級（優先級設計包含過期時間、是否用戶操作、組件優先級等）

三、fiber 如何中斷任務

 fiber 分片任務執行的兩個階段：

1、調度：任務中斷可以在調度階段進行

2、提交：提交階段任務不能中斷