巨集觀事件和微觀事件

首先js執行過程中是從上往下執行，有同步和非同步執行之分；執行中是有分為塊的在這些內容中將會分為巨集觀和微觀任務我們可以將整個js看做乙個大的巨集觀任務執行時會從上往下執行如果執行的話會先執行同步的同步執行之後將執行巨集觀和微觀任務首先 settimeout setinterval 是兩個大的巨集觀任務所以會放在佇列的最後乙個函式整體來看是同步執行的只是在執行過程的內部是非同步執行的

就像是乙個promise 執行時會先執行【外層巨集觀事件2】然後再執行微觀事件

settimeout((
)=>,0
) console.
log(
'外層巨集事件1');
newpromise
((resolve)
=>).
then((
)=>).
then((
)=>
) console.
log(
'外層巨集事件3'
);

我們來分析一下哈

這是一段js** 首先第一步我們看見settimeout要把它放到最後

第二步往下看，

看到了console.log(『外層巨集事件1』);這個是同步執行的，因為不在函式內，也沒有settimeout包裹，所以會直接列印外層巨集事件1

繼續走看到promise 首先它整體是乙個同步執行的函式所以直接走console.log(『外層巨集事件2』);

列印出的結果就是外層巨集事件2；緊接著resolve()，就是呼叫成功的函式了也就是then()的函式，這也就是微觀事件了，所以還會往下找那些同步執行的就找到了外層巨集事件3

所有執行一遍之後會執行那些被放到佇列後邊的一些巨集觀事件

所以就到了內層巨集事件3

所以最終就是

外層巨集事件1

外層巨集事件2

外層巨集事件3

微事件1

微事件2

內層巨集事件3

下面乙個例子

//主線程直接執行
console.
log(
'1')
;//丟到巨集事件佇列中
settimeout
(function()
)new
promise
(function
(resolve)).
then
(function()
)})//微事件1
process.
nexttick
(function()
)//主線程直接執行
newpromise
(function
(resolve)).
then
(function()
)//丟到巨集事件佇列中
settimeout
(function()
)new
promise
(function
(resolve)).
then
(function()
)})

• 首先瀏覽器執行js進入第乙個巨集任務進入主線程, 直接列印console.log(『1』)

• 遇到 settimeout 分發到巨集任務event queue中

• 遇到 process.nexttick 丟到微任務event queue中

• 遇到 promise， new promise 直接執行輸出 console.log(『7』);

• 執行then 被分發到微任務event queue中

•第一輪巨集任務執行結束，開始執行微任務列印 6,8

•第一輪微任務執行完畢，執行第二輪巨集事件，執行settimeout

•先執行主線程巨集任務，在執行微任務，列印』2,4,3,5』

•在執行第二個settimeout,同理列印『9,11,10,12』

•整段**，共進行了三次事件迴圈，完整的輸出為1，7，6，8，2，4，3，5，9，11，10，12。

以上是在瀏覽器環境下執行的資料，只作為巨集任務和微任務的分析，我在node環境下測試列印出來的順序為：1，7，6，8，2，4，9，11，3，10，5，12。node環境執行結果和瀏覽器執行結果不一致的原因是：瀏覽器的event loop是在html5中定義的規範，而node中則由libuv庫實現。libuv庫流程大體分為6個階段：timers，i/o callbacks，idle、prepare，poll，check，close callbacks，和瀏覽器的microtask，macrotask那一套有區別。

參考文件

感謝

巨集觀事件和微觀事件

Http巨集觀執行流程和微觀結構

多執行緒的巨集觀和微觀視角

C 的巨集觀與微觀

巨集觀事件和微觀事件

Http巨集觀執行流程和微觀結構

多執行緒的巨集觀和微觀視角

C 的巨集觀與微觀

相關推薦