前言

JavaScript是一門(mén)單線(xiàn)程的非阻塞腳本語(yǔ)言，同一時(shí)刻只允許一個(gè)代碼段執行。在單線(xiàn)程的機制下，執行異步任務(wù)時(shí)，在等待結果返回的這個(gè)時(shí)間段，后面的代碼就無(wú)法執行了。

JS在執行代碼時(shí)，遇到異步任務(wù)之后還有同步任務(wù)的場(chǎng)景時(shí)，它并不會(huì )等待異步任務(wù)執行完，而是先執行同步任務(wù)，那么JS是如何做到這一點(diǎn)的呢？

本篇文章將詳細講解上述問(wèn)題，歡迎各位感興趣的開(kāi)發(fā)者閱讀本文。

事件循環(huán)

單線(xiàn)程

講事件循環(huán)之前，我們先來(lái)理解下為什么JS不設計成多線(xiàn)程的。

我們做個(gè)假設，如果JS是多線(xiàn)程的，因為JS有DOM API可以操作DOM，此時(shí)如果有兩個(gè)線(xiàn)程在操作同一個(gè)DOM，線(xiàn)程1刪除了這個(gè)dom節點(diǎn)，線(xiàn)程2要操作這個(gè)dom，就會(huì )產(chǎn)生矛盾，到底以哪個(gè)線(xiàn)程為主。

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

宏任務(wù)與微任務(wù)

JS引擎把所有任務(wù)分為兩類(lèi)：宏任務(wù)、微任務(wù)。

宏任務(wù)有：

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

微任務(wù)有：

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

執行規則

文章一開(kāi)頭我們了解到了單線(xiàn)程的弊端，JS是通過(guò)事件循環(huán)機制（EventLoop）來(lái)解決這一弊端的，接下來(lái)我們來(lái)看下EventLoop的執行規則：

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

舉例說(shuō)明

我們了解完它的執行規則后，接下來(lái)我們舉個(gè)例子來(lái)說(shuō)明下，如下所示：

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

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

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

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

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

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

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

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

運行結果如下所示：

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

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

最后，舉一反三，去網(wǎng)上找一些事件循環(huán)的面試題多加練習，慢慢的你就把這個(gè)知識點(diǎn)啃透了，Good Luck！