資訊專欄INFORMATION COLUMN
摘要：前段時間我對于瀏覽器中的和哪個先執行有所困惑，苦于搜索也沒有發現很明確的答案，于是決定深入探索瀏覽器，現有所愚見，想與大家分享，希望能幫助到那些還在爬坑的人。瀏覽器端中的異步隊列有兩種隊列和隊列。瀏覽器會不斷從隊列中按順序取執行。
前段時間我對于瀏覽器Event loop中的MacroTask和MicroTask哪個先執行有所困惑，苦于搜索也沒有發現很明確的答案，于是決定深入探索瀏覽器Event loop，現有所愚見，想與大家分享，希望能幫助到那些還在爬坑的人。
1.什么是Event loop？
developer.mozilla.org給出的解釋是這樣的：
一個 JavaScript 運行時包含了一個待處理的消息隊列。每一個消息都關聯著一個用以處理這個消息的函數。
在事件循環期間的某個時刻，運行時從最先進入隊列的消息開始處理隊列中的消息。
大致可以理解為Event loop用來處理JavaScript事件執行的先后順序。瀏覽器端Event loop中的異步隊列有兩種：MacroTask隊列和 MicroTask隊列。它們分別包括：
2.關于MacroTask和MicroTask。
MicroTask： process.nextTick ，promise ，MutationObserver，其中 process.nextTick 為 Node 獨有。 MacroTask： script（整體代碼），setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。
瀏覽器會不斷從task隊列中按順序取task執行。
大體情況如下：
每執行完一個Macrotask都會檢查microtask隊列是否為空，如果不為空則會一次性執行完所有microtask。
3.同步事件和異步事件怎么處理？
一開始執行?？?micro 隊列空，macro 隊列里有且只有一個 script 腳本（整體代碼）。然后全局上下文（script 標簽）被推入執行棧，同步代碼執行。在執行的過程中，會判斷是同步任務還是異步任務，通過對一些接口的調用，可以產生新的 macro-task 與 micro-task，它們會分別被推入各自的任務隊列里。同步代碼執行完了，script 腳本會被移出 macro 隊列，這個過程本質上是隊列的 macro-task 的執行和出隊的過程。需要注意的是：當 macro-task 出隊時，任務是一個一個執行的；而 micro-task 出隊時，任務是一隊一隊執行的。因此，我們處理 micro 隊列這一步，會逐個執行隊列中的任務并把它出隊，直到隊列被清空。
也就是說循環是這樣一個過程：
先執行宏任務,然后查看是否有微任務隊列。如果有，先執行微任務隊列中的所有任務，如果沒有，會讀取宏任務隊列中排在最前的任務，執行宏任務的過程中，遇到微任務，依次加入微任務隊列。?？蘸螅俅巫x取微任務隊列里的任務。
4：總結
一句話：
對于瀏覽器Event loop來說，由于script（整體代碼）先執行，所以說MacroTask先于MicroTask執行。
參考文章:
瀏覽器與Node的事件循環(Event Loop)有何區別?
一篇文章教會你Event loop
什么是瀏覽器的事件循環
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103928.html
摘要：對于通常的特別是那些具備并行計算多線程背景知識的來講，的異步處理著實稱得上詭異。而這個詭異從結果上講，是由的單線程這個特性所導致的。的特性之一是單線程，也即是從頭到尾，都在同一根線程下運行。而這兩者的不同，便在于單線程和多線程上。 對于通常的developer（特別是那些具備并行計算/多線程背景知識的developer）來講，js的異步處理著實稱得上詭異。而這個詭異從結果上講，是由js...
摘要：回顧上一次參加還是年。年的還是真正的，年的會議早已經把英文全稱去掉，改稱全球大前端技術大會。同時與產品協作從產品設計方面突出關注點，做產品設計方面的優化，如站新版改造減少頁面元素，將播放器窗口直接顯示在第一屏。 回顧 上一次參加 GMTC 還是 2017 年。那時的我還是剛剛參加工作并在試用期辭職的菜鳥。 2017 年的 GMTC 還是真正的 Global Mobile Tech Co...
摘要：階段有兩個主要功能也會執行時間定時器到達期望時間的回調函數執行事件循環列表里的函數當進入階段并且沒有其余的定時器，那么如果事件循環列表不為空，則迭代同步的執行隊列中的函數。如果沒有，則等待回調函數進入隊列并立即執行。 Event Loop 本文以 Node.js 為例，講解 Event Loop 在 Node.js 的實現，原文，JavaScript 中的實現大同小異。 什么是 Eve...
摘要：瀏覽器與的異同，以及部分機制有人對部分迷惑，本身構造函數是同步的，是異步。瀏覽器的的已全部分析完成，過程中引用阮一峰博客，知乎，部分文章內容，侵刪。 瀏覽器與NodeJS的EventLoop異同，以及部分機制 PS：有人對promise部分迷惑，Promise本身構造函數是同步的，.then是異步。---- 2018/7/6 22：35修改 javascript 是一門單線程的腳本...
閱讀 2028·2023-04-26 01:33
閱讀 1660·2023-04-26 00:52
閱讀 1035·2021-11-18 13:14
閱讀 5394·2021-09-26 10:18
閱讀 2901·2021-09-22 15:52
閱讀 1488·2019-08-29 17:15
閱讀 3017·2019-08-29 16:11
閱讀 1039·2019-08-29 16:11
