異步調度

問題：由于對于大型的 React 應用，會存在一次更新，遞歸遍歷大量的虛擬 DOM ，造成占用 js 線程，使得瀏覽器沒有時間去做一些動畫效果，伴隨項目越來越大，項目會越來越卡。

對比Vue：

Vue 有這 template 模版收集依賴的過程，輕松構建響應式，使得在一次更新中，Vue 能夠迅速響應，找到需要更新的范圍，然后以組件粒度更新組件，渲染視圖。

React 中，一次更新 React 無法知道此次更新的波及范圍，所以 React 選擇從根節(jié)點開始 diff ，查找不同，更新這些不同。

解決：

把 React 的更新，交給瀏覽器自己控制，瀏覽器先執(zhí)行繪制任務，空閑時間執(zhí)行更新任務，解決了卡頓問題。即采用異步調度的方法。

時間分片

React讓瀏覽器控制React更新：瀏覽器每執(zhí)行一次事件循環(huán)都會：處理事件，執(zhí)行 js，調用requestAnimation，布局 Layout，繪制 Paint，在一次執(zhí)行后，瀏覽器進入空閑時，可以執(zhí)行更新任務

谷歌瀏覽器提供的一個 API， 在瀏覽器有空余的時間，瀏覽器就會調用 requestIdleCallback 的回調。

requestIdleCallback(callback,{ timeout })

• callback 回調。瀏覽器空余時間執(zhí)行回調函數(shù)。
• timeout 超時時間。如果瀏覽器長時間沒有空閑，那么回調就不會執(zhí)行，為了解決這個問題，可以通過 requestIdleCallback 的第二個參數(shù)指定一個超時時間。

React 為了防止 requestIdleCallback 中的任務由于瀏覽器沒有空閑時間而卡死，所以設置了 5 個優(yōu)先級。

• Immediate -1 需要立刻執(zhí)行。
• UserBlocking 250ms 超時時間250ms，一般指的是用戶交互。
• Normal 5000ms 超時時間5s，不需要直觀立即變化的任務，比如網絡請求。
• Low 10000ms 超時時間10s，肯定要執(zhí)行的任務，但是可以放在最后處理。
• Idle 一些沒有必要的任務，可能不會執(zhí)行。

模擬requestdleCallback

條件：

• 可以主動讓出主線程，讓瀏覽器去渲染視圖。
• 一次事件循環(huán)只執(zhí)行一次，因為執(zhí)行一個以后，還會請求下一次的時間片。

宏任務：在下次事件循環(huán)中執(zhí)行，不會阻塞瀏覽器更新。且瀏覽器一次只會執(zhí)行一個宏任務。

1、采用setTimeout(fn, 0)，間隔時間會變成 4 毫秒左右，不是最優(yōu)選方案

2、采用MessageChannel 接口，允許開發(fā)者創(chuàng)建一個新的消息通道，并通過它的兩個 MessagePort 屬性發(fā)送數(shù)據(jù)。

在一次更新中，向瀏覽器請求執(zhí)行更新任務，調用 requesetHostCallbcak，將更新任務 函數(shù)callback賦值給 scheduleHostCallback，port2 向 port1 發(fā)起 postMessage消息通知。

port1 會通過 onmessage，接受來自 port2 消息，執(zhí)行更新任務 scheduleHostCallback，執(zhí)行完后，清空任務。

異步調度原理

React 發(fā)生一次更新，會統(tǒng)一走 ensureRootIsScheduled（調度應用）

對于 正常更新 會走 performSyncWorkOnRoot 邏輯，最后會走 workLoopSync 。

對于 低優(yōu)先級的異步更新 會走 performConcurrentWorkOnRoot 邏輯，最后會走 workLoopConcurrent 。

區(qū)別：異步模式會調用一個 shouldYield()，如果當前瀏覽器沒有空余時間， shouldYield 會中止循環(huán)，直到瀏覽器有空閑時間后再繼續(xù)遍歷，從而達到終止渲染的目的。解決了一次性遍歷大量的 fiber ，導致瀏覽器沒有時間執(zhí)行一些渲染任務，導致了頁面卡頓。

1、scheduleCallback

更新任務、異步更新任務都是由調度器 scheduleCallback 統(tǒng)一調度的

正常更新任務：

scheduleCallback(Immediate,workLoopSync)

異步更新任務：

/* 計算超時等級，就是如上那五個等級 */
var priorityLevel = inferPriorityFromExpirationTime(currentTime, expirationTime);
scheduleCallback(priorityLevel,workLoopConcurrent)

scheduleCallback() 函數(shù)執(zhí)行過程

scheduleCallback 流程如下：

• 創(chuàng)建一個新的任務 newTask。
• 通過任務的開始時間( startTime ) 和 當前時間( currentTime ) 比較：當 startTime > currentTime, 說明未過期，存到 timerQueue，當 startTime <= currentTime，說明已過期, 存到 taskQueue。
• 如果任務沒有過期，用 requestHostTimeout 延時執(zhí)行 handleTimeout。
• 如果任務過期，并且沒有調度中的任務，那么調度 requestHostCallback。
• 本質上調度的是 flushWork。

2、requestHostTimeout

通過 setTimeout 來進行延時指定時間的。

延時執(zhí)行 handleTimeout，cancelHostTimeout 用于清除當前的延時器。

3、handleTimeout

延時時間后，handleTimeout 會把任務重新放在 requestHostCallback 調度。

通過 advanceTimers 將 timerQueue 中過期的任務轉移到 taskQueue 中。然后調用 requestHostCallback 調度過期的任務。

4、advanceTimers

如果任務已經過期，那么將 timerQueue 中的過期任務，放入 taskQueue。

5、flushWork

requestHostCallback ，放入 MessageChannel 中的回調函數(shù)是flushWork。

flushWork 如果有延時任務執(zhí)行的話，那么會先暫停延時任務，然后調用 workLoop ，去真正執(zhí)行超時的更新任務。

6、workLoop

workLoop 是調度中的 workLoop

React 的更新任務最后都是放在 taskQueue 中

workLoop 會依次更新過期任務隊列中的任務

調度流程圖

總結

1、異步調度原因

2、時間分片和 requestIdleCallback

3、異步調度原理

4、調度流程

到此這篇關于深入理解React 調度(Scheduler)原理的文章就介紹到這了,更多相關React 調度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論