快捷導(dǎo)航

深入理解React調(diào)度(Scheduler)原理

更新時(shí)間：2022年07月04日 09:01:20 作者：YuLong~W

本文主要介紹了深入理解React調(diào)度(Scheduler)原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

異步調(diào)度

問(wèn)題：由于對(duì)于大型的 React 應(yīng)用，會(huì)存在一次更新，遞歸遍歷大量的虛擬 DOM ，造成占用 js 線(xiàn)程，使得瀏覽器沒(méi)有時(shí)間去做一些動(dòng)畫(huà)效果，伴隨項(xiàng)目越來(lái)越大，項(xiàng)目會(huì)越來(lái)越卡。

對(duì)比Vue：

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

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

解決：

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

時(shí)間分片

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

谷歌瀏覽器提供的一個(gè) API，在瀏覽器有空余的時(shí)間，瀏覽器就會(huì)調(diào)用 requestIdleCallback 的回調(diào)。

requestIdleCallback(callback,{ timeout })

callback 回調(diào)。瀏覽器空余時(shí)間執(zhí)行回調(diào)函數(shù)。
timeout 超時(shí)時(shí)間。如果瀏覽器長(zhǎng)時(shí)間沒(méi)有空閑，那么回調(diào)就不會(huì)執(zhí)行，為了解決這個(gè)問(wèn)題，可以通過(guò) requestIdleCallback 的第二個(gè)參數(shù)指定一個(gè)超時(shí)時(shí)間。

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

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

模擬requestdleCallback

條件：

可以主動(dòng)讓出主線(xiàn)程，讓瀏覽器去渲染視圖。
一次事件循環(huán)只執(zhí)行一次，因?yàn)閳?zhí)行一個(gè)以后，還會(huì)請(qǐng)求下一次的時(shí)間片。

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

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

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

在一次更新中，向?yàn)g覽器請(qǐng)求執(zhí)行更新任務(wù)，調(diào)用 requesetHostCallbcak，將更新任務(wù) 函數(shù)callback賦值給 scheduleHostCallback，port2 向 port1 發(fā)起 postMessage消息通知。

port1 會(huì)通過(guò) onmessage，接受來(lái)自 port2 消息，執(zhí)行更新任務(wù) scheduleHostCallback，執(zhí)行完后，清空任務(wù)。

異步調(diào)度原理

React 發(fā)生一次更新，會(huì)統(tǒng)一走 ensureRootIsScheduled（調(diào)度應(yīng)用）

對(duì)于正常更新會(huì)走 performSyncWorkOnRoot 邏輯，最后會(huì)走 workLoopSync 。

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

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

1、scheduleCallback

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

正常更新任務(wù)：

scheduleCallback(Immediate,workLoopSync)

異步更新任務(wù)：

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

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

scheduleCallback 流程如下：

創(chuàng)建一個(gè)新的任務(wù) newTask。
通過(guò)任務(wù)的開(kāi)始時(shí)間( startTime ) 和當(dāng)前時(shí)間( currentTime ) 比較：當(dāng) startTime > currentTime, 說(shuō)明未過(guò)期，存到 timerQueue，當(dāng) startTime <= currentTime，說(shuō)明已過(guò)期, 存到 taskQueue。
如果任務(wù)沒(méi)有過(guò)期，用 requestHostTimeout 延時(shí)執(zhí)行 handleTimeout。
如果任務(wù)過(guò)期，并且沒(méi)有調(diào)度中的任務(wù)，那么調(diào)度 requestHostCallback。
本質(zhì)上調(diào)度的是 flushWork。

2、requestHostTimeout

通過(guò) setTimeout 來(lái)進(jìn)行延時(shí)指定時(shí)間的。