帶你徹底弄懂Event Loop

liuxuan發表於2019-02-16
OOP

前言

我在學習瀏覽器和NodeJS的Event Loop時看了大量的文章，那些文章都寫的很好，但是往往是每篇文章有那麼幾個關鍵的點，很多篇文章湊在一起綜合來看，才可以對這些概念有較為深入的理解。

於是，我在看了大量文章之後，想要寫這麼一篇部落格，不採用官方的描述，結合自己的理解以及示例程式碼，用最通俗的語言表達出來。希望大家可以通過這篇文章，瞭解到Event Loop到底是一種什麼機制，瀏覽器和NodeJS的Event Loop又有什麼區別。如果在文中出現書寫錯誤的地方，歡迎大家留言一起探討。

（PS：說到Event Loop肯定會提到Promise，我根據Promise A+規範自己實現了一個簡易Promise庫，原始碼放到Github上，大家有需要的可以當做參考，後續我也會也寫一篇部落格來講Promise，如果對你有用，就請給個Star吧~）

正文

Event Loop是什麼

event loop是一個執行模型，在不同的地方有不同的實現。瀏覽器和NodeJS基於不同的技術實現了各自的Event Loop。

  • 瀏覽器的Event Loop是在html5的規範中明確定義。
  • NodeJS的Event Loop是基於libuv實現的。可以參考Node的官方文件以及libuv的官方文件。
  • libuv已經對Event Loop做出了實現，而HTML5規範中只是定義了瀏覽器中Event Loop的模型，具體的實現留給了瀏覽器廠商。

巨集佇列和微佇列

巨集佇列，macrotask，也叫tasks。 一些非同步任務的回撥會依次進入macro task queue，等待後續被呼叫，這些非同步任務包括：

  • setTimeout
  • setInterval
  • setImmediate (Node獨有)
  • requestAnimationFrame (瀏覽器獨有)
  • I/O
  • UI rendering (瀏覽器獨有)

微佇列，microtask，也叫jobs。 另一些非同步任務的回撥會依次進入micro task queue，等待後續被呼叫，這些非同步任務包括：

  • process.nextTick (Node獨有)
  • Promise
  • Object.observe
  • MutationObserver

（注：這裡只針對瀏覽器和NodeJS）

瀏覽器的Event Loop

我們先來看一張圖，再看完這篇文章後，請返回來再仔細看一下這張圖，相信你會有更深的理解。

browser-eventloop

這張圖將瀏覽器的Event Loop完整的描述了出來，我來講執行一個JavaScript程式碼的具體流程：

  1. 執行全域性Script同步程式碼，這些同步程式碼有一些是同步語句，有一些是非同步語句（比如setTimeout等）；
  2. 全域性Script程式碼執行完畢後，呼叫棧Stack會清空；
  3. 從微佇列microtask queue中取出位於隊首的回撥任務，放入呼叫棧Stack中執行，執行完後microtask queue長度減1；
  4. 繼續取出位於隊首的任務，放入呼叫棧Stack中執行，以此類推，直到直到把microtask queue中的所有任務都執行完畢。注意，如果在執行microtask的過程中，又產生了microtask，那麼會加入到佇列的末尾，也會在這個週期被呼叫執行；
  5. microtask queue中的所有任務都執行完畢，此時microtask queue為空佇列，呼叫棧Stack也為空；
  6. 取出巨集佇列macrotask queue中位於隊首的任務，放入Stack中執行；
  7. 執行完畢後，呼叫棧Stack為空；
  8. 重複第3-7個步驟；
  9. 重複第3-7個步驟；
  10. ......

可以看到，這就是瀏覽器的事件迴圈Event Loop

這裡歸納3個重點：

  1. 巨集佇列macrotask一次只從佇列中取一個任務執行，執行完後就去執行微任務佇列中的任務；
  2. 微任務佇列中所有的任務都會被依次取出來執行，知道microtask queue為空；
  3. 圖中沒有畫UI rendering的節點，因為這個是由瀏覽器自行判斷決定的，但是隻要執行UI rendering，它的節點是在執行完所有的microtask之後，下一個macrotask之前，緊跟著執行UI render。

好了，概念性的東西就這麼多，來看幾個示例程式碼，測試一下你是否掌握了:

console.log(1);

setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
})

setTimeout(() => {
  console.log(6);
})

console.log(7);
複製程式碼

這裡結果會是什麼呢？運用上面瞭解到的知識，先自己做一下試試看。

// 正確答案
1
4
7
5
2
3
6
複製程式碼

你答對了嗎？

我們來分析一下整個流程：

  1. 執行全域性Script程式碼

Step 1

console.log(1)
複製程式碼

Stack Queue: [console]

Macrotask Queue: []

Microtask Queue: []

列印結果：
1

Step 2

setTimeout(() => {
  // 這個回撥函式叫做callback1，setTimeout屬於macrotask，所以放到macrotask queue中
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});
複製程式碼

Stack Queue: [setTimeout]

Macrotask Queue: [callback1]

Microtask Queue: []

列印結果：
1

Step 3

new Promise((resolve, reject) => {
  // 注意，這裡是同步執行的，如果不太清楚，可以去看一下我開頭自己實現的promise啦~~
  console.log(4)
  resolve(5)
}).then((data) => {
  // 這個回撥函式叫做callback2，promise屬於microtask，所以放到microtask queue中
  console.log(data);
})
複製程式碼

Stack Queue: [promise]

Macrotask Queue: [callback1]

Microtask Queue: [callback2]

列印結果：
1
4

Step 5

setTimeout(() => {
  // 這個回撥函式叫做callback3，setTimeout屬於macrotask，所以放到macrotask queue中
  console.log(6);
})
複製程式碼

Stack Queue: [setTimeout]

Macrotask Queue: [callback1, callback3]

Microtask Queue: [callback2]

列印結果：
1
4

Step 6

console.log(7)
複製程式碼

Stack Queue: [console]

Macrotask Queue: [callback1, callback3]

Microtask Queue: [callback2]

列印結果：
1
4
7

  1. 好啦，全域性Script程式碼執行完了，進入下一個步驟，從microtask queue中依次取出任務執行，直到microtask queue佇列為空。

Step 7

console.log(data)       // 這裡data是Promise的決議值5
複製程式碼

Stack Queue: [callback2]

Macrotask Queue: [callback1, callback3]

Microtask Queue: []

列印結果：
1
4
7
5

  1. 這裡microtask queue中只有一個任務，執行完後開始從巨集任務佇列macrotask queue中取位於隊首的任務執行

Step 8

console.log(2)
複製程式碼

Stack Queue: [callback1]

Macrotask Queue: [callback3]

Microtask Queue: []

列印結果：
1
4
7
5
2

但是，執行callback1的時候又遇到了另一個Promise，Promise非同步執行完後在microtask queue中又註冊了一個callback4回撥函式

Step 9

Promise.resolve().then(() => {
  // 這個回撥函式叫做callback4，promise屬於microtask，所以放到microtask queue中
  console.log(3)
});
複製程式碼

Stack Queue: [promise]

Macrotask v: [callback3]

Microtask Queue: [callback4]

列印結果：
1
4
7
5
2

  1. 取出一個巨集任務macrotask執行完畢，然後再去微任務佇列microtask queue中依次取出執行

Step 10

console.log(3)
複製程式碼

Stack Queue: [callback4]

Macrotask Queue: [callback3]

Microtask Queue: []

列印結果：
1
4
7
5
2
3

  1. 微任務佇列全部執行完，再去巨集任務佇列中取第一個任務執行

Step 11

console.log(6)
複製程式碼

Stack Queue: [callback3]

Macrotask Queue: []

Microtask Queue: []

列印結果：
1
4
7
5
2
3
6

  1. 以上，全部執行完後，Stack Queue為空，Macrotask Queue為空，Micro Queue為空

Stack Queue: []

Macrotask Queue: []

Microtask Queue: []

最終列印結果：
1
4
7
5
2
3
6

因為是第一個例子，所以這裡分析的比較詳細，大家仔細看一下，接下來我們再來一個例子：

console.log(1);

setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
  
  Promise.resolve().then(() => {
    console.log(6)
  }).then(() => {
    console.log(7)
    
    setTimeout(() => {
      console.log(8)
    }, 0);
  });
})

setTimeout(() => {
  console.log(9);
})

console.log(10);

複製程式碼

最終輸出結果是什麼呢？參考前面的例子，好好想一想......

// 正確答案
1
4
10
5
6
7
2
3
9
8
複製程式碼

相信大家都答對了，這裡的關鍵在前面已經提過：

在執行微佇列microtask queue中任務的時候，如果又產生了microtask，那麼會繼續新增到佇列的末尾，也會在這個週期執行，直到microtask queue為空停止。

注：當然如果你在microtask中不斷的產生microtask，那麼其他巨集任務macrotask就無法執行了，但是這個操作也不是無限的，拿NodeJS中的微任務process.nextTick()來說，它的上限是1000個，後面我們會講到。

瀏覽器的Event Loop就說到這裡，下面我們看一下NodeJS中的Event Loop，它更復雜一些，機制也不太一樣。

NodeJS中的Event Loop

libuv

先來看一張libuv的結構圖：

node-libuv

NodeJS中的巨集佇列和微佇列

NodeJS的Event Loop中，執行巨集佇列的回撥任務有6個階段，如下圖：

node-eventloop-6phase

各個階段執行的任務如下：

  • timers階段：這個階段執行setTimeout和setInterval預定的callback
  • I/O callback階段：執行除了close事件的callbacks、被timers設定的callbacks、setImmediate()設定的callbacks這些之外的callbacks
  • idle, prepare階段：僅node內部使用
  • poll階段：獲取新的I/O事件，適當的條件下node將阻塞在這裡
  • check階段：執行setImmediate()設定的callbacks
  • close callbacks階段：執行socket.on('close', ....)這些callbacks

NodeJS中巨集佇列主要有4個

由上面的介紹可以看到，回撥事件主要位於4個macrotask queue中：

  1. Timers Queue
  2. IO Callbacks Queue
  3. Check Queue
  4. Close Callbacks Queue

這4個都屬於巨集佇列，但是在瀏覽器中，可以認為只有一個巨集佇列，所有的macrotask都會被加到這一個巨集佇列中，但是在NodeJS中，不同的macrotask會被放置在不同的巨集佇列中。

NodeJS中微佇列主要有2個：

  1. Next Tick Queue：是放置process.nextTick(callback)的回撥任務的
  2. Other Micro Queue：放置其他microtask，比如Promise等

在瀏覽器中，也可以認為只有一個微佇列，所有的microtask都會被加到這一個微佇列中，但是在NodeJS中，不同的microtask會被放置在不同的微佇列中。

具體可以通過下圖加深一下理解：

node-eventloop

大體解釋一下NodeJS的Event Loop過程：

  1. 執行全域性Script的同步程式碼
  2. 執行microtask微任務，先執行所有Next Tick Queue中的所有任務，再執行Other Microtask Queue中的所有任務
  3. 開始執行macrotask巨集任務，共6個階段，從第1個階段開始執行相應每一個階段macrotask中的所有任務，注意，這裡是所有每個階段巨集任務佇列的所有任務，在瀏覽器的Event Loop中是隻取巨集佇列的第一個任務出來執行，每一個階段的macrotask任務執行完畢後，開始執行微任務，也就是步驟2
  4. Timers Queue -> 步驟2 -> I/O Queue -> 步驟2 -> Check Queue -> 步驟2 -> Close Callback Queue -> 步驟2 -> Timers Queue ......
  5. 這就是Node的Event Loop

關於NodeJS的macrotask queue和microtask queue，我畫了兩張圖，大家作為參考：

node-microtaskqueue

node-macrotaskqueue

好啦，概念理解了我們通過幾個例子來實戰一下：

第一個例子

console.log('start');

setTimeout(() => {          // callback1
  console.log(111);
  setTimeout(() => {        // callback2
    console.log(222);
  }, 0);
  setImmediate(() => {      // callback3
    console.log(333);
  })
  process.nextTick(() => {  // callback4
    console.log(444);  
  })
}, 0);

setImmediate(() => {        // callback5
  console.log(555);
  process.nextTick(() => {  // callback6
    console.log(666);  
  })
})

setTimeout(() => {          // callback7              
  console.log(777);
  process.nextTick(() => {  // callback8
    console.log(888);   
  })
}, 0);

process.nextTick(() => {    // callback9
  console.log(999);  
})

console.log('end');
複製程式碼

更新 2018.9.20

上面這段程式碼你執行的結果可能會有多種情況，原因解釋如下。

  • setTimeout(fn, 0)不是嚴格的0，一般是setTimeout(fn, 3)或什麼，會有一定的延遲時間，當setTimeout(fn, 0)和setImmediate(fn)出現在同一段同步程式碼中時，就會存在兩種情況。

  • 第1種情況：同步程式碼執行完了，Timer還沒到期，setImmediate回撥先註冊到Check Queue中，開始執行微佇列，然後是巨集佇列，先從Timers Queue中開始，發現沒回撥，往下走直到Check Queue中有回撥，執行，然後timer到期（只要在執行完Timer Queue後到期效果就都一樣），timer回撥註冊到Timers Queue中，下一輪迴圈執行到Timers Queue中才能執行那個timer 回撥；所以，這種情況下，setImmediate(fn)回撥先於setTimeout(fn, 0)回撥執行。

  • 第2種情況：同步程式碼還沒執行完，timer先到期，timer回撥先註冊到Timers Queue中，執行到setImmediate了，它的回撥再註冊到Check Queue中。 然後，同步程式碼執行完了，執行微佇列，然後開始先執行Timers Queue，先執行Timer 回撥，再到Check Queue，執行setImmediate回撥；所以，這種情況下，setTimeout(fn, 0)回撥先於setImmediate(fn)回撥執行。

  • 所以，在同步程式碼中同時調setTimeout(fn, 0)和setImmediate情況是不確定的，但是如果把他們放在一個IO的回撥，比如readFile('xx', function () {// ....})回撥中，那麼IO回撥是在IO Queue中，setTimeout到期回撥註冊到Timers Queue，setImmediate回撥註冊到Check Queue，IO Queue執行完到Check Queue，timer Queue得到下個週期，所以setImmediate回撥這種情況下肯定比setTimeout(fn, 0)回撥先執行。

綜上，這個例子是不太好的，setTimeout(fn, 0)和setImmediate(fn)如果想要保證結果唯一，就放在一個IO Callback中吧，上面那段程式碼可以把所有它倆同步執行的程式碼都放在一個IO Callback中，結果就唯一了。

更新結束

請運用前面學到的知識，仔細分析一下......

// 正確答案
start
end
999
111
777
444
888
555
333
666
222
複製程式碼

你答對了嗎？我們來一起分析一下：

  1. 執行全域性Script程式碼，先列印start，向下執行，將setTimeout的回撥callback1註冊到Timers Queue中，再向下執行，將setImmediate的回撥callback5註冊到Check Queue中，接著向下執行，將setTimeout的回撥callback7註冊到Timers Queue中，繼續向下，將process.nextTick的回撥callback9註冊到微佇列Next Tick Queue中,最後一步列印end。此時，各個佇列的回撥情況如下：

巨集佇列

Timers Queue: [callback1, callback7]

Check Queue: [callback5]

IO Callback Queue： []

Close Callback Queue: []

微佇列

Next Tick Queue: [callback9]

Other Microtask Queue: []

列印結果
start
end

  1. 全域性Script執行完了，開始依次執行微任務Next Tick Queue中的全部回撥任務。此時Next Tick Queue中只有一個callback9，將其取出放入呼叫棧中執行，列印999。

巨集佇列

Timers Queue: [callback1, callback7]

Check Queue: [callback5]

IO Callback Queue： []

Close Callback Queue: []

微佇列

Next Tick Queue: []

Other Microtask Queue: []

列印結果
start
end
999

  1. 開始依次執行6個階段各自巨集佇列中的所有任務，先執行第1個階段Timers Queue中的所有任務，先取出callback1執行，列印111，callback1函式繼續向下，依次把callback2放入Timers Queue中，把callback3放入Check Queue中，把callback4放入Next Tick Queue中，然後callback1執行完畢。再取出Timers Queue中此時排在首位的callback7執行，列印777，把callback8放入Next Tick Queue中，執行完畢。此時，各佇列情況如下：

巨集佇列

Timers Queue: [callback2]

Check Queue: [callback5, callback3]

IO Callback Queue： []

Close Callback Queue: []

微佇列

Next Tick Queue: [callback4, callback8]

Other Microtask Queue: []

列印結果
start
end
999
111
777

  1. 6個階段每階段的巨集任務佇列執行完畢後，都會開始執行微任務，此時，先取出Next Tick Queue中的所有任務執行，callback4開始執行，列印444，然後callback8開始執行，列印888，Next Tick Queue執行完畢，開始執行Other Microtask Queue中的任務，因為裡面為空，所以繼續向下。

巨集佇列

Timers Queue: [callback2]

Check Queue: [callback5, callback3]

IO Callback Queue： []

Close Callback Queue: []

微佇列

Next Tick Queue: []

Other Microtask Queue: []

列印結果
start
end
999
111
777
444
888

  1. 第2個階段IO Callback Queue佇列為空，跳過，第3和第4個階段一般是Node內部使用，跳過，進入第5個階段Check Queue。取出callback5執行，列印555，把callback6放入Next Tick Queue中，執行callback3，列印333。

巨集佇列

Timers Queue: [callback2]

Check Queue: []

IO Callback Queue： []

Close Callback Queue: []

微佇列

Next Tick Queue: [callback6]

Other Microtask Queue: []

列印結果
start
end
999
111
777
444
888
555
333

  1. 執行微任務佇列，先執行Next Tick Queue，取出callback6執行，列印666，執行完畢，因為Other Microtask Queue為空，跳過。

巨集佇列

Timers Queue: [callback2]

Check Queue: []

IO Callback Queue： []

Close Callback Queue: []

微佇列

Next Tick Queue: [callback6]

Other Microtask Queue: []

列印結果
start
end
999
111
777
444
888
555
333

  1. 執行第6個階段Close Callback Queue中的任務，為空，跳過，好了，此時一個迴圈已經結束。進入下一個迴圈，執行第1個階段Timers Queue中的所有任務，取出callback2執行，列印222，完畢。此時，所有佇列包括巨集任務佇列和微任務佇列都為空，不再列印任何東西。

巨集佇列

Timers Queue: []

Check Queue: []

IO Callback Queue： []

Close Callback Queue: []

微佇列

Next Tick Queue: [callback6]

Other Microtask Queue: []

最終結果
start
end
999
111
777
444
888
555
333
666
222

以上就是這道題目的詳細分析，如果沒有明白，一定要多看幾次。

下面引入Promise再來看一個例子：

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})

new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
process.nextTick(function() {
  console.log('6');
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})
複製程式碼

大家仔細分析，相比於上一個例子，這裡由於存在Promise，所以Other Microtask Queue中也會有回撥任務的存在，執行到微任務階段時，先執行Next Tick Queue中的所有任務，再執行Other Microtask Queue中的所有任務，然後才會進入下一個階段的巨集任務。明白了這一點，相信大家都可以分析出來，下面直接給出正確答案，如有疑問，歡迎留言和我討論。

// 正確答案
1
7
6
8
2
4
9
11
3
10
5
12
複製程式碼

setTimeout 對比 setImmediate

  • setTimeout(fn, 0)在Timers階段執行，並且是在poll階段進行判斷是否達到指定的timer時間才會執行
  • setImmediate(fn)在Check階段執行

兩者的執行順序要根據當前的執行環境才能確定：

  • 如果兩者都在主模組(main module)呼叫，那麼執行先後取決於程式效能，順序隨機
  • 如果兩者都不在主模組呼叫，即在一個I/O Circle中呼叫，那麼setImmediate的回撥永遠先執行，因為會先到Check階段

setImmediate 對比 process.nextTick

  • setImmediate(fn)的回撥任務會插入到巨集佇列Check Queue中
  • process.nextTick(fn)的回撥任務會插入到微佇列Next Tick Queue中
  • process.nextTick(fn)呼叫深度有限制，上限是1000，而setImmedaite則沒有

總結

  1. 瀏覽器的Event Loop和NodeJS的Event Loop是不同的，實現機制也不一樣，不要混為一談。
  2. NodeJS可以理解成有4個巨集任務佇列和2個微任務佇列，但是執行巨集任務時有6個階段。先執行全域性Script程式碼，執行完同步程式碼呼叫棧清空後，先從微任務佇列Next Tick Queue中依次取出所有的任務放入呼叫棧中執行，再從微任務佇列Other Microtask Queue中依次取出所有的任務放入呼叫棧中執行。然後開始巨集任務的6個階段，每個階段都將該巨集任務佇列中的所有任務都取出來執行（注意，這裡和瀏覽器不一樣，瀏覽器只取一個），每個巨集任務階段執行完畢後，開始執行微任務，再開始執行下一階段巨集任務，以此構成事件迴圈。
  3. NodeJS可以理解成有4個巨集任務佇列和2個微任務佇列，但是執行巨集任務時有6個階段。先執行全域性Script程式碼，執行完同步程式碼呼叫棧清空後，先從微任務佇列Next Tick Queue中依次取出所有的任務放入呼叫棧中執行，再從微任務佇列Other Microtask Queue中依次取出所有的任務放入呼叫棧中執行。然後開始巨集任務的6個階段，每個階段都將該巨集任務佇列中的所有任務都取出來執行（注意，這裡和瀏覽器不一樣，瀏覽器只取一個），6個階段執行完畢後，再開始執行微任務，以此構成事件迴圈。
  4. MacroTask包括： setTimeout、setInterval、 setImmediate(Node)、requestAnimation(瀏覽器)、IO、UI rendering
  5. Microtask包括： process.nextTick(Node)、Promise、Object.observe、MutationObserver

歡迎關注我的公眾號

微信公眾號

參考連結

不要混淆nodejs和瀏覽器中的event loop

node中的Event模組

Promises, process.nextTick And setImmediate

瀏覽器和Node不同的事件迴圈

Tasks, microtasks, queues and schedules

理解事件迴圈淺析

相關文章