理解javascript中的事件循环(Event Loop)

背景

在研究js的异步的实现方式的时候，发现了JavaScript 中的 macrotask 和 microtask 的概念。在查阅了一番资料之后，对其中的执行机制有所了解，下面整理出来，希望可以帮助更多人。

先了解一下js的任务执行机制

首先，javascript是单线程的，所以只能通过异步解决性能问题(否则，如果前面一个任务阻塞了，那么后续的任务都要等待，这种效果是无法接受的)。js在执行代码时存在着两个比较重要的东西：执行栈和任务队列，这两个东西都是用来存储任务的，区别在于：执行栈里面存着的都是同步任务，也就是要按顺序执行的任务；而任务队列中存着的是一些异步任务，这些异步任务一定要等到执行栈清空后才会执行（这句话很重要）。关于任务队列，它还分成两种，一种叫作macrotask queue（姑且这么命名，因为严格来说规范中只有说task，并没有提到macrotask这个概念。这里为了容易区分，可以理解为macrotask=task!=microtask），另一种叫作microtask queue。如果同时考虑node环境和浏览器环境的话，这两种任务分别对应以下api：
microtasks:

• process.nextTick
• promise
• Object.observe
• MutationObserver

macrotasks:

• setTimeout
• setInterval
• setImmediate
• I/O
• UI渲染
• script标签中的整体代码

javascript在执行时，先从 macrotasks 队列开始执行，取出第一个 macrotask 放入执行栈执行，在执行过程中，如果遇到 macrotask，则将该 macrotask 放入 macrotask 队列，继续运行执行栈中的后续代码。如果遇到microtask,那么将该microtask放入microtask队列，继续向下运行执行栈中的后续代码。当执行栈中的代码全部执行完成后，从microtasks队列中取出所有的microtask放入执行栈执行。执行完毕后，再从macrotasks 队列取出下一个macrotask放入执行栈。然后不断重复上述流程。这一过程也被称作事件循环（Event Loop）。
javascript就是通过这种机制来实现异步的。主线程会暂时存储I/O等异步操作，直接向下执行，当某个异步事件触发时，再通知主线程执行相应的回调函数，通过这种机制，javascript避免了单线程中异步操作耗时对后续任务的影响。

图解事件循环流程

根据图中描述，一次事件循环的执行步骤如下：
1、从macrotask queue中取出最早的任务
2、在执行栈中执行第一步取出的任务
如果任务中存在microtask，将其压入到microtask queue中
如果任务中存在macrotask，将其压入到macrotask queue中
直到执行完毕
3、执行栈设置为null
4、从macrotask queue中删除执行过的macrotask
5、取出microtask queue中的全部任务，放入执行栈，
如果任务中存在microtask，将其压入到microtask queue中
如果任务中存在macrotask，将其压入到macrotask queue中
注意：这里产生的microtask（也就是microtask产生的microtask ）也会在这一步骤中执行。
直到当前microtask queue为空，此步骤结束。
6、执行第一步的操作

实例验证

我们执行如下一段代码，用上面的思路执行，看一下结果是否和预期的一致。

console.log('start')

const interval = setInterval(() => {  
  console.log('setInterval')
}, 0)

setTimeout(() => {  
  console.log('setTimeout 1')
  Promise.resolve()
      .then(() => {
        console.log('promise 3')
      })
      .then(() => {
        console.log('promise 4')
      })
      .then(() => {
        setTimeout(() => {
          console.log('setTimeout 2')
          Promise.resolve()
              .then(() => {
                console.log('promise 5')
              })
              .then(() => {
                console.log('promise 6')
              })
              .then(() => {
                clearInterval(interval)
              })
        }, 0)
      })
}, 0)

Promise.resolve()
    .then(() => {  
        console.log('promise 1')
    })
    .then(() => {
        console.log('promise 2')
    })

按照上面的思路，我们来理一下，预测一下执行结果，看看实际效果是否是这样的。
执行流程：
第一轮：
1、首先这一整段js代码作为一个macrotask先被执行
2、遇到console.log('start')，输出start
3、遇到setInterval，回调函数作为macrotask压入到macrotask queue中，
此时macrotask queue：[setInterval]
4、遇到setTimeout，回调函数作为macrotask压入到macrotask queue中,
此时macrotask queue：[setInterval,setTimeout1]
5、遇到Promise，并且调用了resolve方法，触发了回调，回调作为microtask压入到microtask queue中
此时microtask queue：[promise 1,promise 2]
6、执行栈为空，将microtask queue中的任务放入执行栈
7、执行microtask queue中Promise的回调任务，分别打印promise 1，promise 2
8、执行栈为空，microtask queue为空，开始下一轮事件循环
目前的console中打印内容：
start
promise 1
promise 2
目前macrotask queue：[setInterval,setTimeout1]

第二轮：
1、从macrotask queue中取出最早的任务，这里对应的是第一轮中第3步的回调函数：console.log('setInterval')，输出setInterval
2、setInterval的回调函数作为macrotask压入到macrotask queue中
此时macrotask queue：[setTimeout1,setInterval]
3、执行栈为空，microtask queue为空，开始下一轮事件循环
目前的console中打印内容：
start
promise 1
promise 2
setInterval
目前macrotask queue：[setTimeout1,setInterval]

第三轮：
1、从macrotask queue中取出最早的任务，目前是setTimeout1的回调，将取出的任务放入执行栈执行
2、遇到console.log('setTimeout 1')，输出setTimeout 1
3、遇到Promise，并且调用了resolve方法，触发回调，回调作为microtask压入到microtask queue中
此时microtask queue：[promise 3,promise 4，() => {setTimeout 2}]
4、执行栈为空，将microtask queue中的任务放入执行栈
5、执行microtask queue中Promise的回调任务：
输出promise 3
输出promise 4
将setTimeout 2压入macrotask queue
6、执行栈为空，microtask queue为空，开始下一轮事件循环
目前的console中打印内容：
start
promise 1
promise 2
setInterval
setTimeout 1
promise 3
promise 4
目前macrotask queue：[setInterval，setTimeout2]

第四轮：
1、从macrotask queue中取出最早的任务，这里对应的是setInterval，输出setInterval
2、setInterval的回调函数作为macrotask压入到macrotask queue中
此时macrotask queue：[setTimeout2,setInterval]
3、执行栈为空，microtask queue为空，开始下一轮事件循环
目前的console中打印内容：
start
promise 1
promise 2
setInterval
setTimeout 1
promise 3
promise 4
setInterval
目前macrotask queue：[setTimeout2,setInterval]

第五轮：
1、从macrotask queue中取出最早的任务，目前是setTimeout2的回调，将取出的任务放入执行栈执行
2、遇到console.log('setTimeout 2')输出setTimeout 2
3、遇到Promise，并且调用了resolve方法，触发回调，回调作为microtask压入到microtask queue中
此时microtask queue：[promise 5,promise 6，() => {clearInterval}]
4、执行栈为空，将microtask queue中的任务放入执行栈
5、执行microtask queue中Promise的回调任务：
输出promise 5
输出promise 6
clearInterval清空setInterval计时器
6、执行栈为空，microtask queue为空，macrotask queue为空,任务结束。
最终的console中打印内容：
start
promise 1
promise 2
setInterval
setTimeout 1
promise 3
promise 4
setInterval
setTimeout 2
promise 5
promise 6

通过图片可以看到，结果跟我们的预期一致，在promise2的后面作为方法的返回值，多打印了一个undefined，这个应该好理解的。

这里面有个小问题，就是在不同的环境下（node/浏览器），promise4后面的setInterval表现可能会有差异，这里可能跟setTimeout和setInterval的最小间隔有关，虽然我们写成0ms，但实际上这个最小值是有限制的，现阶段不同组织和不同的js引擎实现机制存在差异，不过这个问题不在本次讨论范围之内了。如果我们将上述代码中setInterval的间隔设置为10，那么整个执行流程将严格符合我们的预期。

有什么用？

• 后续我们在代码中使用Promise，setTimeout时，思路将更加清晰，用起来更佳得心应手。
• 在阅读一些源码时，对于一些setTimeout相关的骚操作可以理解的更加深入。
• 理解javascript中的任务执行流程，加深对异步流程的理解，少犯错误。

总结

• js事件循环总是从一个macrotask开始执行
• 一个事件循环过程中，只执行一个macrotask，但是可能执行多个microtask
• 执行栈中的任务产生的microtask会在当前事件循环内执行
• 执行栈中的任务产生的macrotask要在下一次事件循环才会执行