JS的執(zhí)行機(jī)制是什么意思

前言

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

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

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

事件循環(huán)

單線程

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

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

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

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

JS引擎把所有任務(wù)分為兩類：宏任務(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)境)

執(zhí)行規(guī)則

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

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

舉例說明

我們了解完它的執(zhí)行規(guī)則后，接下來我們舉個(gè)例子來說明下，如下所示：

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

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

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

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

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

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

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

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

運(yùn)行結(jié)果如下所示：

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

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

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