js--事件迴圈機制

丶Serendipity丶發表於2022-03-30
JS事件

前言

　　我們知道JavaScript 是單執行緒的程式語言，只能同一時間內做一件事，按順序來處理事件，但是在遇到非同步事件的時候，js執行緒並沒有阻塞，還會繼續執行，這又是為什麼呢？本文來總結一下js 的事件迴圈機制。

正文

　　1、JavaScript是單執行緒的

　　JavaScript 是一種單執行緒的程式語言，只有一個呼叫棧，決定了它在同一時間只能做一件事。在程式碼執行的時候，通過將不同函式的執行上下文壓入執行棧中來保證程式碼的有序執行。在執行同步程式碼的時候，如果遇到了非同步事件，js 引擎並不會一直等待其返回結果，而是會將這個事件掛起，繼續執行執行棧中的其他任務。因此JS又是一個非阻塞、非同步、併發式的程式語言。

 　　2、同步和非同步

　　同步和非同步的關係就類似於我們在餐廳排隊吃飯的時候，每個人必須挨個的排隊來進行買飯這個操作，而在這個過程中十分無聊，這時候我們可以邊排著隊邊玩下手機，不需多久就排到了我們買飯。這個排隊過程就是JS中的一個同步操作，玩手機就像一個非同步操作。同步和非同步的差別就在於排隊買飯和玩手機這兩個任務的執行順序的不同。

 　　同步： 指的是在主執行緒上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務。可以理解為在執行完一個函式或方法之後，一直等待系統返回值或訊息，這時程式是處於阻塞的，只有接收到返回的值或訊息後才往下執行其他的命令。

　　非同步： 指的是不進入主執行緒，某個非同步任務可以執行了，該任務才會進入主執行緒執行。執行完函式或方法後，不必阻塞性地等待返回值或訊息，只需要向系統委託一個非同步過程，那麼當系統接收到返回值或訊息時，系統會自動觸發委託的非同步過程，從而完成一個完整的流程。

console.log(1);
setTimeout(() => {
  console.log(2);
}, 0);
setTimeout(() => {
  console.log(3);
}, 0);
setTimeout(() => {
  console.log(4);
}, 0);
console.log(5);
　　上面的程式碼會列印  1 》 5 》 2 》 3 》4，為什麼會產生這樣的結果，我們來看下事件迴圈。

 　　3、事件迴圈

　　事件迴圈過程可以簡單描述為：

　　a、函式入棧，當 Stack 中執行到非同步任務的時候，就將他丟給 WebAPIs ,接著執行同步任務,直到 Stack 為空;

　　b、在此期間 WebAPIs 完成這個事件，把回撥函式放入 CallbackQueue (任務佇列)中等待;

　　c、當執行棧為空時，Event Loop 把 Callback Queue中的一個任務放入Stack中,回到第1步。

　　事件迴圈（Event Loop） 是讓 JavaScript 做到既是單執行緒，又絕對不會阻塞的核心機制，也是 JavaScript 併發模型（Concurrency Model）的基礎，是用來協調各種事件、使用者互動、指令碼執行、UI 渲染、網路請求等的一種機制。在執行和協調各種任務時，Event Loop 會維護自己的事件佇列。

　　事件佇列是一個儲存著待執行任務的佇列，其中的任務嚴格按照時間先後順序執行，排在隊頭的任務將會率先執行，而排在隊尾的任務會最後執行。事件佇列每次僅執行一個任務，在該任務執行完畢之後，再執行下一個任務,一個任務開始後直至結束，不會被其他任務中斷。執行棧則是一個類似於函式呼叫棧的執行容器，當執行棧為空時，JS 引擎便檢查事件佇列，如果不為空的話，事件佇列便將第一個任務壓入執行棧中執行。

　　任務佇列：在JavaScript中，非同步任務被分為兩種，一種巨集任務（MacroTask）也叫Task，一種叫微任務：

　　巨集任務的例子很多，包括建立主文件物件、解析HTML、執行主線（或全域性）JavaScript程式碼，更改當前URL以及各種事件，如頁面載入、輸入、網路事件和定時器事件。從瀏覽器的角度來看，巨集任務代表一個個離散的、獨立工作單元。執行完任務後，瀏覽器可以繼續其他排程，如重新渲染頁面的UI或執行垃圾回收。

　　而微任務是更小的任務。微任務更新應用程式的狀態，但必須在瀏覽器任務繼續執行其他任務之前執行，瀏覽器任務包括重新渲染頁面的UI。微任務的案例包括promise回撥函式、DOM發生變化等。微任務需要儘可能快地、通過非同步方式執行，同時不能產生全新的微任務。微任務使得我們能夠在重新渲染UI之前執行指定的行為，避免不必要的UI重繪，UI重繪會使應用程式的狀態不連續。

　　噹噹前執行棧中的事件執行完畢後，js 引擎首先會判斷微任務對列中是否有任務可以執行，如果有就將微任務隊首的事件壓入棧中執行。當微任務對列中的任務都執行完成後再去判斷巨集任務對列中的任務。每次巨集任務執行完畢，都會去判斷微任務佇列是否產生新任務，若存在就優先執行微任務，否則按序執行巨集任務。

　　事件迴圈通常至少需要兩個任務佇列：巨集任務佇列和微任務佇列。兩種佇列在同一時刻都只執行一個任務。

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");

　　按照上面的內容，分析執行步驟：

　　1、巨集任務：執行整體程式碼（相當於<script>中的程式碼）：

　　　　輸出: script start

　　　　遇到 setTimeout，加入巨集任務佇列，當前巨集任務佇列(setTimeout)

　　　　遇到 promise，加入微任務，當前微任務佇列(promise1)

　　　　輸出：script end

　　2、微任務：執行微任務佇列（promise1）

　　　　輸出：promise1，then 之後產生一個微任務，加入微任務佇列，當前微任務佇列（promise2）

　　　　執行 then，輸出promise2

　　　　執行渲染操作，更新介面。

　　　　巨集任務：執行 setTimeout

　　　　輸出：setTimeout

　　注意：new Promise(..)中的程式碼，也是同步程式碼，會立即執行。只有then之後的程式碼，才是非同步執行的程式碼，是一個微任務。

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");

 　　步驟解析：

 　　當前任務佇列：微任務: [], 巨集任務：[<script>]

 　　巨集任務：

　　　　輸出: script start

　　　　遇到 timeout1，加入巨集任務

　　　　遇到 Promise，輸出promise1，直接 resolve，將 then 加入微任務，遇到 timeout2，加入巨集任務。

　　　　輸出script end

　　巨集任務第一個執行結束

　　當前任務佇列：微任務[then1]，巨集任務[timeou1, timeout2]

　　微任務：

　　　　執行 then1，輸出then1

　　微任務佇列清空

　　當前任務佇列：微任務[]，巨集任務[timeou1, timeout2]

　　巨集任務：

 　　　　輸出timeout1

　　　　輸出timeout2

　　當前任務佇列：微任務[]，巨集任務[timeou2]

　　微任務：

　　　　為空跳過

　　當前任務佇列：微任務[]，巨集任務[timeou2]

　　巨集任務：

　　　　輸出timeout2

　　注意：async 和 await 其實就是 Generator 和 Promise 的語法糖。async 函式和普通 函式沒有什麼不同，他只是表示這個函式裡有非同步操作的方法，並返回一個 Promise 物件

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
// Promise 寫法
async function async1() {
  console.log("async1 start");
  Promise.resolve(async2()).then(() => console.log("async1 end"));
}

　　下面例子：

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
async1();
setTimeout(() => {
  console.log("timeout");
}, 0);
new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("promise2");
});
console.log("script end");

 　　步驟解析：

　　當前任務佇列：巨集任務：[<script>]，微任務: []

　　巨集任務：

 　　　　輸出：async1 start

　　　　遇到 async2，輸出：async2，並將 then（async1 end）加入微任務

　　　　遇到 setTimeout，加入巨集任務。

　　　　遇到 Promise，輸出：promise1，直接 resolve，將 then(promise2)加入微任務

　　　　輸出：script end

　　當前任務佇列：微任務[promise2, async1 end]，巨集任務[timeout]

　　微任務：

　　　　輸出：promise2

　　　　promise2 出隊

　　　　輸出：async1 end

　　　　async1 end 出隊

　　　　微任務佇列清空

　　當前任務佇列：微任務[]，巨集任務[timeout]

　　巨集任務：

　　　　輸出：timeout

　　　　timeout 出隊，巨集任務清空

寫在最後

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。

相關文章