一、背景

通過今天的學(xué)習(xí)，你將收獲這些內(nèi)容：

創(chuàng)新互聯(lián)服務(wù)項目包括盂縣網(wǎng)站建設(shè)、盂縣網(wǎng)站制作、盂縣網(wǎng)頁制作以及盂縣網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，盂縣網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到盂縣省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

• 主流前端框架的批量更新方式。
• vue 和 react 批量更新的實現(xiàn)。
• 宏任務(wù)和微任務(wù)的特點。

1.一次 vue 案例

首先來想一個問題。比如在 vue 中一次更新中。

如上是一個非常簡單的邏輯代碼，點擊按鈕，會觸發(fā) name 和 age 的更新。那么首先想一個問題就是：

• 正常情況下，vue 的數(shù)據(jù)層是通過響應(yīng)式處理的，那么比如 age 和 name 可以理解成做了一層屬性代理，字符串模版 template 里面的屬性 ( name 和 age ) 的 get 會和組件的渲染 watcher ( vue3.0 里面的 effect )建立起關(guān)聯(lián)。
• 一次重新賦值會觸發(fā) set ，那么根據(jù)響應(yīng)式，會觸發(fā)渲染 watcher 重新執(zhí)行，然后就會重新更新組件，渲染視圖。

那么暴露的問題就是，我們在 handleClick 中，同時改變了 name 和 age 屬性，那么按照正常情況下，會分別觸發(fā) name 和 age 的 set，那么如果不做處理，那么會讓渲染 watcher 執(zhí)行兩次，結(jié)果就是組件會 update 兩次，但是結(jié)果是這樣的嗎?

結(jié)果是：vue 底層通過批量處理，只讓組件 update 一次。

2.一次 react 案例

上面介紹了在 vue 中更新批處理的案例之后，我們來看一下在 react 中的批量更新處理。把上述案例用 react 來實現(xiàn)一下：

function Index(){
    const [ age , setAge ] = React.useState(0)
    const [ name, setName ] = React.useState('')
    return 

       姓名： {name}
       年齡： {age}
       {
          setAge(18)
          setName('alien')
       }}
       >點擊
    

}

點擊按鈕，觸發(fā)更新，會觸發(fā)兩次 useState 的更新函數(shù)。那么 React 的更新流程大致是這樣的。

• 首先會找到 fiberRoot 。
• 然后進(jìn)行調(diào)和流程。執(zhí)行 Index 組件，得到新的 element。
• diff fiber，得到 effectList。
• 執(zhí)行 effect list，得到最新的 dom ，并進(jìn)行渲染繪制。

那么按常理來說，Index 組件會執(zhí)行兩次?？墒聦嵤侵粓?zhí)行一次 render。

3 批量處理意義

通過上面的案例說明在主流框架中，對于更新都采用批處理。一次上下文中的 update 會被合并成一次更新。那么為什么要進(jìn)行更新批處理呢?

批處理主要是出于對性能方面的考慮，這里拿 react 為例子，看一下批處理前后的對比情況：

例子一：假設(shè)沒有批量更新：

/ ------ js 層面 ------

• 第一步：發(fā)生點擊事件觸發(fā)一次宏任務(wù)。
• 第二步：執(zhí)行 setAge ，更新 fiber 狀態(tài)。
• 第三步：進(jìn)行 render 階段，Index 執(zhí)行，得到新的 element。得到 effectlist.
• 第四步：進(jìn)行 commit 階段，更新 dom。
• 第五步：執(zhí)行 setName ，更新 fiber 狀態(tài)。
• 第六步：重復(fù)執(zhí)行第三步，第四步。

/ ------ 瀏覽器渲染 ------

• js 執(zhí)行完畢，渲染真實的 dom 元素。

我們可以看到如果沒有批量更新處理，那么會多走很多步驟，包括 render 階段 ，commit 階段，dom 的更新等，這些都會造成性能的浪費，接下來看一下有批量更新的情況。

例子二：存在批量更新。

/ ------ js 層面 ------

• 第一步：發(fā)生點擊事件觸發(fā)一次宏任務(wù)。
• 第二步：setAge 和 setName 批量處理 ，更新 fiber 狀態(tài)。
• 第三步：進(jìn)行 render 階段，Index 執(zhí)行，得到新的 element。得到 effectlist。
• 第四步：進(jìn)行 commit 階段，更新 dom。

/ ------ 瀏覽器渲染 ------

• js 執(zhí)行完畢，渲染真實的 dom 元素。

從上面可以直觀看到更新批處理的作用了，本質(zhì)上在 js 的執(zhí)行上下文上優(yōu)化了很多步驟，減少性能開銷。

二、簡述宏任務(wù)和微任務(wù)

在正式講批量更新之前，先來溫習(xí)一下宏任務(wù)和微任務(wù)，這應(yīng)該算是前端工程師必須掌握的知識點。

所謂宏任務(wù)，我們可以理解成，

打印結(jié)果：

分析一下核心流程：

• 本方式的核心就是讓 handleClick 通過 wrapEvent 變成可控的。首先 wrapEvent 類似于事件處理函數(shù)，在內(nèi)部通過開關(guān) batchEventUpdate 來判斷是否開啟批量更新狀態(tài)，最后通過 flushSyncCallbackQueue 來清空待更新隊列。
• 在批量更新條件下，事件會被放入到更新隊列中，非批量更新條件下，那么立即執(zhí)行更新任務(wù)。

參考資料

React進(jìn)階實踐指南

當(dāng)前文章：聊聊主流前端框架更新批處理方式
網(wǎng)頁網(wǎng)址：http://uogjgqi.cn/article/dhsesoc.html