什么是事件循环

在理解事件循环前，须要一些无关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。

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

// nodesetTimeout(() => {  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和浏览器的法则趋同。

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