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