全方位理解JavaScript的Event Loop

laixiangran發表於2018-10-14

先看段程式碼：

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
2018-06-27
JavaScriptOOP
javascript - event loop
2019-01-20
JavaScriptOOP
JavaScript Event Loop
2020-11-12
JavaScriptOOP
Event Loop個人理解
2016-12-27
OOP
JavaScript與Event Loop
2018-03-25
JavaScriptOOP
Javascript之Event Loop
2018-04-16
JavaScriptOOP
深入理解 Event Loop
2019-05-22
OOP
[譯]理解js中的event loop
2019-04-11
JSOOP
深入理解Javascript單執行緒談Event Loop
2017-09-17
JavaScript執行緒OOP
javascript中的Event Loop詳解
2018-01-23
JavaScriptOOP
理解JS中的Event Loop機制
2018-04-06
JSOOP
Javascript 事件迴圈event loop
2019-03-03
JavaScript事件OOP
JavaScript事件迴圈(Event Loop)
2019-01-21
JavaScript事件OOP
圖解搞懂JavaScript引擎Event Loop
2018-01-22
圖解JavaScriptOOP
javascript執行機制：Event Loop
2018-03-28
JavaScriptOOP
JavaScript的事件迴圈（Event loop）(附圖)
2019-03-02
JavaScript事件OOP
Javascript中的執行機制——Event Loop
2019-03-05
JavaScriptOOP
JavaScript 中的非同步：Event Loop 及其他
2016-09-30
JavaScript非同步OOP
瀏覽器的event loop和node的event loop
2018-05-27
瀏覽器OOP
JavaScript執行機制：event-loop
2018-08-08
JavaScriptOOP
Event Loop
2019-12-30
OOP
瀏覽器event loop和node的event loop講解
2018-05-19
瀏覽器OOP
Javascript 執行機制詳解，Event Loop
2018-01-18
JavaScriptOOP
JavaScript 執行機制--Event Loop詳解
2018-03-19
JavaScriptOOP
event loop整理
2021-02-27
OOP
node event loop
2018-08-24
OOP
node中的Event Loop
2019-02-27
OOP
hey，你的Event Loop
2018-08-07
OOP
一文梳理JavaScript 事件迴圈(Event Loop)
2020-06-18
JavaScript事件OOP
JavaScript深入之事件迴圈機制（event loop）
2019-04-03
JavaScript事件OOP
帶你瞭解JavaScript的執行機制—Event Loop
2019-02-02
JavaScriptOOP
從Promise來看JavaScript中的Event Loop、Tasks和Microtasks
2018-06-07
PromiseJavaScriptOOP
徹底理解 JS Event Loop（瀏覽器環境）
2018-03-10
JSOOP瀏覽器
淺談event loop
2019-03-03
OOP
Performance Without the Event Loop
2019-05-17
ORMOOP
月度文章——Event Loop
2018-10-31
OOP
JS的Event Loop 和 microTask
2018-08-05
JSOOP
瀏覽器的 Event Loop
2019-01-07
瀏覽器OOP

全方位理解JavaScript的Event Loop

JavaScript是單執行緒

執行棧、任務佇列

同步任務、非同步任務、巨集任務、微任務

setTimeout()、setInterval()

Promise

process.nextTick

setImmediate

優先順序

程式碼解析

參考資料

相關文章