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

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

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

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

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

異步任務(wù)分為task（宏任務(wù)，也可稱為macroTask）和microtask（微任務(wù)）兩類。
當(dāng)滿足執(zhí)行條件時(shí)，task和microtask會被放入各自的隊(duì)列中等待放入執(zhí)行線程執(zhí)行，我們把這兩個(gè)隊(duì)列稱為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中一個(gè)任務(wù)執(zhí)行。

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

重復(fù)3和4。

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

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

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

部分版本瀏覽器有執(zhí)行順序與上述不符的情況，可能是不符合標(biāo)準(zhǔn)或js與html部分標(biāo)準(zhǔn)沖突?？砷喿x參考文章中第一篇。

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

個(gè)別瀏覽器獨(dú)有API未列出。

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

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

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

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

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

idle，prepare：可忽略

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

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

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

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

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

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

同步任務(wù)

發(fā)出異步請求

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

執(zhí)行process.nextTick()

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

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

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

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

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

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

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

如果在timers階段執(zhí)行時(shí)創(chuàng)建了setImmediate則會在此輪循環(huán)的check階段執(zhí)行，如果在timers階段創(chuàng)建了setTimeout，由于timers已取出完畢，則會進(jìn)入下輪循環(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為單個(gè)task
1s over
setTimeout - 1 - then
setTimeout - 1 - then - then 
setTimeout - 2 //2為單個(gè)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 強(qiáng)烈推薦

不要混淆nodejs和瀏覽器中的event loop 強(qiáng)烈推薦

node中的Event模塊 強(qiáng)烈推薦

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

Node 定時(shí)器詳解

???