什么是事件循环

在理解事件循环前，须要一些无关 JS 个性的前置常识。

JS 引擎是单线程的，直白来说就是一个工夫点下 JS 引擎只能去做一件事件，而 Java 这种多线程语言，能够同时做几件事件。

JS 做的工作分为同步和异步两种，所谓 “ 异步 ”，简略说就是一个工作不是间断实现的，先执行第一段，等做好了筹备，再回过头执行第二段，第二段也被叫做回调；同步则是连贯实现的。

像读取文件、网络申请这种工作属于异步工作：破费工夫很长，但两头的操作不须要 JS 引擎本人实现，它只用等他人筹备好了，把数据给他，他再继续执行回调局部。

如果没有非凡解决，JS 引擎在执行异步工作时，应该是存在期待的，不去做任何其余事件。用一个图来展现这个过程，能够看出，在执行异步工作时有大量的闲暇工夫被节约。

实际上这是大多数多线程语言的解决方法。但对于 JS 这种单线程语言来说，这种长时间的闲暇期待是不可承受的：遇到其余紧急任务，Java 能够再开一个线程去解决，JS 却只能忙等。

所以采取了以下的“异步工作回调告诉”模式：

在期待异步工作筹备的同时，JS 引擎去执行其余同步工作，等到异步工作筹备好了，再去执行回调。这种模式的劣势不言而喻，实现雷同的工作，破费的工夫大大减少，这种形式也被叫做非阻塞式。

而实现这个“告诉”的，正是事件循环，把异步工作的回调局部交给事件循环，等机会适合交还给 JS 线程执行。事件循环并不是 JavaScript 独创的，它是计算机的一种运行机制。

事件循环是由一个队列组成的，异步工作的回调遵循先进先出，在 JS 引擎闲暇时会一轮一轮地被取出，所以被叫做循环。

依据队列中工作的不同，分为宏工作和微工作。

宏工作和微工作

事件循环由宏工作和在执行宏工作期间产生的所有微工作组成。实现当下的宏工作后，会立即执行所有在此期间入队的微工作。

这种设计是为了给紧急任务一个插队的机会，否则新入队的工作永远被放在队尾。辨别了微工作和宏工作后，本轮循环中的微工作实际上就是在插队，这样微工作中所做的状态批改，在下一轮事件循环中也能失去同步。

常见的宏工作有：script（整体代码）/setTimout/setInterval/setImmediate(node 独有)/requestAnimationFrame(浏览器独有)/IO/UI render（浏览器独有）

常见的微工作有：process.nextTick(node 独有)/Promise.then()/Object.observe/MutationObserver

宏工作 setTimeout 的误区

setTimeout 的回调不肯定在指定工夫后能执行。而是在指定工夫后，将回调函数放入事件循环的队列中。

如果工夫到了，JS 引擎还在执行同步工作，这个回调函数须要期待；如果以后事件循环的队列里还有其余回调，须要等其余回调执行完。

另外，setTimeout 0ms 也不是立即执行，它有一个默认最小工夫，为 4ms。

所以上面这段代码的输入后果不肯定：

// node
setTimeout(() => {console.log('setTimeout')
}, 0)
setImmediate(() => {console.log('setImmediate')
})

因为取出第一个宏工作之前在执行全局 Script，如果这个工夫大于 4ms，这时 setTimeout 的回调函数曾经放入队列，就先执行 setTimeout；如果筹备工夫小于 4ms，就会先执行 setImmediate。

浏览器的事件循环

浏览器的事件循环由一个宏工作队列 + 多个微工作队列组成。

首先，执行第一个宏工作：全局 Script 脚本。产生的的宏工作和微工作进入各自的队列中。执行完 Script 后，把以后的微工作队列清空。实现一次事件循环。

接着再取出一个宏工作，同样把在此期间产生的回调入队。再把以后的微工作队列清空。以此往返。

宏工作队列只有一个，而每一个宏工作都有一个本人的微工作队列，每轮循环都是由一个宏工作 + 多个微工作组成。

上面的 Demo 展现了微工作的插队过程：

Promise.resolve().then(()=>{console.log('第一个回调函数：微工作 1')  
  setTimeout(()=>{console.log('第三个回调函数：宏工作 2')
  },0)
})
setTimeout(()=>{console.log('第二个回调函数：宏工作 1')
  Promise.resolve().then(()=>{console.log('第四个回调函数：微工作 2')   
  })
},0)
// 第一个回调函数：微工作 1
// 第二个回调函数：宏工作 1
// 第四个回调函数：微工作 2
// 第三个回调函数：宏工作 2 

打印的后果不是从 1 到 4，而是先执行第四个回调函数，再执行第三个，因为它是一个微工作，比第三个回调函数有更高优先级。

Node 的事件循环

node 的事件循环比浏览器简单很多。由 6 个宏工作队列 + 6 个微工作队列组成。

宏工作依照优先级从高到低顺次是：

其执行法则是：在一个宏工作队列全副执行结束后，去清空一次微工作队列，而后到下一个等级的宏工作队列，以此往返。一个宏工作队列搭配一个微工作队列。

六个等级的宏工作全副执行实现，才是一轮循环。

其中须要关注的是：Timers、Poll、Check 阶段，因为咱们所写的代码大多属于这三个阶段。

1. Timers：定时器 setTimeout/setInterval；
2. Poll：获取新的 I/O 事件, 例如操作读取文件等；
3. Check：setImmediate 回调函数在这里执行；

除此之外，node 端微工作也有优先级先后：

1. process.nextTick;
2. promise.then 等;

清空微工作队列时，会先执行 process.nextTick，而后才是微工作队列中的其余。

上面这段代码能够佐证浏览器和 node 的差别：

console.log('Script 开始')
setTimeout(() => {console.log('第一个回调函数，宏工作 1')
  Promise.resolve().then(function() {console.log('第四个回调函数，微工作 2')
  })
}, 0)
setTimeout(() => {console.log('第二个回调函数，宏工作 2')
  Promise.resolve().then(function() {console.log('第五个回调函数，微工作 3')
  })
}, 0)
Promise.resolve().then(function() {console.log('第三个回调函数，微工作 1')
})
console.log('Script 完结')

node 端：Script 开始
Script 完结
第三个回调函数，微工作 1
第一个回调函数，宏工作 1
第二个回调函数，宏工作 2
第四个回调函数，微工作 2
第五个回调函数，微工作 3

浏览器
Script 开始
Script 完结
第三个回调函数，微工作 1
第一个回调函数，宏工作 1
第四个回调函数，微工作 2
第二个回调函数，宏工作 2
第五个回调函数，微工作 3 

能够看出，在 node 端要等以后等级的所有宏工作实现，能力轮到微工作：第四个回调函数，微工作 2 在两个 setTimeout 实现后才打印。

因为浏览器执行时是一个宏工作 + 一个微工作队列，而 node 是一整个宏工作队列 + 一个微工作队列。

node11.x 前后版本差别

node11.x 之前，其事件循环的规定就如上文所述：先取出完一整个宏工作队列中全副工作，而后执行一个微工作队列。

但在 11.x 之后，node 端的事件循环变得和浏览器相似：先执行一个宏工作，而后是一个微工作队列。但仍然保留了宏工作队列和微工作队列的优先级。

能够用上面的 Demo 佐证：

console.log('Script 开始')
setTimeout(() => {console.log('宏工作 1（setTimeout)')
  Promise.resolve().then(() => {console.log('微工作 promise2')
  })
}, 0)
setImmediate(() => {console.log('宏工作 2')
})
setTimeout(() => {console.log('宏工作 3（setTimeout)')
}, 0)
console.log('Script 完结')
Promise.resolve().then(() => {console.log('微工作 promise1')
})
process.nextTick(() => {console.log('微工作 nextTick')
})

在 node11.x 之前运行：

Script 开始
Script 完结
微工作 nextTick
微工作 promise1
宏工作 1（setTimeout)
宏工作 3（setTimeout)
微工作 promise2
宏工作 2（setImmediate)

在 node11.x 之后运行：

Script 开始
Script 完结
微工作 nextTick
微工作 promise1
宏工作 1（setTimeout)
微工作 promise2
宏工作 3（setTimeout)
宏工作 2（setImmediate)

能够发现，在不同的 node 环境下：

1. 微工作队列中 process.nextTick 都有更高优先级，即便它后进入微工作队列，也会先打印 微工作 nextTick再 微工作 promise1;
2. 宏工作 setTimeout 比 setImmediate 优先级更高，宏工作 2(setImmediate)是三个宏工作中最初打印的；
3. 在 node11.x 之前，微工作队列要等以后优先级的所有宏工作先执行完，在两个 setTimeout 之后才打印 微工作 promise2；在 node11.x 之后，微工作队列只用等以后这一个宏工作先执行完。

结语

事件循环中的工作被分为宏工作和微工作，是为了给高优先级工作一个插队的机会：微工作比宏工作有更高优先级。

node 端的事件循环比浏览器更简单，它的宏工作分为六个优先级，微工作分为两个优先级。node 端的执行法则是一个宏工作队列搭配一个微工作队列，而浏览器是一个独自的宏工作搭配一个微工作队列。然而在 node11 之后，node 和浏览器的法则趋同。

如果感觉这篇文章对你有帮忙，给我点个赞呗～这对我很重要