# ❓说说浏览器和 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
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
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
参考文章: