【基礎篇】瀏覽器中的Event loop

alin 發布于2019-08-23 10:38 / 2961人閱讀

摘要：隊列分為兩種微任務，中稱為。以下這些行為屬于微任務宏任務，中稱為。因為宏任務匯中包括了，瀏覽器會先執行一個宏任務，接下來有異步代碼的話就先執行微任務。

在講Event loop之前，我們先思考一個問題

js為什么是單線程？

原因可能是如果js是多線程，在多個線程中處理DOM就可能會發生問題（一個線程添加新節點，另一個線程中刪除節點），當然可以引入讀寫鎖解決這個問題

好了，接下來我們開始講Event loop

簡單的說，就是js在執行的過程中會產生執行環境，這些執行環境會被順序的加入到執行棧中。如果遇到異步的代碼，會被掛起并加入到Task（有多種Task）隊列中。一旦執行棧為空，Event Loop就會從Task隊列中拿出需要執行的代碼并放入執行棧中執行，所以本質上來說，js中的異步行為還是同步的。

我們看下以下代碼，以下代碼輸出"1", "3", "2"

console.log("1");
setTimeout(()=>{
  console.log("2");
}, 0);
console.log("3");
//"1"
//"3"
//"2"

之前對setTimeout理解有偏差，雖然設置了為0，其實還是異步，是因為html5標準規定這個函數的第二個參數不得小于4ms，不足會自動增加。

Task隊列分為兩種

微任務microtask，es6中稱為jobs。以下這些行為屬于微任務

process.nextTick

promise

Object.observe

MutationObserver

宏任務macrotask，es6中稱為task。以下這些行為屬于宏任務

script

setTimeout

setInterval

setImmediate

I/O

UI rendering

誤區：很多人認為微任務快于宏任務，其實是錯誤的。因為宏任務匯中包括了script，瀏覽器會先執行一個宏任務，接下來有異步代碼的話就先執行微任務。

正確的一次Event loop順序應該是這樣的：

執行同步代碼（這屬于宏任務）

執行棧為空，查詢是否有微任務需要執行

執行所有微任務

必要的話渲染UI

開始下一輪Event loop，執行宏任務中的異步代碼

通過上述的Event loop順序可知，如果宏任務中的異步代碼有大量的計算并且需要操作DOM的話，為了更快的界面響應，我們可以把操作DOM放入微任務中。

GPU云服務器云服務器 Event Loop 基礎篇之基礎篇 java語言程序設計基礎篇

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

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

一篇文章教會你Event loop——瀏覽器和Node

摘要：如果沒到毫秒，那么階段就會跳過，進入階段，先執行的回調函數。參考文檔什么是瀏覽器的事件循環不要混淆和瀏覽器中的定時器詳解瀏覽器和不同的事件循環深入理解事件循環機制篇中的執行機制最近對Event loop比較感興趣，所以了解了一下。但是發現整個Event loop盡管有很多篇文章，但是沒有一篇可以看完就對它所有內容都了解的文章。大部分的文章都只闡述了瀏覽器或者Node二者之一，沒有對比...

Leck1e 2019-08-22 15:33 評論0 收藏0
『前端干貨篇』: 你不知道的Event Loop

摘要：任務隊列中的任務事件，一般有個共性就是存在回調函數。存放異步執行的代碼，如定時器事件監聽回調函數等，進入等待狀態。總結的事件輪詢的機制，使任務隊列主線程異步操作之間可以相互協作。從一道面試題說起 setTimeout(function() { console.log(111); }, 0); // 這里定時器時間設置為0ms后執行 console.log(222); 相信這...

mykurisu 2019-08-23 14:32 評論0 收藏0
JavaScript 異步編程

摘要：下面我將介紹的基本用法以及如何在異步編程中使用它們。在沒有發布之前，作為異步編程主力軍的回調函數一直被人詬病，其原因有太多比如回調地獄代碼執行順序難以追蹤后期因代碼變得十分復雜導致無法維護和更新等，而的出現在很大程度上改變了之前的窘境。前言自己著手準備寫這篇文章的初衷是覺得如果想要更深入的理解 JS，異步編程則是必須要跨過的一道坎。由于這里面涉及到的東西很多也很廣，在初學 JS 的...

lordharrd 2019-08-23 12:26 評論0 收藏0
【譯】node js event loop part 1.1

原文先說1.1總攬： Reactor模式 Reactor模式中的協調機制Event Loop Reactor模式中的事件分離器Event Demultiplexer 一些Event Demultiplexer處理不了的復雜I/O接口比如File I/O、DNS等復雜I/O的解決方案未完待續前言 nodejs和其他編程平臺的區別在于如何去處理I/O接口，我們聽一個人介紹nodejs，總是...

macg0406 2019-08-22 13:53 評論0 收藏0
筆試題之Event Loop終極篇

摘要：下面開始分析開頭的代碼第一輪事件循環流程整體作為第一個宏任務進入主線程，遇到，輸出遇到函數聲明，聲明暫時不用管遇到，其回調函數被分發到微任務中。我們記為遇到，其回調函數被分發到宏任務中。先上一道常見的筆試題 console.log(1); async function async1() { console.log(2); await async2(); con...

niceforbear 2019-08-23 18:09 評論0 收藏0