Event loop事件循环与事件队列

在学习阮大神的es6教程中promise和async await时在查询资料过程中在掘金上看到一篇 Promise和async await详解，文中有列出promise常见的面试题，其中有一题就涉及到了js的执行队列的问题，但是当时自己并没有去继续深入，只知道个大概没有把问题理解透，今天复盘整理学习内容，针对这个问题查阅了很多资料，个人终于把这个问题搞明白了。

大神们都贴出很多代码和图了，我就不去做重复的事了，以下为个人对事件循环与事件队列的知识梳理与总结。

---

首先我们需要明白以下几件事情：

• JS分为同步任务和异步任务

• 同步任务都在主线程上执行，形成一个执行栈，执行栈内的方法会被依次调用

• 当发起一个异步任务的时候，主线程会把这个异步任务挂起(pending)，继续执行执行栈中的其他任务，等异步任务返回结果后，js会将这个异步任务按照执行顺序，加入到与执行栈不同的另一个队列，也就是事件队列。

一旦执行栈中的所有同步任务执行完毕，就会读取事件队列，将事件队列中的任务按加入事件队列的顺序推到执行栈中执行，如果此时又有异步任务，继续将异步任务挂起，等异步任务返回结果以后排到事件队列中。这个过程是循环往复的，所以这个过程，就称之为 “Event loop事件循环” ，简单来说，就是JS主线程不断的循环往复的从事件队列中读取任务，执行任务。

事件循环会将其中的异步任务按照执行顺序排列到事件队列中。然而，根据异步事件的不同分类，这个事件实际上会被排列到对应的宏任务(macrotasks)队列或者微任务(microtasks)队列当中去。微任务(microtasks)的优先级要高于宏任务(macrotasks)—— 划重点，面试题考察的点基本上就是宏任务与微任务。

宏任务包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)

微任务包含：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)

Promise中的异步体现在then和catch中，所以写在Promise中的代码是被当做同步任务立即执行的。而在async/await中，在出现await出现之前，其中的代码也是立即执行的。那么出现了await时候发生了什么呢？

很多人以为await会一直等待之后的表达式执行完之后才会继续执行后面的代码，实际上await是一个让出线程的标志。await后面的表达式会先执行一遍，将await后面的代码加入到microtask中，然后就会跳出整个async函数来执行后面的代码。

asyncfunctionasync1() {
    console.log('async1 start');
    awaitasync2();
    console.log('async1 end');
}

相当于：

asyncfunctionasync1() {
    console.log('async1 start');
    Promise.resolve(async2()).then(()=>{
        console.log('async1 end'); 
     })
}

简而言之，对于事件循环，执行顺序为 同步任务 --> 异步任务(微任务 --> 宏任务)，若微任务或宏任务中还有异步任务，按照顺序继续放入相对应的列队来进行处理。

以上配合例题一起食用，风味更佳。用下面这个丧心病狂的例题来加深对Event loop的理解吧。

console.log('start');
const interval = setInterval(() => {
  console.log('setInterval');
});

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);

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

执行结果

start

promise 1
promise 2

setInterval
setTimeout 1
promise 3
promise 4

setInterval
setTimeout 2
promise 5
promise 6

• setInterval和setTimeout 都在宏任务中，Promise.then在微任务中，所以会先执行Promise.then。
• 例子中setInterval在setTimeout前面，所以先执行setInterval再执行setTimeout。
• 而没有清除setInterval的话，执行完一次setInterval之后，setInterval会继续加入宏任务队列中。
• 执行setTimeout过程中，遇到setTimeout 2，继续将setTimeout 2加入到队列中。

参考文章：

1、浏览器的Tasks、microtasks、 queues 和 schedules

2、Event Loop 这个循环你晓得么？(附GIF详解) (GIF图画得通俗易懂，很形象）

3、第 10 题：常见异步笔试题