Javascript event loop

reclay 發布于2019-08-23 16:47 / 1974人閱讀

摘要：包括了操作例如事件綁定，這類操作。每個結束后，都會進行也就是檢查是否有在等待執行，根據先進先出，依次執行。簡單來說，會檢查是否有需要處理的，如果為空時，則會按照先進先出的順序來處理中的。

眾所周知， javascript是一個單線程語言。單線程也就意味著只有一個stack（調用棧），一次只能做一件事。那么又是如何實現異步操作？先來了解幾個關鍵的術語。

Call Stack 調用棧

如圖所示，在運行過程中，所有相關的變量是存于heap中，而call stack中是正在執行的代碼。通過F12 developer tool 在debug模式也可以看到此時的call stack情況。下圖是最簡單的一種情況，函數根據調用順序依次進入call stack，執行后再依次彈出（stack后進先出）。

Task Queue

那么JavaScript是怎么實現異步的呢？重要的task queue（任務隊列）來了。
一般而言，我們所理解的異步操作，都是放入task queue進行等待。如下代碼所示，console.log("start")進入call stack。而setTimeout是進入task queue進行等待。這里設置的時間為0，則是立即放入task queue，?? 是放入task queue而不是立即執行。
只有在call stack為空的時候，event loop會講task queue中的任務調入call stack再執行。

console.log("start");

setTimeout(()=>{
    console.log("hey")
}
, 0)

console.log("end");

輸出結果：

start
end
hey

Macrotask

一般而言，macrotask queue就是我們常說的task queue（也有人稱為message queue）。Macrotask包括了setTimeout, Dom 操作（例如onLoad), click/mouse事件綁定，fetch response這類操作。實際上這些都是瀏覽器提供的API，所以在執行時是有它們多帶帶的線程去進行操作。舉個例子，setTimeout()設置了2s的延遲，是瀏覽器設置了timer來計時，是另外的線程在等待2秒，js主線程不受影響，2s后回調函數再進入task queue。

(function() {

  console.log("this is the start");

  setTimeout(function cb() {
    console.log("this is a msg from call back");
  });

  console.log("this is just a message");

  setTimeout(function cb1() {
    console.log("this is a msg from call back1");
  }, 0);

  console.log("this is the end");

})();

// "this is the start"
// "this is just a message"
// "this is the end"
// undefined (注意此時是函數返回，因為沒有設置返回值故輸出undefined) 
// "this is a msg from call back"
// "this is a msg from call back1"

Microtask

ES6提供了Promise來進行異步操作。為了區別開task稱為microtask。同上也有一個queue （job queue）來處理microtask。job queue擁有更高的優先級。每個task結束后，都會進行perform a microtask checkpoint.也就是檢查job queue是否有microtask在等待執行，根據先進先出，依次執行。

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});


// script start
// promise1
// promise2
// setTimeout

Event loop

簡單來說，event loop會檢查queue是否有需要處理的task，如果call stack為空時，則會按照先進先出的順序來處理queue中的task。而task分為microtask【Promise】和macrotask【setTimeout/DOM events/fetch】。優先處理microtask。一次event loop只會處理一次macrotask，并且是當microtask queue都處理結束后才會去處理macrotasks。

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

強烈推薦大家去看 https://jakearchibald.com/201... 作者用動畫的形式非常形象清晰地描述了過程。

參考文章

The JavaScript Event Loop

JavaScript Event Loop Explained

EventLoop | MDN

Tasks, microtasks, queues and schedules

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103290.html

JavaScript 事件循環（譯文JavaScript Event Loop）

摘要：事件循環了解了在引擎中是如何工作了之后，來看下如何使用異步回調函數來避免代碼。從回調函數被放入后秒鐘，把移到中。由于事件循環持續地監測調用棧是否已空，此時它一注意到調用棧空了，就調用并創建一個新的調用棧。聽多了JavaScript單線程，異步，V8，便會很想去知道JavaScript是如何利用單線程來實現所謂的異步的。我參考了一些文章，了解到一個很重要的詞匯：事件循環(Event L...

K_B_Z 2019-08-20 10:46 評論0 收藏0
Javascript 運行機制詳解，Event Loop

摘要：主線程在任務隊列中讀取事件，這個過程是循環不斷地，所以這種運行機制叫做事件循環是在執行棧同步代碼結束之后，下一次任務隊列執行之前。單線程 javascript為什么是單線程語言，原因在于如果是多線程，當一個線程對DOM節點做添加內容操作的時候，另一個線程要刪除這個DOM節點，這個時候，瀏覽器應該怎么選擇，這就造成了混亂，為了解決這類問題，在一開始的時候，javascript就采用單線...

Jingbin_ 2019-08-23 10:39 評論0 收藏0
初窺JavaScript事件機制的實現（一）—— Node.js事件驅動實現概覽

摘要：如果當前沒有事件也沒有定時器事件，則返回。相關資料關于的架構及設計思路的事件討論了使用線程池異步運行代碼。下一篇初窺事件機制的實現二中定時器的實現在瀏覽器中，事件作為一個極為重要的機制，給予JavaScript響應用戶操作與DOM變化的能力；在Node.js中，事件驅動模型則是其高并發能力的基礎。學習JavaScript也需要了解它的運行平臺，為了更好的理解JavaScript的事...

lavor 2019-08-21 10:33 評論0 收藏0
瀏覽器與NodeJS的EventLoop異同，以及部分機制。

摘要：瀏覽器與的異同，以及部分機制有人對部分迷惑，本身構造函數是同步的，是異步。瀏覽器的的已全部分析完成，過程中引用阮一峰博客，知乎，部分文章內容，侵刪。瀏覽器與NodeJS的EventLoop異同，以及部分機制 PS：有人對promise部分迷惑，Promise本身構造函數是同步的，.then是異步。---- 2018/7/6 22：35修改 javascript 是一門單線程的腳本...

jubincn 2019-08-22 18:32 評論0 收藏0