2. 程式人生 > >JavaScript 事件迴圈及非同步原理（完全指北）

JavaScript 事件迴圈及非同步原理（完全指北）

阿新 • • 發佈：2018-11-12

引言

最近面試被問到，JS 既然是單執行緒的，為什麼可以執行非同步操作？ 當時腦子蒙了，思維一直被困在 單執行緒 這個問題上，一直在思考單執行緒為什麼可以額外執行任務，其實在我很早以前寫的部落格裡面有寫相關的內容，只不過時間太長給忘了，所以要經常溫習啊：（淺談 Generator 和 Promise 的原理及實現）

  1. JS 是單執行緒的，只有一個主執行緒
  2. 函式內的程式碼從上到下順序執行，遇到被呼叫的函式先進入被呼叫函式執行，待完成後繼續執行
  3. 遇到非同步事件，瀏覽器另開一個執行緒，主執行緒繼續執行，待結果返回後，執行回撥函式

其實 JS 這個語言是執行在宿主環境中，比如 瀏覽器環境

，nodeJs環境

  • 在瀏覽器中，瀏覽器負責提供這個額外的執行緒
  • 在 Node 中，Node.js 藉助 libuv 來作為抽象封裝層， 從而遮蔽不同作業系統的差異，Node可以藉助libuv來實現多執行緒。

而這個非同步執行緒又分為 微任務 和 巨集任務，本篇文章就來探究一下 JS 的非同步原理以及其事件迴圈機制

為什麼 JavaScript 是單執行緒的

JavaScript 語言的一大特點就是單執行緒，也就是說，同一個時間只能做一件事。這樣設計的方案主要源於其語言特性，因為 JavaScript 是瀏覽器指令碼語言，它可以操縱 DOM ，可以渲染動畫，可以與使用者進行互動，如果是多執行緒的話，執行順序無法預知，而且操作以哪個執行緒為準也是個難題。

所以，為了避免複雜性，從一誕生，JavaScript就是單執行緒，這已經成了這門語言的核心特徵，將來也不會改變。

在 HTML5 時代，瀏覽器為了充分發揮 CPU 效能優勢，允許 JavaScript 建立多個執行緒，但是即使能額外建立執行緒，這些子執行緒仍然是受到主執行緒控制，而且不得操作 DOM，類似於開闢一個執行緒來運算複雜性任務，運算好了通知主執行緒運算完畢，結果給你，這類似於非同步的處理方式，所以本質上並沒有改變 JavaScript 單執行緒的本質。

函式呼叫棧與任務佇列

函式呼叫棧

JavaScript 只有一個主執行緒和一個呼叫棧（call stack），那什麼是呼叫棧呢？

這類似於一個乒乓球桶，第一個放進去的乒乓球會最後一個拿出來。

舉個栗子：

function a() {  
  console.log("I'm a!");
};

function b() {  
  a();
  console.log("I'm b!");
};

b();
複製程式碼

執行過程如下所示：

  • 第一步，執行這個檔案，此檔案會被壓入呼叫棧（例如此檔名為 main.js）

    call stack

    main.js

  • 第二步，遇到 b() 語法，呼叫 b() 方法，此時呼叫棧會壓入此方法進行呼叫：

    call stack

    b()
    main.js

  • 第三步：呼叫 b() 函式時，內部呼叫的 a() ，此時 a() 將壓入呼叫棧：

    call stack

    a()
    b()
    main.js

  • 第四步：a() 呼叫完畢輸出 I'm a!，呼叫棧將 a() 彈出，就變成如下：

    call stack

    b()
    main.js

  • 第五步：b()呼叫完畢輸出I'm b!，呼叫棧將 b() 彈出，變成如下：

    call stack

    main.js

  • 第六步：main.js 這個檔案執行完畢，呼叫棧將 b() 彈出，變成一個空棧，等待下一個任務執行：

    call stack

這就是一個簡單的呼叫棧，在呼叫棧中，前一個函式在執行的時候，下面的函式全部需要等待前一個任務執行完畢，才能執行。

但是，有很多工需要很長時間才能完成，如果一直都在等待的話，呼叫棧的效率極其低下，這時，JavaScript 語言設計者意識到，這些任務主執行緒根本不需要等待，只要將這些任務掛起，先運算後面的任務，等到執行完畢了，再回頭將此任務進行下去，於是就有了 任務佇列 的概念。

任務佇列

所有任務可以分成兩種，一種是 同步任務（synchronous），另一種是 非同步任務（asynchronous） 。

同步任務指的是，在主執行緒上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務。

非同步任務指的是，不進入主執行緒、而進入"任務佇列"（task queue）的任務，只有 "任務佇列"通知主執行緒，某個非同步任務可以執行了，該任務才會進入主執行緒執行。

所以，當在執行過程中遇到一些類似於 setTimeout 等非同步操作的時候，會交給瀏覽器的其他模組進行處理，當到達 setTimeout 指定的延時執行的時間之後，回撥函式會放入到任務佇列之中。

當然，一般不同的非同步任務的回撥函式會放入不同的任務佇列之中。等到呼叫棧中所有任務執行完畢之後，接著去執行任務佇列之中的回撥函式。

用一張圖來表示就是：

image-20181011232324823

上圖中，呼叫棧先進行順序呼叫，一旦發現非同步操作的時候就會交給瀏覽器核心的其他模組進行處理，對於 Chrome 瀏覽器來說，這個模組就是 webcore 模組，上面提到的非同步API，webcore 分別提供了 DOM Binding 、 network、timer 模組進行處理。等到這些模組處理完這些操作的時候將回調函式放入任務佇列中，之後等棧中的任務執行完之後再去執行任務佇列之中的回撥函式。

我們先來看一個有意思的現象，我執行一段程式碼，大家覺得輸出的順序是什麼：

  setTimeout(() => {
    console.log('setTimeout')
  }, 22)
  for (let i = 0; i++ < 2;) {
    i === 1 && console.log('1')
  }
  setTimeout(() => {
    console.log('set2')
  }, 20)
  for (let i = 0; i++ < 100000000;) {
    i === 99999999 && console.log('2')
  }
複製程式碼

沒錯！結果很量子化：

QQ20181012-101019-HD

那麼這實際上是一個什麼過程呢？那我就拿上面的一個過程解析一下：

  • 首先，檔案入棧

    image-20181012102607896

  • 開始執行檔案，讀取到第一行程式碼，當遇到 setTimeout 的時候，執行引擎將其新增到棧中。（由於字型太細我調粗了一點。。。）

    image-20181012103026018

  • 呼叫棧發現 setTimeout 是 Webapis中的 API，因此將其交給瀏覽器的 timer 模組進行處理，同時處理下一個任務。

image-20181012134531903

  • 第二個 setTimeout 入棧

    image-20181012134755318

  • 同上所示，非同步請求被放入 非同步API 進行處理，同時進行下一個入棧操作：

    image-20181012135048171

  • 在進行非同步的同時，app.js 檔案呼叫完畢，彈出呼叫棧，非同步執行完畢後，會將回調函式放入任務佇列：

    image-20181012140221038

  • 任務佇列通知呼叫棧，我這邊有任務還沒有執行，呼叫棧則會執行任務佇列裡的任務：

    image-20181012140632679

    image-20181012140723756

上面的流程解釋了瀏覽器遇到 setTimeout 之後究竟如何執行的，其實總結下來就是以下幾點：

  1. 呼叫棧順序呼叫任務
  2. 當呼叫棧發現非同步任務時，將非同步任務交給其他模組處理，自己繼續進行下面的呼叫
  3. 非同步執行完畢，非同步模組將任務推入任務佇列，並通知呼叫棧
  4. 呼叫棧在執行完當前任務後，將執行任務佇列裡的任務
  5. 呼叫棧執行完任務佇列裡的任務之後，繼續執行其他任務

這一整個流程就叫做 事件迴圈（Event Loop）。

那麼，瞭解了這麼多，小夥伴們能從事件迴圈上面來解析下面程式碼的輸出嗎？

  for (var i = 0; i < 10; i++) {
    setTimeout(() => {
      console.log(i)
    }, 1000)
  }
  console.log(i)
複製程式碼

解析：

  • 首先由於 var 的變數提升，i 在全域性作用域都有效
  • 再次，程式碼遇到 setTimeout 之後，將該函式交給其他模組處理，自己繼續執行 console.log(i) ，由於變數提升，i 已經迴圈10次，此時 i 的值為 10 ，即，輸出 10
  • 之後，非同步模組處理好函式之後，將回調推入任務佇列，並通知呼叫棧
  • 1秒之後，呼叫棧順序執行回撥函式，由於此時 i 已經變成 10 ，即輸出10次 10

用下圖示意：

image-20181012152514598

現在小夥伴們是否已經恍然大悟，從底層瞭解了為什麼這個程式碼會輸出這個內容吧：

image-20181012152640173

那麼問題又來了，我們看下面的程式碼：

  setTimeout(() => {
    console.log(4)
  }, 0);
  new Promise((resolve) =>{
    console.log(1);
    for (var i = 0; i < 10000000; i++) {
      i === 9999999 && resolve();
    }
    console.log(2);
  }).then(() => {
    console.log(5);
  });
  console.log(3);
複製程式碼

大家覺得這個輸出是多少呢？

有小夥伴就開始分析了，promise 也是非同步，先執行裡面函式的內容，輸出 1 和 2，然後執行下面的函式，輸出 3 ，但 Promise 裡面需要迴圈999萬次，setTimeout 卻是0毫秒執行，setTimeout 應該立即推入執行棧， Promise 後推入執行棧，結果應該是下圖：

image-20181012161137385

實際上答案是 1,2,3,5,4 噢，這是為什麼呢？這就涉及到任務佇列的內部，巨集任務和微任務。

巨集任務和微任務

什麼是巨集任務和微任務

任務佇列又分為 macro-task（巨集任務） 與 micro-task（微任務） ，在最新標準中，它們被分別稱為 task 與 jobs 。

  • macro-task（巨集任務）大概包括：script(整體程式碼), setTimeout, setInterval, setImmediate（NodeJs）, I/O, UI rendering。
  • micro-task（微任務）大概包括: process.nextTick（NodeJs）, Promise, Object.observe(已廢棄), MutationObserver(html5新特性)
  • 來自不同任務源的任務會進入到不同的任務佇列。其中 setTimeout 與 setInterval 是同源的。

事實上，事件迴圈決定了程式碼的執行順序，從全域性上下文進入函式呼叫棧開始，直到呼叫棧清空，然後執行所有的micro-task（微任務），當所有的micro-task（微任務）執行完畢之後，再執行macro-task（巨集任務），其中一個macro-task（巨集任務）的任務佇列執行完畢（例如setTimeout 佇列），再次執行所有的micro-task（微任務），一直迴圈直至執行完畢。

解析

現在我就開始解析上面的程式碼。

  • 第一步，整體程式碼 script 入棧，並執行 setTimeout 後，執行 Promise：

    image-20181013144141327

  • 第二步，執行時遇到 Promise 例項，Promise 建構函式中的第一個引數，是在new的時候執行，因此不會進入任何其他的佇列，而是直接在當前任務直接執行了，而後續的.then則會被分發到micro-task的Promise佇列中去。

    image-20181013144638756

    image-20181013144902587

  • 第三步，呼叫棧繼續執行巨集任務 app.js，輸出3並彈出呼叫棧，app.js 執行完畢彈出呼叫棧：

    image-20181013145222565

    image-20181013145713234

  • 第四步，這時，macro-task(巨集任務)中的 script 佇列執行完畢，事件迴圈開始執行所有的 micro-task(微任務)：

    image-20181013150040555

  • 第五步，呼叫棧發現所有的 micro-task(微任務) 都已經執行完畢，又跑去macro-task(巨集任務)呼叫 setTimeout 佇列：

    image-20181013150354612

  • 第六步，macro-task(巨集任務) setTimeout 佇列執行完畢，呼叫棧又跑去微任務進行查詢是否有未執行的微任務，發現沒有就跑去巨集任務執行下一個佇列，發現巨集任務也沒有佇列執行，此次呼叫結束，輸出內容1,2,3,5,4。

那麼上面這個例子的輸出結果就顯而易見。大家可以自行嘗試體會。

總結

  1. 不同的任務會放進不同的任務佇列之中。
  2. 先執行macro-task，等到函式呼叫棧清空之後再執行所有在佇列之中的micro-task。
  3. 等到所有micro-task執行完之後再從macro-task中的一個任務佇列開始執行，就這樣一直迴圈。
  4. 巨集任務和微任務的佇列執行順序排列如下：
  5. macro-task（巨集任務）：script(整體程式碼), setTimeout, setInterval, setImmediate（NodeJs）, I/O, UI rendering。
  6. micro-task（微任務）: process.nextTick（NodeJs）, Promise, Object.observe(已廢棄), MutationObserver(html5新特性)

進階舉例

那麼，我再來一些有意思一點的程式碼：

<script>
  setTimeout(() => {
    console.log(4)
  }, 0);
  new Promise((resolve) => {
    console.log(1);
    for (var i = 0; i < 10000000; i++) {
      i === 9999999 && resolve();
    }
    console.log(2);
  }).then(() => {
    console.log(5);
  });
  console.log(3);
</script>
<script>
  console.log(6)
  new Promise((resolve) => {
    resolve()
  }).then(() => {
    console.log(7);
  });
</script>
複製程式碼

這一段程式碼輸出的順序是什麼呢？

其實，看明白上面流程的同學應該知道整個流程，為了防止一些同學不明白，我再簡單分析一下：

  • 首先，script1 進入任務佇列（為了方便起見，我把兩塊script 命名為script1，script2）：

    image-20181013152218883

  • 第二步，script1 進行呼叫並彈出呼叫棧：

    image-20181013152506563

  • 第三步，script1執行完畢，呼叫棧清空後，直接調取所有微任務：

    image-20181013152844991

  • 第四步，所有微任務執行完畢之後，呼叫棧會繼續呼叫巨集任務佇列：

    image-20181013153031374

  • 第五步，執行 script2，並彈出：

    image-20181013153426912

  • 第六步，呼叫棧開始執行微任務：

    image-20181013153503105

  • 第七步，呼叫棧呼叫完所有微任務，又跑去執行巨集任務：

    image-20181013153654938

至此，所有任務執行完畢，輸出 1,2,3,5,6,7,4

瞭解了上面的內容，我覺得再複雜一點非同步呼叫關係你也能搞定：

setImmediate(() => {
    console.log(1);
},0);
setTimeout(() => {
    console.log(2);
},0);
new Promise((resolve) => {
    console.log(3);
    resolve();
    console.log(4);
}).then(() => {
    console.log(5);
});
console.log(6);
process.nextTick(()=> {
    console.log(7);
});
console.log(8);
//輸出結果是3 4 6 8 7 5 2 1
複製程式碼

image-20181013163225154

終極測試

setTimeout(() => {
    console.log('to1');
    process.nextTick(() => {
        console.log('to1_nT');
    })
    new Promise((resolve) => {
        console.log('to1_p');
        setTimeout(() => {
          console.log('to1_p_to')
        })
        resolve();
    }).then(() => {
        console.log('to1_then')
    })
})

setImmediate(() => {
    console.log('imm1');
    process.nextTick(() => {
        console.log('imm1_nT');
    })
    new Promise((resolve) => {
        console.log('imm1_p');
        resolve();
    }).then(() => {
        console.log('imm1_then')
    })
})

process.nextTick(() => {
    console.log('nT1');
})
new Promise((resolve) => {
    console.log('p1');
    resolve();
}).then(() => {
    console.log('then1')
})

setTimeout(() => {
    console.log('to2');
    process.nextTick(() => {
        console.log('to2_nT');
    })
    new Promise((resolve) => {
        console.log('to2_p');
        resolve();
    }).then(() => {
        console.log('to2_then')
    })
})

process.nextTick(() => {
    console.log('nT2');
})

new Promise((resolve) => {
    console.log('p2');
    resolve();
}).then(() => {
    console.log('then2')
})

setImmediate(() => {
    console.log('imm2');
    process.nextTick(() => {
        console.log('imm2_nT');
    })
    new Promise((resolve) => {
        console.log('imm2_p');
        resolve();
    }).then(() => {
        console.log('imm2_then')
    })
})
// 輸出結果是：？
複製程式碼

大家可以在評論裡留言結果喲~

相關推薦

JavaScript 事件迴圈及非同步原理（完全指北）

引言 最近面試被問到，JS 既然是單執行緒的，為什麼可以執行非同步操作？ 當時腦子蒙了，思維一直被困在 單執行緒 這個問題上，一直在思考單執行緒為什麼可以額外執行任務，其實在我很早以前寫的部落格裡面有寫相關的內容，只不過時間太長給忘了，所以要經常溫習啊：（淺談 Generator 和 Promise

【譯】JavaScript的工作原理：事件迴圈及非同步程式設計的出現和 5 種更好的 async/await 程式設計方式

此篇是JavaScript的工作原理的第四篇，其它三篇可以看這裡： 【譯】JavaScript的工作原理：引擎，執行時和呼叫堆疊的概述 【譯】JavaScript的工作原理：V8引擎內部+關於如何編寫優化程式碼的5個技巧 【譯】JavaScript的工作原理：記憶體管理和4種常見的記憶體洩漏

MySQL優化指南（簡單指北）

當MySQL單表記錄數過大時，增刪改查效能都會急劇下降，所以我們本文會提供一些優化參考，大家可以參考以下步驟來優化： 一、單表優化 除非單表資料未來會一直不斷上漲，否則不要一開始就考慮拆分，拆分會帶來邏輯、部署、運維的各種複雜度。一般以整型值為主的表在千萬級以下，字串為主

Netty非同步非阻塞事件驅動及元件原理詳解

本文基於 Netty 4.1 展開介紹相關理論模型，使用場景，基本元件、整體架構，知其然且知其所以然，希望給大家在實際開發實踐、學習開源專案方面提供參考。 Netty 是一個非同步事件驅動的網路應用程式框架，用於快速開發可維護的高效能協議伺服器和客戶端。 JDK 原生 NIO 程式的問題

非同步 JavaScript - 事件迴圈

簡評：如果你對 JavaScript 非同步的原理感興趣，這裡有一篇不錯的介紹。 JavaScript 同步程式碼是如果工作的 在介紹 JavaScript 非同步執行之前先來了解一下， JavaScript 同步程式碼是如何執行的。 這裡有兩個概念需要了解： ** 執行上下文（Excuti

JavaScript是如何工作的：事件迴圈和非同步程式設計的崛起 + 5種使用 async/await 更好地編碼方式！

摘要： 深度理解JS事件迴圈！！！ 原文：JavaScript是如何工作的:事件迴圈和非同步程式設計的崛起+ 5種使用 async/await 更好地編碼方式！ 作者：前端小智 Fundebug經授權轉載，版權歸原作者所有。 此篇是 JavaScript是如何工作的第四篇，其它三篇可以看這

JavaScript之ES6中解構原理及注意事項（陣列和物件）

//ES6中的解構原理(常用型別)：   //陣列解構： //陣列的元素是按次序排列的，變數的取值由它的位置決定； let [a,b,c] = [1,2,3]; console.log(a,b,c) //結果為： 1,2,3;   //物件解構變數同名(

Javascript 事件迴圈（Event Loop)

規則：同一時間只有一個任務在執行，同時執行的過程不能被中途打斷事件佇列型別：macrotask queue 和microtask queue常見的macrotask 和 microtask 如下 ：macrotask queue : Mouse Event

理解JavaScript 執行機制及非同步回撥（setTimeout/setInterval/Promise）

對於javascript執行機制的理解一直都是混淆不清。在面試或工作的過程中，也經常會遇到程式碼執行順序或函式生命週期載入等類似的問題，這些多多少少都與javascript的執行機制相關。今天發現一篇很好的文章，欣喜之餘，加以轉載，供感興趣的小夥伴學習，感謝作者分享。 不論

Tomcat內部結構及請求原理（轉）

周期 成了 authent 代碼 部分 min 它的 war ace Tomcat Tomcat是一個JSP/Servlet容器。其作為Servlet容器，有三種工作模式：獨立的Servlet容器、進程內的Servlet容器和進程外的Servlet容器。 Tomcat的組織

sort()的用法，參數以及排序原理（轉載）

comment https params HA 排序函數 根據 字符 type ring sort() 方法用於對數組的元素進行排序,並返回數組。默認排序順序是根據字符串Unicode碼點。語法：arrayObject.sort(sortby)；參數sortby可選。規定排

spring 自定義事件發布及監聽（簡單實例）

講解 new 繼承 概念 接口 處理 啟動 lca 事件對象 前言： Spring的AppilcaitionContext能夠發布事件和註冊相對應的事件監聽器，因此，它有一套完整的事件發布和監聽機制。 流程分析： 在一個完整的事件體系中，除了事件和監聽器以外，還應該有3個概

JavaScript事件模型及事件代理

監聽器 abort rop char 方便 listener 新版 media 事件處理 事件模型　　JavaScript事件使得網頁具備互動和交互性，我們應該對其深入了解以便開發工作，在各式各樣的瀏覽器中，JavaScript事件模型主要分為3種：原始事件模型、DOM2事

JavaScript 詳解預編譯原理（和其他語言很不一樣）

JavaScript 預編譯原理 今天用了大量時間複習了作用域、預編譯等等知識 看了很多博文，翻開了以前看過的書（好像好多書都不會講預編譯） 發現當初覺得自己學的很明白，其實還是存在一些思維誤區 （很多博文具有誤導性） 今晚就整理了一下凌亂的思路 先整理一下預編譯的知識吧，日後有時間再把作用

JavaScript執行環境及作用域（一）——執行環境棧和作用域鏈機制

執行環境是JavaScript中最為重要的一個概念，每個執行環境都有一個與之關聯的變數物件，執行環境中所有的變數和函式都儲存在這個物件中。我們編寫的程式碼是無法訪問這個變數物件的，只有解析器在處理資料時會在後臺使用它，但有個例外，因為在Web瀏覽器中，全域性執行環境關聯的變數物件是window物件，windo

深度解析JavaScript事件迴圈--EventLoop

為什麼有事件迴圈？ JavaScript是單執行緒語言，所以會產生非同步。在執行任務的時候，先檢查事件佇列是否為空，不為空的話將任務放到執行棧執行，執行棧執行過後為空就會又回到事件佇列去判斷事件佇列是否為空，這樣就形成了事件迴圈的簡單機制。 **棧：先進後出 佇列：先進先出**

JavaScript執行環境及作用域（二）——延長作用域鏈

雖然執行環境的型別總共只有兩種——全域性和區域性（函式），但還是有辦法來延長作用域鏈的，這麼說是因為有些語句可以在作用域鏈的前端臨時增加一個變數物件，該變數物件會在程式碼執行後被移除。在兩種情況下會發生這種現象。具體來說，就是當執行流進入下列任何語句時，作用域鏈就會得到加長： try-catch語句的cat

JS-呼叫棧、事件迴圈、訊息佇列（也叫任務隊和回撥佇列）、作業佇列（微任務佇列）

一：呼叫棧是個什麼鬼東西，它具有棧的屬性--後進先出 先看一段簡單的JS程式碼： const second = function(){ console.log('hello there'); } const first = function() { console.log('hi,first'); secon

JavaScript製作元件特效及注意問題（個人整理筆記）

個人理解：所謂的動畫，就是利用定時器，把元素的屬性按某一規律變化的過程。 在函式內利用引數當css屬性時，style[attr] <==> style.arr，比如arr等於border。 注意問題 IE和其他瀏覽器的相容，IE的事件物件和其他瀏覽

Spring 事務事件監控及實現原理

來源：https://my.oschina.net/zhangxufeng/blog/1976076 前面我們講到了Spring在進行事務邏輯織入的時候，無論是事務開始，提交或者回滾，都會觸發相應的事務事件。本文首先會使用例項進行講解Spring事務事件是如何使用的，