React 調(diào)度原理前置所需要知道的
EventLoop 事件隊(duì)列
MicroTask和macroTask的api范疇
1macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering
2microtasks: process.nextTick, Promises, Object.observe, MutationObserver
這里給了以前的文章幫助理解
Event Loop 的異步流程
Event Loop 事件循環(huán)
requestAnimationFrame
window.requestAnimationFrame(callback);
- requestAnimationFrame(callback) 會(huì)在瀏覽器每次重繪前執(zhí)行 callback 回調(diào), 每次 callback 執(zhí)行的時(shí)機(jī)都是瀏覽器刷新下一幀渲染周期的起點(diǎn)上咱扣。
- requestAnimationFrame(callback) 的回調(diào) callback 回調(diào)參數(shù) timestamp 是回調(diào)被調(diào)用的時(shí)間吠勘，也就是當(dāng)前幀的起始時(shí)間。
requestIdleCallback
var handle = window.requestIdleCallback(callback[, options])
- 可選參數(shù) options, { timeout: number } 回調(diào) callback 的過(guò)期時(shí)間
- callback 回調(diào)的參數(shù)是 Idle?Deadline 對(duì)象埂蕊，{ didTimeout: boolean(根據(jù) timeout 計(jì)算是否超時(shí)), timeRemaining: function(當(dāng)前幀剩余的空閑時(shí)間) }
參考 requestIdleCallback 的用法
requestIdleCallback 調(diào)度
時(shí)間片原理
- 在每一幀的中會(huì)先執(zhí)行 macrotasks 任務(wù) -> 再執(zhí)行 UI rendering -> 最后有剩余時(shí)間執(zhí)行 Idle 回調(diào)
- react 16 之前芽腾，react 通過(guò)虛擬 dom 更新是同步的旦装，一旦有更新就會(huì)一直執(zhí)行到更新完畢, 如果更新很復(fù)雜就會(huì)一直占用瀏覽器主線程，這時(shí)候?yàn)g覽器本身的動(dòng)畫和用戶輸入操作就會(huì)出現(xiàn)卡頓或沒(méi)響應(yīng)摊滔。
- react 16 后阴绢，采用時(shí)間片的方式解決更新卡頓的問(wèn)題店乐。
- 給每個(gè) react 更新任務(wù)一個(gè)過(guò)期時(shí)間 timeout，維護(hù)一個(gè) react 更新隊(duì)列
- 通過(guò) requestAnimationFrame 找到每一幀的開(kāi)始時(shí)間呻袭，再計(jì)算出下一幀的開(kāi)始時(shí)間
- 把優(yōu)先級(jí)最高的 react 更新任務(wù)推入 event loop 的 tasks queue 中
- 每次 event loop 開(kāi)始 react 更新的 tasks 時(shí)都會(huì)檢查這個(gè)任務(wù)是否到期 timeout 了眨八，只有 timeout 時(shí)才會(huì)執(zhí)行
- react 更新任務(wù)會(huì)先進(jìn)入 renderRoot 渲染階段更新 fiberTree 上的內(nèi)容，再進(jìn)行 completeRoot 提交階段更改 dom 的最終結(jié)果左电。
- react 更新任務(wù) didTimeout 過(guò)期時(shí)執(zhí)行 renderRoot 廉侧，這個(gè)渲染階段哪怕時(shí)間很長(zhǎng)也最大限度的保證了瀏覽器高優(yōu)先級(jí)別的動(dòng)畫和用戶輸入的流暢運(yùn)行
React 的 requestIdleCallback 方案
實(shí)現(xiàn) timeout
- 通過(guò) react 的加載時(shí)間，更新任務(wù)的 expirationTime 計(jì)算出一個(gè) timeout 時(shí)間
- 調(diào)度時(shí)通過(guò) timeout 計(jì)算出一個(gè) 過(guò)期的時(shí)間點(diǎn)
實(shí)現(xiàn)時(shí)間片維護(hù)
didTimeout 和 timeRemaining 實(shí)現(xiàn)
-
只有發(fā)現(xiàn)當(dāng)前 task 任務(wù)的到期時(shí)間已經(jīng)超過(guò)當(dāng)前時(shí)間了 didTimeout 才為 true
總結(jié)
- 調(diào)度時(shí)通過(guò) requestAnimationFrame api 在瀏覽器每次重繪前做想做的事
- requestAnimationFrame 回調(diào) animationTick 在瀏覽器動(dòng)畫執(zhí)行前 執(zhí)行
- 他在 animationTick 中確定了下一幀結(jié)束的時(shí)間點(diǎn)
- 因?yàn)椴恢?react 更新需要多少時(shí)間券腔，所以沒(méi)有在 animationTick 中判斷 timeRemaining() 當(dāng)前幀剩余時(shí)間來(lái)執(zhí)行 react 更新
- 而是把用于 react 更新的 flushWork 通過(guò) postMessage 推入下個(gè) tick 事件隊(duì)列中的 idleTick 回調(diào)伏穆，也就是 macrotasks
- 在 window.addEventListener('message', idleTick, false); 的 idleTick 中一直拖到 frameDeadline - currentTime <= 0 當(dāng)前幀完全過(guò)期時(shí)
- 才把 didTimeout = true, 再 執(zhí)行 prevScheduledCallback(didTimeout); - flushWork(didTimout) 這次 react 更新。
- 這次 macrotasks 的 flushWork 先于 requestAnimationFrame 執(zhí)行
- 這時(shí) flushWork 就算更新時(shí)間超過(guò)當(dāng)前幀剩余時(shí)間借用了下一幀的時(shí)間纷纫，也是最大限度的保證了瀏覽器動(dòng)畫的流暢性和優(yōu)先級(jí)枕扫。
