事件循環(huán)（Event Loop），是每個(gè)JS開發(fā)者都會(huì)接觸到的概念，但是剛接觸時(shí)可能會(huì)存在各種疑惑。

眾所周知，JS是單線程的，即同一時(shí)間只能運(yùn)行一個(gè)任務(wù)。一般情況下這不會(huì)引發(fā)問題，但是如果我們有一個(gè)耗時(shí)較多的任務(wù)，我們必須等該任務(wù)執(zhí)行完畢才能進(jìn)入下一個(gè)任務(wù)，然而等待的這段時(shí)間常常讓我們無法忍受，因?yàn)槲覀冞@段時(shí)間什么都不能做，包括頁面也是鎖死狀態(tài)。

好在，時(shí)代在進(jìn)步，瀏覽器向我們提供了JS引擎不具備的特性：Web API。Web API包括DOM API、定時(shí)器、HTTP請(qǐng)求等特性，可以幫助我們實(shí)現(xiàn)異步、非阻塞的行為。我們可以通過異步執(zhí)行任務(wù)的方法來解決單線程的弊端，事件循環(huán)為此而生。

提問QAQ：為什么JavaScript是單線程的？

多個(gè)線程表示您可以同時(shí)獨(dú)立執(zhí)行程序的多個(gè)部分。確定一種語言是單線程還是多線程的最簡單方法是看它擁有有多少個(gè)調(diào)用堆棧。JS 只有一個(gè)，所以它是單線程語言。

將JS設(shè)計(jì)為單線程是由其用途運(yùn)行環(huán)境等因素決定的，作為瀏覽器腳本語言，JS的主要用途是與用戶互動(dòng)，以及操作DOM。這決定了它只能是單線程，否則會(huì)帶來很復(fù)雜的同步問題。同時(shí)，單線程執(zhí)行效率高。

1. Event Loop舊印象

大家熟悉的關(guān)于事件循環(huán)的機(jī)制說法大概是：主進(jìn)程執(zhí)行完了之后，每次從任務(wù)隊(duì)列里取一個(gè)任務(wù)執(zhí)行。如圖所示，所有的任務(wù)分為同步任務(wù)和異步任務(wù)，同步任務(wù)直接進(jìn)入任務(wù)隊(duì)列-->主程序執(zhí)行；異步任務(wù)則會(huì)掛起，等待其有返回值時(shí)進(jìn)入任務(wù)隊(duì)列從而被主程序執(zhí)行。異步任務(wù)會(huì)通過任務(wù)隊(duì)列的機(jī)制(先進(jìn)先出的機(jī)制)來進(jìn)行協(xié)調(diào)。具體如圖所示：

同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行環(huán)境，同步的進(jìn)入主線程，即主執(zhí)行棧，異步的進(jìn)入任務(wù)隊(duì)列。主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會(huì)去任務(wù)隊(duì)列讀取對(duì)應(yīng)的任務(wù)，推入主線程執(zhí)行。 上述過程的不斷重復(fù)就是我們所熟悉的Event Loop (事件循環(huán))。但是promise出現(xiàn)之后，這個(gè)說法就不太準(zhǔn)確了。

2. Event Loop 后印象

2.1 理論

這里首先用一張圖展示JavaScript的事件循環(huán)：

直接看這張圖，可能黑人問號(hào)已經(jīng)出現(xiàn)在同學(xué)的腦海。。。

這里將task分為兩大類，分別是macroTask（宏任務(wù)）和microTask（微任務(wù)）.一次事件循環(huán)：先運(yùn)行macroTask隊(duì)列中的一個(gè)，然后運(yùn)行microTask隊(duì)列中的所有任務(wù)。接著開始下一次循環(huán)（只是針對(duì)macroTask和microTask，一次完整的事件循環(huán)會(huì)比這個(gè)復(fù)雜的多）。

那什么是macroTask？什么是microTask呢？

JavaScript引擎把我們的所有任務(wù)分門別類，一部分歸為macroTask，另外一部分歸為microTack，下面是類別劃分：

macroTask:

• setTimeout
• setInterval
• setImmediate
• requestAnimationFrame
• I/O
• UI rendering

microTask:

• process.nextTick
• Promise
• Object.observe
• MutationObserver

我們所熟悉的定時(shí)器就屬于macroTask，僅僅了解macroTask的機(jī)制還是不夠的。為直觀感受兩種隊(duì)列的區(qū)別，下面上代碼進(jìn)行實(shí)踐感知。

2.2 實(shí)踐

以setTimeout、process.nextTick、promise為例直觀感受下兩種任務(wù)隊(duì)列的運(yùn)行方式。

console.log('main1');

process.nextTick(function() {
 console.log('process.nextTick1');
});

setTimeout(function() {
 console.log('setTimeout');
 process.nextTick(function() {
 console.log('process.nextTick2');
 });
}, 0);

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

console.log('main2');

別著急看答案，先以上面的理論自己想想，運(yùn)行結(jié)果會(huì)是啥？

最終結(jié)果是這樣的：

main1
promise
main2
process.nextTick1
promise then

// 第二次事件循環(huán)
setTimeout
process.nextTick2

process.nextTick 和 promise then在 setTimeout 前面輸出，已經(jīng)證明了macroTask和microTask的執(zhí)行順序。但是有一點(diǎn)必須要指出的是。上面的圖容易給人一個(gè)錯(cuò)覺，就是主進(jìn)程的代碼執(zhí)行之后，會(huì)先調(diào)用macroTask，再調(diào)用microTask，這樣在第一個(gè)循環(huán)里一定是macroTask在前，microTask在后。

但是最終的實(shí)踐證明：在第一個(gè)循環(huán)里，process.nextTick1和promise then這兩個(gè)microTask是在setTimeout這個(gè)macroTask里之前輸出的，這是因?yàn)镻romises/A+規(guī)范規(guī)定主進(jìn)程的代碼也屬于macroTask。

主進(jìn)程這個(gè)macroTask（也就是main1、promise和main2）執(zhí)行完了，自然會(huì)去執(zhí)行process.nextTick1和promise then這兩個(gè)microTask。這是第一個(gè)循環(huán)。之后的setTimeout和process.nextTick2屬于第二個(gè)循環(huán)

別看上面那段代碼好像特別繞，把原理弄清楚了，都一樣 ~

requestAnimationFrame、Object.observe(已廢棄) 和 MutationObserver這三個(gè)任務(wù)的運(yùn)行機(jī)制大家可以從上面看到，不同的只是具體用法不同。重點(diǎn)說下UI rendering。在HTML規(guī)范：event-loop-processing-model里敘述了一次事件循環(huán)的處理過程，在處理了macroTask和microTask之后，會(huì)進(jìn)行一次Update the rendering，其中細(xì)節(jié)比較多，總的來說會(huì)進(jìn)行一次UI的重新渲染。

3. 小結(jié)

總而言之，記住一次事件循環(huán)：先運(yùn)行macroTask隊(duì)列中的一個(gè)，然后運(yùn)行microTask隊(duì)列中的所有任務(wù)。接著開始下一次循環(huán)。

參考文獻(xiàn)：

• JavaScript Event Loop相關(guān)原理解析
• 深入理解事件循環(huán)機(jī)制
• JavaScript運(yùn)行機(jī)制

以上就是深入分析JavaScript 事件循環(huán)(Event Loop)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 事件循環(huán)(Event Loop)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論