在学习阮大神的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图画得通俗易懂，很形象）
