[[435176]]

大家好，我卡頌。

前端框架中經(jīng)常有「將多個(gè)自變量變化觸發(fā)的更新合并為一次執(zhí)行」的批處理場(chǎng)景，框架的類型不同，批處理的時(shí)機(jī)也不同。

比如如下Svelte代碼，點(diǎn)擊H1后執(zhí)行onClick回調(diào)函數(shù)，觸發(fā)三次更新。由于批處理，三次更新會(huì)合并為一次。

接著分別以同步、微任務(wù)、宏任務(wù)的形式打印渲染結(jié)果：

<script> 
  let count = 0; 
  let dom; 
  const onClick = () => { 
    // 三次更新合并為一次 
    count++; 
    count++; 
    count++; 
   
    console.log("同步結(jié)果：", dom.innerText); 
   
    Promise.resolve().then(() => { 
      console.log("微任務(wù)結(jié)果：", dom.innerText); 
    }); 
   
    setTimeout(() => { 
      console.log("宏任務(wù)結(jié)果：", dom.innerText); 
    }); 
  } 
</script> 
 
<h1 bind:this={dom} on:click={onClick}>{count}</h1> 

同樣的邏輯用不同框架實(shí)現(xiàn)，打印結(jié)果如下：

• Vue3：同步結(jié)果：0 微任務(wù)結(jié)果：3 宏任務(wù)結(jié)果：3
• Svelte：同步結(jié)果：0 微任務(wù)結(jié)果：3 宏任務(wù)結(jié)果：3
• Legacy React：同步結(jié)果：0 微任務(wù)結(jié)果：3 宏任務(wù)結(jié)果：3
• Concurrent React：同步結(jié)果：0 微任務(wù)結(jié)果：0 宏任務(wù)結(jié)果：3

4種實(shí)現(xiàn)的Demo地址：React[1]Vue3[2]Svelte[3]

本質(zhì)原因在于：有的框架使用宏任務(wù)實(shí)現(xiàn)批處理，有的框架使用微任務(wù)實(shí)現(xiàn)批處理。

本文接下來會(huì)講解宏任務(wù)、微任務(wù)的起源，以及他們與批處理的關(guān)系。

如何調(diào)度任務(wù)

先放上完整流程圖，方便有個(gè)整體印象：

事件循環(huán)流程圖

默認(rèn)情況下，瀏覽器(以Chrome為例)中每個(gè)Tab頁對(duì)應(yīng)一個(gè)渲染進(jìn)程，渲染進(jìn)程包含主線程、合成線程、IO線程等多個(gè)線程。

主線程的工作非常繁忙，要處理DOM、計(jì)算樣式、處理布局、處理事件響應(yīng)、執(zhí)行JS等。

這里有兩個(gè)問題需要解決：

1. 這些任務(wù)不僅來自線程內(nèi)部，也可能來自外部，如何調(diào)度這些任務(wù)?
2. 主線程在工作過程中，新任務(wù)如何參與調(diào)度?

第一個(gè)問題的答案是：「消息隊(duì)列」

所有參與調(diào)度的任務(wù)會(huì)加入任務(wù)隊(duì)列中。根據(jù)隊(duì)列「先進(jìn)先出」的特性，最早入隊(duì)的任務(wù)會(huì)被最先處理。用偽代碼描述如下：

// 從任務(wù)隊(duì)列中取出任務(wù) 
const task = taskQueue.takeTask(); 
// 執(zhí)行任務(wù) 
processTask(task); 

其他進(jìn)程通過IPC將任務(wù)發(fā)送給渲染進(jìn)程的IO線程，IO線程再將任務(wù)發(fā)送給主線程的任務(wù)隊(duì)列，比如：

• 鼠標(biāo)點(diǎn)擊后，瀏覽器進(jìn)程通過IPC將“點(diǎn)擊事件”發(fā)送給IO線程，IO線程將其發(fā)送給任務(wù)隊(duì)列
• 資源加載完成后，網(wǎng)絡(luò)進(jìn)程通過IPC將“加載完成事件”發(fā)送給IO線程，IO線程將其發(fā)送給任務(wù)隊(duì)列

如何調(diào)度新任務(wù)

第二個(gè)問題的答案是：「事件循環(huán)」

主線程會(huì)在循環(huán)語句中執(zhí)行任務(wù)。隨著循環(huán)一直進(jìn)行下去，新加入的任務(wù)會(huì)插入隊(duì)列末尾，老任務(wù)會(huì)被取出執(zhí)行。用偽代碼描述如下：

// 退出事件循環(huán)的標(biāo)識(shí) 
let keepRunning = true; 
 
// 主線程 
function MainThread() { 
  // 循環(huán)執(zhí)行任務(wù) 
  while(true) { 
    // 從任務(wù)隊(duì)列中取出任務(wù) 
    const task = taskQueue.takeTask(); 
    // 執(zhí)行任務(wù) 
    processTask(task); 
 
    if (!keepRunning) { 
      break; 
    } 
  } 
} 

延遲任務(wù)

除了任務(wù)隊(duì)列，瀏覽器還根據(jù)WHATWG標(biāo)準(zhǔn)，實(shí)現(xiàn)了延遲隊(duì)列，用于存放需要被延遲執(zhí)行的任務(wù)(如setTimeout)，偽代碼如下：

function MainThread() { 
  while(true) { 
    const task = taskQueue.takeTask(); 
    processTask(task); 
 
    //執(zhí)行延遲隊(duì)列中的任務(wù)  
    processDelayTask() 
 
    if (!keepRunning) { 
      break; 
    } 
  } 
} 

當(dāng)本輪循環(huán)任務(wù)執(zhí)行完后(即執(zhí)行完processTask后)，會(huì)執(zhí)行processDelayTask檢查是否有延遲任務(wù)到期，如果有任務(wù)過期則執(zhí)行他。

介于processDelayTask的執(zhí)行時(shí)機(jī)在processTask之后，所以當(dāng)任務(wù)的執(zhí)行時(shí)間比較長，可能會(huì)導(dǎo)致延遲任務(wù)無法按期執(zhí)行?？紤]如下代碼：

function sayHello() { console.log('hello') } 
 
function test() {  
  setTimeout(sayHello, 0);  
  for (let i = 0; i < 5000; i++) { 
    console.log(i); 
  } 
} 
test() 

即使將延遲任務(wù)sayHello的延遲時(shí)間設(shè)為0，也需要等待test所在任務(wù)執(zhí)行完后才能執(zhí)行，所以sayHello最終的延遲時(shí)間是大于設(shè)定時(shí)間的。

宏任務(wù)與微任務(wù)

加入任務(wù)隊(duì)列的新任務(wù)需要等待隊(duì)列中其他任務(wù)都執(zhí)行完后才能執(zhí)行，這對(duì)于「突發(fā)情況下需要優(yōu)先執(zhí)行的任務(wù)」是不利的。

為了解決時(shí)效性問題，任務(wù)隊(duì)列中的任務(wù)被稱為宏任務(wù)，在宏任務(wù)執(zhí)行過程中可以產(chǎn)生微任務(wù)，保存在該任務(wù)執(zhí)行上下文中的微任務(wù)隊(duì)列中。

即流程圖中右邊的部分：

事件循環(huán)流程圖

在宏任務(wù)執(zhí)行結(jié)束前會(huì)遍歷其微任務(wù)隊(duì)列，將該宏任務(wù)執(zhí)行過程中產(chǎn)生的微任務(wù)批量執(zhí)行。

MutationObserver

微任務(wù)是如何解決時(shí)效性問題同時(shí)又兼顧性能呢?

考慮用于監(jiān)控DOM變化的微任務(wù)API —— MutationObserver。

當(dāng)同一個(gè)宏任務(wù)中發(fā)生多次DOM變化，會(huì)產(chǎn)生多個(gè)MutationObserver微任務(wù)，其執(zhí)行時(shí)機(jī)是該宏任務(wù)執(zhí)行結(jié)束前，相比于作為新的宏任務(wù)進(jìn)入隊(duì)列等待執(zhí)行，保證了時(shí)效性。

同時(shí)，由于微任務(wù)隊(duì)列內(nèi)的微任務(wù)被批量執(zhí)行，相比于每次DOM變化都同步執(zhí)行回調(diào)，性能更佳。

總結(jié)

框架中批處理的實(shí)現(xiàn)本質(zhì)和MutationObserver非常類似。利用了宏任務(wù)、微任務(wù)異步執(zhí)行的特性，將更新打包后執(zhí)行。

只不過不同框架由于更新粒度不同，比如Vue3、Svelte更新粒度很細(xì)，所以使用微任務(wù)實(shí)現(xiàn)批處理。

React更新粒度很粗，但內(nèi)部實(shí)現(xiàn)復(fù)雜，即有宏任務(wù)場(chǎng)景也有微任務(wù)的場(chǎng)景。

參考資料

[1]React:

https://codesandbox.io/s/react-concurrent-mode-demo-forked-t8mil?file=/src/index.js[2]Vue3:

https://codesandbox.io/s/crazy-rosalind-wqj0c?file=/src/App.vue[3]Svelte:

https://svelte.dev/repl/1e4e4e44b9ca4e0ebba98ef314cfda54?version=3.44.1