前言

JavaScript是一門單線程的非阻塞腳本語言，同一時刻只允許一個代碼段執行。在單線程的機制下，執行異步任務時，在等待結果返回的這個時間段，后面的代碼就無法執行了。

JS在執行代碼時，遇到異步任務之后還有同步任務的場景時，它并不會等待異步任務執行完，而是先執行同步任務，那么JS是如何做到這一點的呢？

本篇文章將詳細講解上述問題，歡迎各位感興趣的開發者閱讀本文。

事件循環

單線程

講事件循環之前，我們先來理解下為什么JS不設計成多線程的。

我們做個假設，如果JS是多線程的，因為JS有DOM API可以操作DOM，此時如果有兩個線程在操作同一個DOM，線程1刪除了這個dom節點，線程2要操作這個dom，就會產生矛盾，到底以哪個線程為主。

為了避免這種情況的出現，JS就被設計成了單線程 。 

宏任務與微任務

JS引擎把所有任務分為兩類：宏任務、微任務。

宏任務有：

• script整體代碼
• setTimeout、setInterval
• I/O
• UI渲染
• postMessage
• MessageChannel
• requestAnimationFrame
• setImmediate(Node.js 環境)

微任務有：

• new Promise.then()
• MutaionObserver
• process.nextTick(Node.js 環境)

執行規則

文章一開頭我們了解到了單線程的弊端，JS是通過事件循環機制（EventLoop）來解決這一弊端的，接下來我們來看下EventLoop的執行規則：

• 所有代碼作為宏任務進入主線程執行棧，開始執行
• 執行過程中，同步代碼會立即執行，宏任務進入宏任務隊列，微任務進入微任務隊列
• 當前宏任務執行完成出隊，讀取微任務隊列，有則執行，直至全部執行完畢
• 執行瀏覽器ui進程渲染
• 檢查是否有webworker任務，有則執行
• 本輪宏任務執行完成，回到第2步，繼續執行，直至宏任務與微任務隊列全部清空

舉例說明

我們了解完它的執行規則后，接下來我們舉個例子來說明下，如下所示：

console.log("1"); // 1 同步代碼：立即執行 [1]

setTimeout(function() {
  console.log("2"); // 3 同步代碼執行執行 輸出2
  process.nextTick(function() {
    console.log("3"); // 4 進入微任務隊列 [3]
  });
  new Promise(function(resolve) {
    console.log("4"); // 3 同步代碼執行執行 輸出4
    resolve();
  }).then(function() {
    console.log("5"); // 4 進入微任務隊列 [3, 5]
  });
});

process.nextTick(function() {
  console.log("6"); // 2 進入微任務隊列 [6]
});

new Promise(function(resolve) {
  console.log("7"); // 1 宏任務：立即執行 [1, 7]
  resolve();
}).then(function() {
  console.log("8"); // 2 進入微任務隊列 [6, 8]
});

setTimeout(function() {
  console.log("9"); // 5 宏任務：立即執行 [9]
  process.nextTick(function() {
    console.log("10"); // 6 進入微任務隊列 [10]
  });
  new Promise(function(resolve) {
    console.log("11"); // 5 宏任務：立即執行 [9, 11]
    resolve();
  }).then(function() {
    console.log("12"); // 6 進入微任務隊列 [10, 12]
  });
});

// 執行順序：1 7 6 8 2 4 3 5 9 11 10 12

process.nextTick()為node中的方法，你可以把它理解為與promise一樣的微任務，promise的executor函數中的同步代碼會立即執行。

我們來分析下上述代碼的執行順序，如下圖所示：

運行結果如下所示：

當你把上述示例代碼啃透后，那么你也就理解js的事件循環機制了。

當然，你可能沒有那么快就啃透這個例子，這種概念性的東西，掌握它最好的辦法就是：將示例代碼放到編輯器里，對照著事件循環的執行規則，一行一行的去讀代碼，大腦過一遍，猜測運行結果，然后再去執行代碼判斷執行結果是否與你猜的一致。

最后，舉一反三，去網上找一些事件循環的面試題多加練習，慢慢的你就把這個知識點啃透了，Good Luck！