摘要：瀏覽器中與中事件循環(huán)與執(zhí)行機制不同，不可混為一談。瀏覽器環(huán)境執(zhí)行為單線程不考慮，所有代碼皆在執(zhí)行線程調(diào)用棧完成執(zhí)行。參考文章強烈推薦不要混淆和瀏覽器中的強烈推薦中的模塊強烈推薦理解事件循環(huán)一淺析定時器詳解

在 node 11 版本中，node 下 Event Loop 已經(jīng)與瀏覽器趨于相同。
在 node 11 版本中，node 下 Event Loop 已經(jīng)與瀏覽器趨于相同。
在 node 11 版本中，node 下 Event Loop 已經(jīng)與瀏覽器趨于相同。

Event Loop也是js老生常談的一個話題了。2月底看了阮一峰老師的《Node定時器詳解》一文后，發(fā)現(xiàn)無法完全對標之前看過的js事件循環(huán)執(zhí)行機制，又查閱了一些其他資料，記為筆記，感覺不妥，總結(jié)成文。

瀏覽器中與node中事件循環(huán)與執(zhí)行機制不同，不可混為一談。
瀏覽器的Event loop是在HTML5中定義的規(guī)范，而node中則由libuv庫實現(xiàn)。同時閱讀《深入淺出nodeJs》一書時發(fā)現(xiàn)比較當時node機制已有不同，所以本文node部分針對為此文發(fā)布時版本。強烈推薦讀下參考鏈接中的前三篇。

js執(zhí)行為單線程（不考慮web worker），所有代碼皆在執(zhí)行線程調(diào)用棧完成執(zhí)行。當執(zhí)行線程任務(wù)清空后才會去輪詢?nèi)∪蝿?wù)隊列中任務(wù)。

異步任務(wù)分為task（宏任務(wù)，也可稱為macroTask）和microtask（微任務(wù)）兩類。
當滿足執(zhí)行條件時，task和microtask會被放入各自的隊列中等待放入執(zhí)行線程執(zhí)行，我們把這兩個隊列稱為Task Queue(也叫Macrotask Queue)和Microtask Queue。

task：script中代碼、setTimeout、setInterval、I/O、UI render。

microtask: promise、Object.observe、MutationObserver。

執(zhí)行完主執(zhí)行線程中的任務(wù)。

取出Microtask Queue中任務(wù)執(zhí)行直到清空。

取出Macrotask Queue中一個任務(wù)執(zhí)行。

取出Microtask Queue中任務(wù)執(zhí)行直到清空。

重復(fù)3和4。

即為同步完成，一個宏任務(wù)，所有微任務(wù)，一個宏任務(wù)，所有微任務(wù)......

在瀏覽器頁面中可以認為初始執(zhí)行線程中沒有代碼，每一個script標簽中的代碼是一個獨立的task，即會執(zhí)行完前面的script中創(chuàng)建的microtask再執(zhí)行后面的script中的同步代碼。

如果microtask一直被添加，則會繼續(xù)執(zhí)行microtask，“卡死”macrotask。

部分版本瀏覽器有執(zhí)行順序與上述不符的情況，可能是不符合標準或js與html部分標準沖突。可閱讀參考文章中第一篇。

new Promise((resolve, reject) =>{console.log(‘同步’);resolve()}).then(() => {console.log("異步")})，即promise的then和catch才是microtask，本身的內(nèi)部代碼不是。

個別瀏覽器獨有API未列出。

while (true) {
  宏任務(wù)隊列.shift()
  微任務(wù)隊列全部任務(wù)()
}

js執(zhí)行為單線程，所有代碼皆在執(zhí)行線程調(diào)用棧完成執(zhí)行。當執(zhí)行線程任務(wù)清空后才會去輪詢?nèi)∪蝿?wù)隊列中任務(wù)。

在node中事件每一輪循環(huán)按照順序分為6個階段，來自libuv的實現(xiàn)：

timers：執(zhí)行滿足條件的setTimeout、setInterval回調(diào)。

I/O callbacks：是否有已完成的I/O操作的回調(diào)函數(shù)，來自上一輪的poll殘留。

idle，prepare：可忽略

poll：等待還沒完成的I/O事件，會因timers和超時時間等結(jié)束等待。

check：執(zhí)行setImmediate的回調(diào)。

close callbacks：關(guān)閉所有的closing handles，一些onclose事件。

除上述循環(huán)階段中的任務(wù)類型，我們還剩下瀏覽器和node共有的microtask和node獨有的process.nextTick，我們稱之為Microtask Queue和NextTick Queue。

我們把循環(huán)中的幾個階段的執(zhí)行隊列也分別稱為Timers Queue、I/O Queue、Check Queue、Close Queue。

在進入第一次循環(huán)之前，會先進行如下操作：

同步任務(wù)

發(fā)出異步請求

規(guī)劃定時器生效的時間

執(zhí)行process.nextTick()

按照我們的循環(huán)的6個階段依次執(zhí)行，每次拿出當前階段中的全部任務(wù)執(zhí)行，清空NextTick Queue，清空Microtask Queue。再執(zhí)行下一階段，全部6個階段執(zhí)行完畢后，進入下輪循環(huán)。即：

清空當前循環(huán)內(nèi)的Timers Queue，清空NextTick Queue，清空Microtask Queue。

清空當前循環(huán)內(nèi)的I/O Queue，清空NextTick Queue，清空Microtask Queue。

清空當前循環(huán)內(nèi)的Check Queu，清空NextTick Queue，清空Microtask Queue。

清空當前循環(huán)內(nèi)的Close Queu，清空NextTick Queue，清空Microtask Queue。

進入下輪循環(huán)。

可以看出，nextTick優(yōu)先級比promise等microtask高。setTimeout和setInterval優(yōu)先級比setImmediate高。

如果在timers階段執(zhí)行時創(chuàng)建了setImmediate則會在此輪循環(huán)的check階段執(zhí)行，如果在timers階段創(chuàng)建了setTimeout，由于timers已取出完畢，則會進入下輪循環(huán)，check階段創(chuàng)建timers任務(wù)同理。

setTimeout優(yōu)先級比setImmediate高，但是由于setTimeout(fn,0)的真正延遲不可能完全為0秒，可能出現(xiàn)先創(chuàng)建的setTimeout(fn,0)而比setImmediate的回調(diào)后執(zhí)行的情況。

while (true) {
  loop.forEach((階段) => {
    階段全部任務(wù)()
    nextTick全部任務(wù)()
    microTask全部任務(wù)()
  })
  loop = loop.next
}

function sleep(time) {
  let startTime = new Date()
  while (new Date() - startTime < time) {}
  console.log("1s over")
}
setTimeout(() => {
  console.log("setTimeout - 1")
  setTimeout(() => {
      console.log("setTimeout - 1 - 1")
      sleep(1000)
  })
  new Promise(resolve => resolve()).then(() => {
      console.log("setTimeout - 1 - then")
      new Promise(resolve => resolve()).then(() => {
          console.log("setTimeout - 1 - then - then")
      })
  })
  sleep(1000)
})

setTimeout(() => {
  console.log("setTimeout - 2")
  setTimeout(() => {
      console.log("setTimeout - 2 - 1")
      sleep(1000)
  })
  new Promise(resolve => resolve()).then(() => {
      console.log("setTimeout - 2 - then")
      new Promise(resolve => resolve()).then(() => {
          console.log("setTimeout - 2 - then - then")
      })
  })
  sleep(1000)
})

瀏覽器輸出：

setTimeout - 1 //1為單個task
1s over
setTimeout - 1 - then
setTimeout - 1 - then - then 
setTimeout - 2 //2為單個task
1s over
setTimeout - 2 - then
setTimeout - 2 - then - then
setTimeout - 1 - 1
1s over
setTimeout - 2 - 1
1s over

node輸出：

setTimeout - 1 
1s over
setTimeout - 2 //1、2為單階段task
1s over
setTimeout - 1 - then
setTimeout - 2 - then
setTimeout - 1 - then - then
setTimeout - 2 - then - then
setTimeout - 1 - 1
1s over
setTimeout - 2 - 1
1s over

由此也可看出事件循環(huán)在瀏覽器和node中的不同。

Tasks, microtasks, queues and schedules 強烈推薦

不要混淆nodejs和瀏覽器中的event loop 強烈推薦

node中的Event模塊 強烈推薦

理解事件循環(huán)一(淺析)

Node 定時器詳解

???