摘要：具體的可以用下面的圖來大致說明一下同步和異步任務(wù)分別進入不同的執(zhí)行環(huán)境，同步的進入主線程，即主執(zhí)行棧，異步的進入。主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會去讀取對應(yīng)的任務(wù)，推入主線程執(zhí)行。

眾所周知，JavaScript是一門單線程語言，雖然在html5中提出了Web-Worker，但這并未改變JavaScript是單線程這一核心?？煽碒TML規(guī)范中的這段話：

To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. There are two kinds of event loops: those for browsing contexts, and those for workers.

為了協(xié)調(diào)事件、用戶交互、腳本、UI 渲染和網(wǎng)絡(luò)處理等行為，用戶引擎必須使用event loops。Event Loop包含兩類：一類是基于Browsing Context，一種是基于Worker，二者是獨立運行的。
下面本文用一個例子，著重講解下基于Browsing Context的事件循環(huán)機制。

來看下面這段JavaScript代碼：

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

先猜測一下這段代碼的輸出順序是什么，再去瀏覽器控制臺輸入一下，看看實際輸出的順序和你猜測出的順序是否一致，如果一致，那就說明，你對JavaScript的事件循環(huán)機制還是有一定了解的，繼續(xù)往下看可以鞏固下你的知識；而如果實際輸出的順序和你的猜測不一致，那么本文下面的部分會為你答疑解惑。

所有的任務(wù)可以分為同步任務(wù)和異步任務(wù)，同步任務(wù)，顧名思義，就是立即執(zhí)行的任務(wù)，同步任務(wù)一般會直接進入到主線程中執(zhí)行；而異步任務(wù)，就是異步執(zhí)行的任務(wù)，比如ajax網(wǎng)絡(luò)請求，setTimeout定時函數(shù)等都屬于異步任務(wù)，異步任務(wù)會通過任務(wù)隊列(Event Queue)的機制來進行協(xié)調(diào)。具體的可以用下面的圖來大致說明一下：

同步和異步任務(wù)分別進入不同的執(zhí)行環(huán)境，同步的進入主線程，即主執(zhí)行棧，異步的進入Event Queue。主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會去Event Queue讀取對應(yīng)的任務(wù)，推入主線程執(zhí)行。
上述過程的不斷重復(fù)就是我們說的Event Loop(事件循環(huán))。

在事件循環(huán)中，每進行一次循環(huán)操作稱為tick，通過閱讀規(guī)范可知，每一次tick的任務(wù)處理模型是比較復(fù)雜的，其關(guān)鍵的步驟可以總結(jié)如下：

在此次tick中選擇最先進入隊列的任務(wù)(oldest task)，如果有則執(zhí)行(一次)

檢查是否存在Microtasks，如果存在則不停地執(zhí)行，直至清空Microtask Queue

更新render

主線程重復(fù)執(zhí)行上述步驟

可以用一張圖來說明下流程：

這里相信有人會想問，什么是microtasks?規(guī)范中規(guī)定，task分為兩大類, 分別是Macro Task （宏任務(wù)）和Micro Task（微任務(wù)）, 并且每個宏任務(wù)結(jié)束后, 都要清空所有的微任務(wù),這里的Macro Task也是我們常說的task，有些文章并沒有對其做區(qū)分，后面文章中所提及的task皆看做宏任務(wù)(macro task)。

(macro)task主要包含：script(整體代碼)、setTimeout、setInterval、I/O、UI交互事件、setImmediate(Node.js 環(huán)境)

microtask主要包含：Promise、MutaionObserver、process.nextTick(Node.js 環(huán)境)

setTimeout/Promise等API便是任務(wù)源，而進入任務(wù)隊列的是由他們指定的具體執(zhí)行任務(wù)。來自不同任務(wù)源的任務(wù)會進入到不同的任務(wù)隊列。其中setTimeout與setInterval是同源的。

千言萬語，不如就著例子講來的清楚。下面我們可以按照規(guī)范，一步步執(zhí)行解析下上面的例子，先貼一下例子代碼（免得你往上翻）。

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

整體script作為第一個宏任務(wù)進入主線程，遇到console.log，輸出script start

遇到setTimeout，其回調(diào)函數(shù)被分發(fā)到宏任務(wù)Event Queue中

遇到Promise，其then函數(shù)被分到到微任務(wù)Event Queue中,記為then1，之后又遇到了then函數(shù)，將其分到微任務(wù)Event Queue中，記為then2

遇到console.log，輸出script end

至此，Event Queue中存在三個任務(wù)，如下表：

執(zhí)行微任務(wù)，首先執(zhí)行then1，輸出promise1,然后執(zhí)行then2，輸出promise2，這樣就清空了所有微任務(wù)

執(zhí)行setTimeout任務(wù)，輸出setTimeout

至此，輸出的順序是：script start, script end, promise1, promise2, setTimeout

so，你猜對了嗎？

再來一個題目，來做個練習(xí)：

console.log("script start");

setTimeout(function() {
  console.log("timeout1");
}, 10);

new Promise(resolve => {
    console.log("promise1");
    resolve();
    setTimeout(() => console.log("timeout2"), 10);
}).then(function() {
    console.log("then1")
})

console.log("script end");

這個題目就稍微有點復(fù)雜了，我們再分析下：

首先，事件循環(huán)從宏任務(wù)(macrotask)隊列開始，最初始，宏任務(wù)隊列中，只有一個script(整體代碼)任務(wù)；當(dāng)遇到任務(wù)源(task source)時，則會先分發(fā)任務(wù)到對應(yīng)的任務(wù)隊列中去。所以，就和上面例子類似，首先遇到了console.log，輸出script start；
接著往下走，遇到setTimeout任務(wù)源，將其分發(fā)到任務(wù)隊列中去，記為timeout1；
接著遇到promise，new promise中的代碼立即執(zhí)行，輸出promise1,然后執(zhí)行resolve,遇到setTimeout,將其分發(fā)到任務(wù)隊列中去，記為timemout2,將其then分發(fā)到微任務(wù)隊列中去，記為then1；
接著遇到console.log代碼，直接輸出script end
接著檢查微任務(wù)隊列，發(fā)現(xiàn)有個then1微任務(wù)，執(zhí)行，輸出then1
再檢查微任務(wù)隊列，發(fā)現(xiàn)已經(jīng)清空，則開始檢查宏任務(wù)隊列，執(zhí)行timeout1,輸出timeout1；
接著執(zhí)行timeout2，輸出timeout2
至此，所有的都隊列都已清空，執(zhí)行完畢。其輸出的順序依次是：script start, promise1, script end, then1, timeout1, timeout2

用流程圖看更清晰：

有個小tip：從規(guī)范來看，microtask優(yōu)先于task執(zhí)行，所以如果有需要優(yōu)先執(zhí)行的邏輯，放入microtask隊列會比task更早的被執(zhí)行。

最后的最后，記住，JavaScript是一門單線程語言。

這一次，徹底弄懂 JavaScript 執(zhí)行機制
Tasks, microtasks, queues and schedules
從一道題淺說 JavaScript 的事件循環(huán)