react時(shí)間分片實(shí)現(xiàn)流程詳解
我們常說(shuō)的調(diào)度，可以分為兩大模塊，時(shí)間分片和優(yōu)先級(jí)調(diào)度
- 時(shí)間分片的異步渲染是優(yōu)先級(jí)調(diào)度實(shí)現(xiàn)的前提
- 優(yōu)先級(jí)調(diào)度在異步渲染的基礎(chǔ)上引入優(yōu)先級(jí)機(jī)制控制任務(wù)的打斷、替換。
本節(jié)將從時(shí)間分片的實(shí)現(xiàn)剖析react的異步渲染原理，閱讀本文你講可以了解
- 時(shí)間分片是什么
- 為什么需要時(shí)間分片
- 時(shí)間分片在react中是如何運(yùn)行的
- 時(shí)間分片的極簡(jiǎn)實(shí)現(xiàn)
什么是時(shí)間分片
上文提到過(guò)，時(shí)間分片其實(shí)就是一個(gè)固定而連續(xù)且有間隔的時(shí)間區(qū)間
固定：時(shí)間分片是工作時(shí)長(zhǎng)是固定的
連續(xù)：分片之間是連續(xù)的，當(dāng)前分片內(nèi)有工作沒(méi)做完，會(huì)留到下個(gè)分片繼續(xù)
有間隔：在進(jìn)入下一個(gè)分片前，會(huì)有一定時(shí)間的間隔
這些解釋比較抽象，可以更加通俗去理解
固定：每天固定工作8小時(shí)
連續(xù)：每天都要上班
有間隔：明天上班前會(huì)休息一段時(shí)間
為什么需要時(shí)間分片
我們知道，react最重要，也是最耗時(shí)的任務(wù)是節(jié)點(diǎn)遍歷。
設(shè)想一個(gè)頁(yè)面上有一萬(wàn)個(gè)DOM節(jié)點(diǎn)，如果我們用同步的方式一個(gè)個(gè)遍歷完需要花費(fèi)多少時(shí)間。而且如果是同步遍歷的話，遍歷的過(guò)程中，JS線程一直會(huì)霸占主線程，導(dǎo)致阻塞了瀏覽器的其他線程，導(dǎo)致卡頓的情況出現(xiàn)。
換個(gè)思路解決這個(gè)遍歷問(wèn)題，能不能遍歷一會(huì)，休息一會(huì)，休息的過(guò)程中就可以把主線程交還給渲染線程和事件線程，這樣就能及時(shí)渲染節(jié)點(diǎn)和響應(yīng)用戶事件，避免造成卡頓。
為了實(shí)現(xiàn)遍歷一會(huì)，休息一會(huì)，我們可以將整個(gè)過(guò)程分解為以下三個(gè)步驟
- 分片開(kāi)啟
- 分片中斷、分片重啟
- 延遲執(zhí)行
這三個(gè)步驟與時(shí)間分片的三個(gè)特性一一對(duì)應(yīng)
實(shí)現(xiàn)分片開(kāi)啟 - 固定
時(shí)間分片是獨(dú)立于React的節(jié)點(diǎn)遍歷流程的，所以只需要把節(jié)點(diǎn)遍歷的入口函數(shù)以回調(diào)函數(shù)的形式傳入即可，這樣就可以讓時(shí)間分片來(lái)決定節(jié)點(diǎn)遍歷執(zhí)行時(shí)機(jī)。
// 節(jié)點(diǎn)遍歷的入口函數(shù)
function Reconcile協(xié)調(diào)() {
節(jié)點(diǎn)遍歷()
}
function Schedule調(diào)度() {
創(chuàng)建分片(Reconcile協(xié)調(diào))
}
第一步，需要將時(shí)間分片要調(diào)度的函數(shù)抽象為一個(gè)任務(wù)對(duì)象
function 創(chuàng)建分片(需要被調(diào)度的函數(shù)) {
const 新的任務(wù) = {
callback: 需要被調(diào)度的函數(shù)
}
}
第二步，設(shè)定分片工作時(shí)長(zhǎng)，為了方便后續(xù)，可以直接計(jì)算過(guò)期時(shí)間。分片工作時(shí)長(zhǎng)一般為5ms，但Scheduler會(huì)根據(jù)任務(wù)優(yōu)先級(jí)有所調(diào)整，這里為了更好理解，先默認(rèn)5ms。
const taskQueue = []
function 創(chuàng)建分片(需要被調(diào)度的函數(shù)) {
const 新的任務(wù) = {
callback: 需要被調(diào)度的函數(shù),
expirationTime: performance.now() + 5000
}
taskQueue.push(新的任務(wù))
發(fā)起異步調(diào)度()
}
每次分片的創(chuàng)建其實(shí)都是新一輪調(diào)度的開(kāi)始，所以在末尾會(huì)發(fā)起異步調(diào)度
為什么用performance.now()而不用Date.now()
performance.now()返回當(dāng)前頁(yè)面的停留時(shí)間，Date.now()返回當(dāng)前系統(tǒng)時(shí)間。但不同的是performance.now()精度更高，且比Date.now()更可靠
performance.now()返回的是微秒級(jí)的，Date.now()只是毫秒級(jí)performance.now()一個(gè)恒定的速率慢慢增加的，它不會(huì)受到系統(tǒng)時(shí)間的影響。Date.now()受到系統(tǒng)時(shí)間影響，系統(tǒng)時(shí)間修改Date.now()也會(huì)改變
實(shí)現(xiàn)分片中斷、重啟 - 連續(xù)
分片中斷
我們?cè)诘谝徽乱呀?jīng)將React的虛擬DOM結(jié)構(gòu)從樹(shù)形結(jié)構(gòu)優(yōu)化成鏈表結(jié)構(gòu)，所以能輕松使用while循環(huán)實(shí)現(xiàn)可中斷的遍歷
那么如果要將遍歷任務(wù)和時(shí)間分片相結(jié)合，且實(shí)現(xiàn)分片中斷功能的話，只需要在while循環(huán)出加入分片時(shí)間過(guò)期的校驗(yàn)即可
function 分片過(guò)期校驗(yàn)() {
return (perfromance.now() - 分片開(kāi)啟時(shí)間) >= 5000
}
let 需要被遍歷的幸運(yùn)兒節(jié)點(diǎn) = null
function 構(gòu)建節(jié)點(diǎn)() {
/** * ...在這里進(jìn)行節(jié)點(diǎn)構(gòu)建工作 */
需要被遍歷的幸運(yùn)兒節(jié)點(diǎn) = 需要被遍歷的幸運(yùn)兒節(jié)點(diǎn).next
}
function 節(jié)點(diǎn)遍歷() {
while (需要被遍歷的幸運(yùn)兒節(jié)點(diǎn) != null && !分片過(guò)期校驗(yàn)()) {
構(gòu)建節(jié)點(diǎn)()
}
}
function Schedule調(diào)度() {
創(chuàng)建分片(Reconcile協(xié)調(diào))
}
分片重啟
分片重啟意思就是上一輪時(shí)間分片因?yàn)檫^(guò)期中斷了，需要重新發(fā)起一輪時(shí)間分片。
實(shí)現(xiàn)的思路是，在上一輪分片結(jié)束之后判斷是否還需要開(kāi)啟下一輪分片，需要的話則重新發(fā)起一輪異步調(diào)度即可，相關(guān)參考視頻講解：進(jìn)入學(xué)習(xí)
function 分片過(guò)期校驗(yàn)() {
return (perfromance.now() - 分片開(kāi)啟時(shí)間) >= 5000
}
function 分片事件循環(huán)() {
let 棧頂任務(wù) = taskQueue.peek()
while (棧頂任務(wù)) {
if (分片過(guò)期校驗(yàn)()) break
const 棧頂任務(wù)回調(diào) = 棧頂任務(wù).callback()
if (typeof 棧頂任務(wù)回調(diào) == 'function') {
// 當(dāng)前任務(wù)還沒(méi)有執(zhí)行完，繼續(xù)搞
棧頂任務(wù).callback = 棧頂任務(wù)回調(diào)
} else {
// 當(dāng)前任務(wù)已執(zhí)行完，彈出隊(duì)列
taskQueue.pop()
}
棧頂任務(wù) = taskQueue.peek()
}
// 還有任務(wù)哦
if (棧頂任務(wù)) return true
return false
}
function 分片執(zhí)行() {
分片開(kāi)啟時(shí)間 = performance.now()
var 是否還有任務(wù)未執(zhí)行完畢
try {
是否還有任務(wù)未執(zhí)行完畢 = 分片事件循環(huán)()
} finally {
// 分片重啟
if (是否還有任務(wù)未執(zhí)行) 發(fā)起異步調(diào)度()
}
}
function 發(fā)起異步調(diào)度() {
// 這里實(shí)際上是異步執(zhí)行，看下面有間隔
分片執(zhí)行()
}
重啟的條件就是判斷分片任務(wù)隊(duì)列中是否還有任務(wù)，有的話就發(fā)起下一輪的時(shí)間分片
實(shí)現(xiàn)延遲執(zhí)行 - 有間隔
有間隔的本質(zhì)是延遲JS的執(zhí)行，讓瀏覽器有喘息的時(shí)間，去處理其他線程的任務(wù)，哪如何把主線程控制權(quán)交還給瀏覽器呢？？
可以使用異步特性發(fā)起下一輪時(shí)間分片，實(shí)現(xiàn)延遲執(zhí)行
function 發(fā)起異步調(diào)度() {
// 將主線程短暫的交還給瀏覽器
setTimeout(() => {
分片執(zhí)行()
}, 0)
}
為什么選擇宏任務(wù)實(shí)現(xiàn)異步執(zhí)行
微任務(wù)無(wú)法真正達(dá)到交還主線程控制權(quán)的要求。
因?yàn)橐惠喪录h(huán)，是先執(zhí)行一個(gè)宏任務(wù)，然后再清空微任務(wù)隊(duì)列里面的任務(wù)，如果在清空微任務(wù)隊(duì)列的過(guò)程中，依然有新任務(wù)插入到微任務(wù)隊(duì)列中的話，還是把這些任務(wù)執(zhí)行完畢才會(huì)釋放主線程。所以微任務(wù)不合適。
時(shí)間分片異步執(zhí)行方案的演進(jìn)
為什么不是setTimeout？
因?yàn)閟etTimeout的遞歸層級(jí)過(guò)深的話，延遲就不是1ms，而是4ms，這樣會(huì)造成延遲時(shí)間過(guò)長(zhǎng)
為什么不是requestAnimationFrame？
requestAnimationFramed是在微任務(wù)執(zhí)行完之后，瀏覽器重排重繪之前執(zhí)行，執(zhí)行的時(shí)機(jī)是不準(zhǔn)確的。如果raf之前JS的執(zhí)行時(shí)間過(guò)長(zhǎng)，依然會(huì)造成延遲
為什么不是requestIdleCallback？
requestIdleCallback的執(zhí)行時(shí)機(jī)是在瀏覽器重排重繪之后，也就是瀏覽器的空閑時(shí)間執(zhí)行。其實(shí)執(zhí)行的時(shí)機(jī)依然是不準(zhǔn)確的，raf執(zhí)行的JS代碼耗時(shí)可能會(huì)過(guò)長(zhǎng)
為什么是 MessageChannel？
MessageChannel的執(zhí)行時(shí)機(jī)比setTimeout靠前
在React中，異步執(zhí)行優(yōu)先使用setImmediate，其次是MessageChannel，最后是setTimeout，都是根據(jù)瀏覽器對(duì)這些的特性支持程度決定的。
時(shí)間分片簡(jiǎn)單實(shí)現(xiàn)
下面會(huì)整合上面的所有代碼，模擬出最簡(jiǎn)單的時(shí)間分片實(shí)現(xiàn)（不包含優(yōu)先級(jí)機(jī)制）
Scheduler.js
const taskQueue = []
let 分片開(kāi)啟時(shí)間 = -1
// **時(shí)間分片核心**
const 分片過(guò)期校驗(yàn) = () => {
return (perfromance.now() - 分片開(kāi)啟時(shí)間) >= 5000
}
function 分片事件循環(huán)() {
let 棧頂任務(wù) = taskQueue.peek()
while (棧頂任務(wù)) {
// 每執(zhí)行完一個(gè)任務(wù)，都要校驗(yàn)一下分片是否過(guò)期
if (分片過(guò)期校驗(yàn)()) break
const 棧頂任務(wù)回調(diào) = 棧頂任務(wù).callback()
if (typeof 棧頂任務(wù)回調(diào) == 'function') {
// 當(dāng)前任務(wù)還沒(méi)有執(zhí)行完，繼續(xù)搞
棧頂任務(wù).callback = 棧頂任務(wù)回調(diào)
} else {
// 當(dāng)前任務(wù)已執(zhí)行完，彈出隊(duì)列
taskQueue.pop()
}
棧頂任務(wù) = taskQueue.peek()
}
// 還有任務(wù)哦
if (棧頂任務(wù)) return true
return false
}
function 分片執(zhí)行() {
分片開(kāi)啟時(shí)間 = performance.now()
var 是否還有任務(wù)未執(zhí)行完畢
try {
是否還有任務(wù)未執(zhí)行完畢 = 分片事件循環(huán)()
} finally {
// **時(shí)間分片核心：分片重啟**
if (是否還有任務(wù)未執(zhí)行) 發(fā)起異步調(diào)度()
}
}
// 實(shí)例化 MessageChannel
const channel = new MessageChannel()
const port2 = channel.port2
channel.port1.onmessage = 分片執(zhí)行
function 發(fā)起異步調(diào)度() {
// 向通道1發(fā)消息，通道1收到消息就會(huì)執(zhí)行分片任務(wù)
// **時(shí)間分片核心：延遲執(zhí)行**
port2.postMessage(null)
}
function 創(chuàng)建分片(需要被調(diào)度的函數(shù)) {
// **時(shí)間分片核心：分片開(kāi)啟**
const 新的任務(wù) = {
callback: 需要被調(diào)度的函數(shù),
expirationTime: performance.now() + 5000
}
taskQueue.push(新的任務(wù))
發(fā)起異步調(diào)度()
}
export default {
創(chuàng)建分片,
分片過(guò)期校驗(yàn)
}
ReactDOM.js
import * as Scheduler from './Scheduler'
const {
創(chuàng)建分片,
分片過(guò)期校驗(yàn)
} = Scheduler
let 需要被遍歷的幸運(yùn)兒節(jié)點(diǎn) = null
function 構(gòu)建節(jié)點(diǎn)() {
/** * ...在這里進(jìn)行節(jié)點(diǎn)構(gòu)建工作 */
需要被遍歷的幸運(yùn)兒節(jié)點(diǎn) = 需要被遍歷的幸運(yùn)兒節(jié)點(diǎn).next
}
function 節(jié)點(diǎn)遍歷() {
// **時(shí)間分片核心：分片中斷**
while (需要被遍歷的幸運(yùn)兒節(jié)點(diǎn) != null && !分片過(guò)期校驗(yàn)()) {
構(gòu)建節(jié)點(diǎn)()
}
}
function Schedule調(diào)度() {
創(chuàng)建分片(Reconcile協(xié)調(diào))
}
function 調(diào)度入口() {
需要被遍歷的幸運(yùn)兒節(jié)點(diǎn) = react應(yīng)用根節(jié)點(diǎn)
Schedule調(diào)度()
}
調(diào)度入口()
這段時(shí)間分片的偽代碼相對(duì)于react中源碼的實(shí)現(xiàn)，少了很多邏輯判斷，并且集中了起來(lái)，應(yīng)該會(huì)相對(duì)好理解很多。
如果還是覺(jué)得有點(diǎn)晦澀，可以重點(diǎn)關(guān)注偽代碼中標(biāo)有時(shí)間分片核心注釋的代碼，結(jié)合上文提到的概念理解
總結(jié)
讀完這篇文章估計(jì)你可能對(duì)時(shí)間分片的概念已經(jīng)有所有了解了，是不是覺(jué)得react16的新特性之一時(shí)間分片，也并沒(méi)有想象中的神秘。
總的下來(lái)，時(shí)間分片就是由簡(jiǎn)單的三個(gè)模塊組成：
- 分片開(kāi)啟
- 分片中斷、重啟
- 延遲執(zhí)行
時(shí)間分片是Scheduler調(diào)度器兩大特性中的一個(gè)，另一個(gè)是任務(wù)的優(yōu)先級(jí)調(diào)度，接下來(lái)可能會(huì)花兩到三篇的篇幅去講解。在源碼閱讀的過(guò)程中，我覺(jué)得時(shí)間分片的實(shí)現(xiàn)已經(jīng)非常驚艷了，沒(méi)想到后面優(yōu)先級(jí)調(diào)度的設(shè)計(jì)對(duì)我更是無(wú)可匹敵的沖擊。
到此這篇關(guān)于react時(shí)間分片實(shí)現(xiàn)流程詳解的文章就介紹到這了,更多相關(guān)react時(shí)間分片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React中使用Echarts無(wú)法顯示title、tooltip等組件的解決方案
這篇文章主要介紹了React中使用Echarts無(wú)法顯示title、tooltip等組件的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
react中實(shí)現(xiàn)修改input的defaultValue
這篇文章主要介紹了react中實(shí)現(xiàn)修改input的defaultValue方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
React-intl 實(shí)現(xiàn)多語(yǔ)言的示例代碼
本篇文章主要介紹了React-intl 實(shí)現(xiàn)多語(yǔ)言的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要為大家介紹了create-react-app常用自定義配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了React如何配置src根目錄@,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2024-01-01
使用React實(shí)現(xiàn)內(nèi)容滑動(dòng)組件效果
這篇文章主要介紹了使用React實(shí)現(xiàn)一個(gè)內(nèi)容滑動(dòng)組件效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了如何基于react實(shí)現(xiàn)下拉刷新效果,在下拉的時(shí)候會(huì)進(jìn)入loading狀態(tài),文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03
作為老司機(jī)使用 React 總結(jié)的 11 個(gè)經(jīng)驗(yàn)教訓(xùn)
這篇文章主要介紹了作為老司機(jī)使用 React 總結(jié)的 11 個(gè)經(jīng)驗(yàn)教訓(xùn),需要的朋友可以參考下2017-04-04
React Hook用法示例詳解（6個(gè)常見(jiàn)hook）
這篇文章主要介紹了React Hook用法詳解（6個(gè)常見(jiàn)hook）,本文通過(guò)實(shí)例代碼給大家介紹了6個(gè)常見(jiàn)hook，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了react的context和props的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-11-11