破陣九解：Node和瀏覽器之事件循環/任務隊列/非同步順序/數據結構

• 2019 年 10 月 21 日
• 筆記

前言

1. 開門見山：Node和瀏覽器的非同步執行順序問題
2. 兩種環境下的宏任務和微任務（macrotask && microtask）
3. Node和瀏覽器的事件循環模型在實現層面的區別
4. Node和瀏覽器的事件循環的任務隊列（task queue）
5. Node和瀏覽器的事件循環模型在表現層面的差異
6. 理清libuv的“7隊列”和Node“6隊列”的關係
7. Node和瀏覽器環境下setTimeout的最小延遲時間
8. setTimeout和setImmediate的執行順序詳解
9. Node相關組成結構中涉及的數據結構

一.開門見山：Node和瀏覽器的非同步執行順序問題

同步程式碼 > process.nextTick > Promise.then中的函數 > setTimeOut(0) 或 setImmediate

• 「備註1」 Promise中的函數，無論是resolve前的還是後的，都屬於“同步程式碼”的範圍，並不是“非同步程式碼”
• 「備註2」 setTimeOut(0) 或 setImmediate的執行順序取決於具體情況,並沒有確定的先後區分

setTimeout (function () {    console.log ('setTimeout');  }, 0);  setImmediate (function () {    console.log ('setImmediate');  });  new Promise (function (resolve, reject) {    resolve ();  }).then (function () {    console.log ('promise.then');  });  process.nextTick (function () {    console.log ('next nick');  });  console.log ('同步程式碼');

console.log ('我是同步程式碼');  new Promise (function (resolve, reject) {    console.log ('resolve前');    resolve ();    console.log ('resolve後');  }).then (function () {});  console.log ('我是同步程式碼');

• 《Node.js官方文檔：事件循環，定時器和 process.nextTick》

Promise.then中的函數 > setTimeOut(0) 或 setImmediate

setTimeout (function () {    console.log ('setTimeout');  }, 0);  setImmediate (function () {    console.log ('setImmediate');  });  new Promise (function (resolve, reject) {    resolve ();  }).then (function () {    console.log ('promise');  });

• 《MDN： window.setImmediate》

二.兩種環境下的宏任務和微任務陣營（macrotask && microtask）

• 宏任務(macrotasks)：setTimeout, setInterval, I/O，setImmediate（如果存在），requestAnimationFrame（存在爭議）
• 微任務 (microtasks) : process.nextTick, Promises,MutationObserver

• 備註1：MutationObserver是HTML5新增的用來檢測DOM變化的，參考資料

• 備註2: 部分資料認為，requestAnimationFrame也屬於宏任務，理由是：requestAnimationFrame在MDN的定義為，下次頁面重繪前所執行的操作，而重繪也是作為宏任務的一個步驟來存在的，且該步驟晚於微任務的執行，參考資料

• 微任務：process.nextTick,promise.then
• 宏任務：setTimeout, setInterval,setImmediate

三.Node和瀏覽器的事件循環模型在實現層面的區別

To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. Each agent has an associated event loop.

• libuv官方文檔：http://libuv.org/
• libuv簡單介紹：https://www.oschina.net/p/libuv

四.Node和瀏覽器的事件循環的任務隊列

• 《Timers, Immediates and Process.nextTick— NodeJS Event Loop Part 2》

• 四個主隊列由libuv提供
• 兩個中間隊列由Node.js實現

• 主隊列（main queue）：包括計時器隊列，IO事件隊列，即時隊列，關閉事件處理程式隊列
• 中間隊列（intermediate queue）：包括（1)Next Ticks隊列和（2)其他微任務隊列

• 宏任務隊列（macro task）
• 微任務隊列。（micro task）

1. 每次從宏任務隊列中取一個宏任務執行, 完成後, 把微任務隊列中的所有微任務，一次性處理完
2. 不斷重複上述過程

五.Node和瀏覽器的事件循環模型在表現層面的差異

• 在Node11.0.0以前的版本，Node和瀏覽器的非同步流程存在一些細節上的差異，
• 但在Node11.0.0以後，這一差異被抹去了，因為Node主動修改了實現以和瀏覽器保持一致

吐槽：聽話的Node.js

• 在瀏覽器和Node11以後，每執行完一個timer類回調，例如setTimeout,setImmediate 之後，都會把微任務給執行掉（promise等）。
• 原來Node10和以前： 當一個任務隊列（例如timer queue）裡面的回調都批量執行完了，才去執行微任務

setTimeout (function () {    console.log ('timeout1:宏任務');    new Promise (function (resolve, reject) {      resolve ();    }).then (() => {      console.log ('promise:微任務');    });  });  setTimeout (function () {    console.log ('timeout2:宏任務');  });

• 如果是11以後的Node和瀏覽器：執行完第一個setTimeout後，接下來輪到Promise這類微任務執行了，所以接下來應該是輸出「promise:微任務」
• 如果是version11以前的Node,則執行完第一個setTimeout後，因為timer隊列沒處理完，所以接下來執行的是第二個setTimeout，輸出的是「timeout2:宏任務」

• 《New Changes to the Timers and Microtasks in Node v11.0.0 ( and above)》

六.理清libuv的“七隊列”和Node“四個主隊列”的關係

1. 這裡的七隊列是libuv內部的概念
2. 之前介紹的”Node六隊列”和”四個主隊列”是Node內部，但在libuv外部的實現和概念
3. 這兩者之間存在對應關係，雖然不是一一對應（下面會細講對應關係）

• timers：執行滿足條件的 setTimeout 、setInterval 回調；

• pending callbacks: 檢索新的 I/O 事件;執行與 I/O 相關的回調（幾乎所有情況下，除了關閉的回調函數，它們由計時器和 setImmediate() 排定的之外），其餘情況 node 將在此處阻塞。

• idle:僅僅供給Node系統內部使用
• prepare：僅僅供給Node系統內部使用
• poll：檢索新的 I/O 事件;執行與 I/O 相關的回調（幾乎所有情況下，除了關閉的回調函數，它們由計時器和 setImmediate() 排定的之外），其餘情況 node 將在此處阻塞。
• check：執行 setImmediate 的回調；
• close callbacks：關閉所有的 closing handles ，一些 onclose 事件；

• 《Timers, Immediates and Process.nextTick— NodeJS Event Loop Part 3》

七.Node和瀏覽器環境下setTimeout的最小延遲時間

“HTML5 規範規定最小延遲時間不能小於 4ms，即 x 如果小於 4，會被當做 4 來處理。 不過不同瀏覽器的實現不一樣，比如，Chrome 可以設置 1ms，IE11/Edge 是 4ms。”

• 《JavaScript定時器和執行機制解析》— — 騰訊Alloyteam前端團隊

• 《Does Node.js enforce a minimum delay for setTimeout? – Stack Overflow》

It doesn’t have a minimum delay and this is actually a compatibility issue between browsers and node. Timers are completely unspecified in JavaScript (it’s a DOM specification which has no use in Node and isn’t even followed by browsers anyway) and node implements them simply due to how fundamental they’ve been in JavaScript’s history

八.setTimeout(0 delay)和setImmediate的執行順序詳解

• 在主執行緒中直接調用setTimeOut(0,function) 和setImmediate不能確定其執行的先後順序
• 但是如果在同一個IO循環中，例如在一個非同步回調中調用這兩個方法，setImmediate會首先被調用

// timeout_vs_immediate.js  setTimeout(() => {    console.log('timeout');  }, 0);    setImmediate(() => {    console.log('immediate');  });

輸出結果無法確定

// timeout_vs_immediate.js  const fs = require('fs');    fs.readFile(__filename, () => {    setTimeout(() => {      console.log('timeout');    }, 0);    setImmediate(() => {      console.log('immediate');    });  });

immediate timeout

九.Node相關組成結構中涉及的數據結構

• setTimeout與setInterval: 調用這兩個函數創建的定時器會被插入到定時器觀察者內部的一個紅黑樹中，每次tick執行時候都會從紅黑樹中迭代取出定時器對象。

• process.nextTick: 將回調函數放入到隊列中，在下一輪Tick時取出執行，可以達到setTimeout(fn,0)的效果,由於不需要動用紅黑樹，效率更高時間複雜度為O(1)。相比較之下。（紅黑樹時間複雜度O(lg(n)) ）

• setImmediate:的回調函數保存在鏈表中，每次Tick只執行鏈表中的一個回調函數。

• 《深入淺出Node.js》作者：朴靈，阿里巴巴數據平台資深開發者，被尊為Node.js的佈道者