# ❓说说浏览器和 Node 事件循环的区别

差异主要是体现在 node V10 及其之前版本。

# 浏览器事件循环

执行完一个宏任务就会去清空相对应的微任务队列

// 浏览器执行
setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(function() {
    console.log('promise1')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(function() {
    console.log('promise2')
  })
}, 0)

// timer1
// promise1
// timer2
// promise2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Node V10 及以下版本

node V10 及以下版本执行,则是将同源的宏任务队列执行完毕后再去清空微任务队列

// node 环境
// v10.16.0
setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(function() {
    console.log('promise1')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(function() {
    console.log('promise2')
  })
}, 0)

// 先执行 两个setTimeout 之后再去执行微任务
// timer1
// timer2
// promise1
// promise2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# node V11 及其以上

node 版本更新到 11,Event Loop 运行原理发生了变化,一旦执行一个阶段里的一个宏任务(setTimeout,setInterval 和 setImmediate)就立刻执行微任务队列,这点就跟浏览器端一致。

// node 环境
// v11+
setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(function() {
    console.log('promise1')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(function() {
    console.log('promise2')
  })
}, 0)

// 与浏览器保持一直
// timer1
// promise1
// timer2
// promise2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

参考文章:

Node.js 事件循环,定时器和 process.nextTick()

浏览器与 Node 的事件循环(Event Loop)有何区别?