浏览器和Node不一样的事件循环（Event Loop）

注意

在 node 11 版本中，node 下 Event Loop 已经与浏览器趋于相同。
在 node 11 版本中，node 下 Event Loop 已经与浏览器趋于相同。
在 node 11 版本中，node 下 Event Loop 已经与浏览器趋于相同。

背景

Event Loop也是js老生常谈的一个话题了。2月底看了阮一峰老师的《Node定时器详解》一文后，发现没法彻底对标以前看过的js事件循环执行机制，又查阅了一些其余资料，记为笔记，感受不妥，总结成文。

浏览器中与node中事件循环与执行机制不一样，不可混为一谈。
浏览器的Event loop是在HTML5中定义的规范，而node中则由libuv库实现。同时阅读《深刻浅出nodeJs》一书时发现比较当时node机制已有不一样，因此本文node部分针对为此文发布时版本。强烈推荐读下参考连接中的前三篇。

浏览器环境

js执行为单线程（不考虑web worker），全部代码皆在执行线程调用栈完成执行。当执行线程任务清空后才会去轮询取任务队列中任务。

任务队列

异步任务分为task（宏任务，也可称为macroTask）和microtask（微任务）两类。
当知足执行条件时，task和microtask会被放入各自的队列中等待放入执行线程执行，咱们把这两个队列称为Task Queue(也叫Macrotask Queue)和Microtask Queue。

• task：script中代码、setTimeout、setInterval、I/O、UI render。
• microtask: promise、Object.observe、MutationObserver。

具体过程

1. 执行完主执行线程中的任务。
2. 取出Microtask Queue中任务执行直到清空。
3. 取出Macrotask Queue中一个任务执行。
4. 取出Microtask Queue中任务执行直到清空。
5. 重复3和4。

即为同步完成，一个宏任务，全部微任务，一个宏任务，全部微任务......

注意

• 在浏览器页面中能够认为初始执行线程中没有代码，每个script标签中的代码是一个独立的task，即会执行完前面的script中建立的microtask再执行后面的script中的同步代码。
• 若是microtask一直被添加，则会继续执行microtask，“卡死”macrotask。
• 部分版本浏览器有执行顺序与上述不符的状况，多是不符合标准或js与html部分标准冲突。可阅读参考文章中第一篇。
• new Promise((resolve, reject) =>{console.log(‘同步’);resolve()}).then(() => {console.log('异步')})，即promise的then和catch才是microtask，自己的内部代码不是。
• 个别浏览器独有API未列出。

伪代码

while (true) {
  宏任务队列.shift()
  微任务队列所有任务()
}

node环境

js执行为单线程，全部代码皆在执行线程调用栈完成执行。当执行线程任务清空后才会去轮询取任务队列中任务。

循环阶段

在node中事件每一轮循环按照顺序分为6个阶段，来自libuv的实现：

1. timers：执行知足条件的setTimeout、setInterval回调。
2. I/O callbacks：是否有已完成的I/O操做的回调函数，来自上一轮的poll残留。
3. idle，prepare：可忽略
4. poll：等待还没完成的I/O事件，会因timers和超时时间等结束等待。
5. check：执行setImmediate的回调。
6. close callbacks：关闭全部的closing handles，一些onclose事件。

执行机制

几个队列

除上述循环阶段中的任务类型，咱们还剩下浏览器和node共有的microtask和node独有的process.nextTick，咱们称之为Microtask Queue和NextTick Queue。

咱们把循环中的几个阶段的执行队列也分别称为Timers Queue、I/O Queue、Check Queue、Close Queue。

循环以前

在进入第一次循环以前，会先进行以下操做：

• 同步任务
• 发出异步请求
• 规划定时器生效的时间
• 执行process.nextTick()

开始循环

按照咱们的循环的6个阶段依次执行，每次拿出当前阶段中的所有任务执行，清空NextTick Queue，清空Microtask Queue。再执行下一阶段，所有6个阶段执行完毕后，进入下轮循环。即：

• 清空当前循环内的Timers Queue，清空NextTick Queue，清空Microtask Queue。
• 清空当前循环内的I/O Queue，清空NextTick Queue，清空Microtask Queue。
• 清空当前循环内的Check Queu，清空NextTick Queue，清空Microtask Queue。
• 清空当前循环内的Close Queu，清空NextTick Queue，清空Microtask Queue。
• 进入下轮循环。

能够看出，nextTick优先级比promise等microtask高。setTimeout和setInterval优先级比setImmediate高。

注意

• 若是在timers阶段执行时建立了setImmediate则会在此轮循环的check阶段执行，若是在timers阶段建立了setTimeout，因为timers已取出完毕，则会进入下轮循环，check阶段建立timers任务同理。
• setTimeout优先级比setImmediate高，可是因为setTimeout(fn,0)的真正延迟不可能彻底为0秒，可能出现先建立的setTimeout(fn,0)而比setImmediate的回调后执行的状况。

伪代码

while (true) {
  loop.forEach((阶段) => {
    阶段所有任务()
    nextTick所有任务()
    microTask所有任务()
  })
  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 //一、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

由此也可看出事件循环在浏览器和node中的不一样。

参考文章

• Tasks, microtasks, queues and schedules 强烈推荐
• 不要混淆nodejs和浏览器中的event loop 强烈推荐
• node中的Event模块 强烈推荐
• 理解事件循环一(浅析)
• Node 定时器详解

???