全方位理解JavaScript的Event Loop

先看段代碼：

console.log(1);

setTimeout(function () {
	console.log(2);

	new Promise(function (resolve, reject) {
		console.log(3);
		resolve();
		console.log(4);
	}).then(function () {
		console.log(5);
	});
});

function fn() {
	console.log(6);
	setTimeout(function () {
		console.log(7);
	}, 50);
}

new Promise(function (resolve, reject) {
	console.log(8);
	resolve();
	console.log(9);
}).then(function () {
	console.log(10);
});

fn();

console.log(11);

// 如下代碼須要在 node 環境中執行
process.nextTick(function () {
	console.log(12);
});

setImmediate(function () {
	console.log(13);
});
複製代碼

思考一下,能給出準確的輸出順序嗎？

下面咱們一個一個的來了解 Event Loop 相關的知識點，最後再一步一步分析出本段代碼最後的輸出順序。

JavaScript是單線程

首先咱們先了解下進程和線程的概念和關係：

• 進程： 運行的程序就是一個進程，好比你正在運行的瀏覽器，它會有一個進程。
• 線程： 程序中獨立運行的代碼段。一個進程 由單個或多個 線程 組成，線程是負責執行代碼的。

咱們都知道 JavaScript 是單線程的，那麼既然有單線程就有多線程，首先看看單線程與多線程的區別：

• 單線程： 從頭執行到尾，一行一行執行，若是其中一行代碼報錯，那麼剩下代碼將再也不執行。同時容易代碼阻塞。
• 多線程： 代碼運行的環境不一樣，各線程獨立，互不影響，避免阻塞。

那爲何JavaScript是單線程的呢？

JavaScript 的單線程，與它的用途有關。做爲瀏覽器腳本語言，JavaScript 的主要用途是與用戶互動，以及操做 DOM。這決定了它只能是單線程，不然會帶來很複雜的同步問題。好比，假定JavaScript同時有兩個線程，一個線程在某個 DOM 節點上添加內容，另外一個線程刪除了這個節點，這時瀏覽器應該以哪一個線程爲準呢？

因此，爲了不復雜性，從一誕生，JavaScript 就是單線程，這已經成了這門語言的核心特徵，未來也不會改變。

爲了利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，容許 JavaScript 腳本建立多個線程，可是子線程徹底受主線程控制，且不得操做 DOM。因此，這個新標準並無改變 JavaScript 單線程的本質。

執行棧、任務隊列

上圖中，主線程運行的時候，產生堆（heap）和棧（stack），棧中的代碼調用各類外部API，它們在"任務隊列"中加入各類事件（DOM Event，ajax，setTimeout...）。只要棧中的代碼執行完畢，主線程就會去讀取任務隊列，依次執行那些事件所對應的回調函數。

堆（heap）：

對象被分配在一個堆中，即用以表示一個大部分非結構化的內存區域。

執行棧（stack）：

運行同步代碼。執行棧中的代碼（同步任務），老是在讀取"任務隊列"（異步任務）以前執行。

任務隊列（callback queue）：

"任務隊列"是一個事件的隊列（也能夠理解成消息的隊列），IO設備完成一項任務，就在"任務隊列"中添加一個事件，表示相關的異步任務能夠進入"執行棧"了。主線程讀取"任務隊列"，就是讀取裏面有哪些事件。

"任務隊列"中的事件，除了IO設備的事件之外，還包括一些用戶產生的事件（好比鼠標點擊、頁面滾動等等）。只要指定過回調函數，這些事件發生時就會進入"任務隊列"，等待主線程讀取。

所謂"回調函數"（callback），就是那些會被主線程掛起來的代碼。異步任務必須指定回調函數，當主線程開始執行異步任務，就是執行對應的回調函數。

"任務隊列"是一個先進先出的數據結構，排在前面的事件，優先被主線程讀取。主線程的讀取過程基本上是自動的，只要執行棧一清空，"任務隊列"上第一位的事件就自動進入主線程。可是，因爲存在後文提到的"定時器"功能，主線程首先要檢查一下執行時間，某些事件只有到了規定的時間，才能返回主線程。

同步任務、異步任務、宏任務、微任務

單線程就意味着，全部任務須要排隊，前一個任務結束，纔會執行後一個任務。若是前一個任務耗時很長，後一個任務就不得不一直等着。

若是排隊是由於計算量大，CPU忙不過來，倒也算了，可是不少時候CPU是閒着的，由於IO設備（輸入輸出設備）很慢（好比Ajax操做從網絡讀取數據），不得不等着結果出來，再往下執行。

JavaScript語言的設計者意識到，這時主線程徹底能夠無論IO設備，掛起處於等待中的任務，先運行排在後面的任務。等到IO設備返回告終果，再回過頭，把掛起的任務繼續執行下去。

因而，廣義上將 JavaScript 全部任務能夠分紅兩種，一種是同步任務（synchronous），另外一種是異步任務（asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務能夠執行了，該任務纔會進入主線程執行。

具體來講，異步執行的運行機制以下（同步執行也是如此，由於它能夠被視爲沒有異步任務的異步執行）：

（1）全部同步任務都在主線程上執行，造成一個"執行棧"（execution context stack）；

（2）主線程以外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件；

（3）一旦"執行棧"中的全部同步任務執行完畢，系統就會取出"任務隊列"中事件所對應的回調函數進入"執行棧"，開始執行；

（4）主線程不斷重複上面的第三步。
複製代碼

除了廣義上的定義，咱們能夠將任務進行更精細的定義，分爲宏任務與微任務：

• 宏任務（macro-task）： 包括總體代碼script，setTimeout，setInterval，ajax，dom操做
• 微任務（micro-task）： Promise

具體來講，宏任務與微任務執行的運行機制以下：

（1）首先，將"執行棧"最開始的全部同步代碼(宏任務)執行完成；

（2）檢查是否有微任務，若有則執行全部的微任務；

（3）取出"任務隊列"中事件所對應的回調函數(宏任務)進入"執行棧"並執行完成；

（4）再檢查是否有微任務，若有則執行全部的微任務；

（5）主線程不斷重複上面的（3）（4）步。
複製代碼

以上兩種運行機制，主線程都從"任務隊列"中讀取事件，這個過程是循環不斷的，因此整個的這種運行機制又稱爲 Event Loop（事件循環）。

setTimeout()、setInterval()

setTimeout() 和 setInterval() 這兩個函數，它們的內部運行機制徹底同樣，區別在於前者指定的代碼是一次性執行，後者則爲反覆執行。

setTimeout() 和 setInterval() 產生的任務是 異步任務，也屬於 宏任務。

setTimeout() 接受兩個參數，第一個是回調函數，第二個是推遲執行的毫秒數。setInterval() 接受兩個參數，第一個是回調函數，第二個是反覆執行的毫秒數。

若是將第二個參數設置爲0或者不設置，意思 並非當即執行，而是指定某個任務在主線程最先可得的空閒時間執行，也就是說，儘量早得執行。它在"任務隊列"的尾部添加一個事件，所以要等到同步任務和"任務隊列"現有的事件都處理完，纔會獲得執行。

因此說，setTimeout() 和 setInterval() 第二個參數設置的時間並非絕對的，它須要根據當前代碼最終執行的時間來肯定的，簡單來講，若是當前代碼執行的時間（如執行200ms）超出了推遲執行（setTimeout(fn, 100)）或反覆執行的時間（setInterval(fn, 100)），那麼setTimeout(fn, 100) 和 setTimeout(fn, 0) 也就沒有區別了，setInterval(fn, 100) 和 setInterval(fn, 0) 也就沒有區別了。

Promise

Promise 相對來講就比較特殊了，在 new Promise() 中傳入的回調函數是會 當即執行 的，可是它的 then() 方法是在 執行棧以後，任務隊列以前 執行的，它屬於 微任務。

process.nextTick

process.nextTick 是 Node.js 提供的一個與"任務隊列"有關的方法，它產生的任務是放在 執行棧的尾部，並不屬於 宏任務 和 微任務，所以它的任務 老是發生在全部異步任務以前。

setImmediate

setImmediate 是 Node.js 提供的另外一個與"任務隊列"有關的方法，它產生的任務追加到"任務隊列"的尾部，它和 setTimeout(fn, 0) 很像，但優先級都是 setTimeout 優先於 setImmediate。

有時候，setTimeout 的執行順序會在 setImmediate 的前面，有時候會在 setImmediate 的後面，這並非 node.js 的 bug，這是由於雖然 setTimeout 第二個參數設置爲0或者不設置，可是 setTimeout 源碼中，會指定一個具體的毫秒數（node爲1ms，瀏覽器爲4ms），而因爲當前代碼執行時間受到執行環境的影響，執行時間有所起伏，若是當前執行的代碼小於這個指定的值時，setTimeout 還沒到推遲執行的時間，天然就先執行 setImmediate 了，若是當前執行的代碼超過這個指定的值時，setTimeout 就會先於 setImmediate 執行。

優先級

經過上面的介紹，咱們就能夠得出一個代碼執行的優先級：

同步代碼（宏任務） > process.nextTick > Promise（微任務）> setTimeout(fn)、setInterval(fn)（宏任務）> setImmediate（宏任務）> setTimeout(fn, time)、setInterval(fn, time)，其中time>0

代碼解析

回到開頭給出的代碼，咱們來一步一步解析：

運行"執行棧"中的代碼：

console.log(1);

// setTimeout(function () { // 做爲宏任務，暫不執行，放到任務隊列中(1)
// console.log(2);
//
// new Promise(function (resolve, reject) {
// console.log(3);
// resolve();
// console.log(4);
// }).then(function () {
// console.log(5);
// });
// });

function fn() {
	console.log(6);
	//setTimeout(function () { // 做爲宏任務，暫不執行，放到任務隊列中(3)
	// console.log(7);
	//}, 50);
}

new Promise(function (resolve, reject) {
	console.log(8);
	resolve();
	console.log(9);
})
// .then(function () { // 做爲微任務，暫不執行
// console.log(10);
// });

fn();

console.log(11);

process.nextTick(function () {
	console.log(12);
});

// setImmediate(function () { // 做爲宏任務，暫不執行，放到任務隊列中(2)
// console.log(13);
// });
複製代碼

此時輸出爲：1 8 9 6 11 12

運行微任務：

new Promise(function (resolve, reject) {
	// console.log(8); // 已執行
	// resolve(); // 已執行
	// console.log(9); // 已執行
})
.then(function () {
	console.log(10);
});
複製代碼

此時輸出爲：10

讀取"任務隊列"的回調函數到"執行棧"：

setTimeout(function () {
	console.log(2);

	new Promise(function (resolve, reject) {
		console.log(3);
		resolve();
		console.log(4);
	})
	//.then(function () { // 做爲微任務，暫不執行
	// console.log(5);
	//});
});
複製代碼

此時輸出爲：2 3 4

再運行微任務：

setTimeout(function () {
	// console.log(2); // 已執行

	new Promise(function (resolve, reject) {
		// console.log(3); // 已執行
		// resolve(); // 已執行
		// console.log(4); // 已執行
	})
	.then(function () {
		console.log(5);
	});
});
複製代碼

此時輸出爲：5

再讀取"任務隊列"的回調函數到"執行棧"：

setImmediate(function () {
	console.log(13);
});
複製代碼

此時輸出爲：13

運行微任務：

無

再讀取"任務隊列"的回調函數到"執行棧"：

// function fn() { // 已執行
	// console.log(6); // 已執行
	setTimeout(function () {
		console.log(7);
	}, 50);
// }
複製代碼

此時輸出爲：7

運行微任務：

無

綜上，最終的輸出順序是：1 8 9 6 11 12 10 2 3 4 5 13 7

參考資料

• javascript中的Event Loop詳解
• JavaScript 運行機制詳解：再談Event Loop
• 併發模型與事件循環
• 這一次，完全弄懂 JavaScript 執行機制
• Node探祕之事件循環（2）--setTimeout/setImmediate/process.nextTick的差異

---

轉載請註明出處，謝謝！