深入理解事件循环机制
面试题
我们面试的时候，可能有的面试官问我们：“可以介绍一下JavaScript事件循环机制吗？”或者“对微任务和宏任务有了解吗？”
再或者人家也懒得问我们，直接把下面这道面试题甩给我们，让我们写出它最后的执行结果；
console.log('1')
setTimeout(function callback(){
console.log('2')
}, 1000)
new Promise((resolve, reject) => {
console.log('3')
resolve()
})
.then(res => {
console.log('4');
})
console.log('5')
输出是：1，3，5，4，2
看看和你想的一样不，做对的话，那你就不用再往下看了，看了也是浪费时间；如果错了，那接下来，我们就一起来研究为什么是上面的打印结果；
上面的三种行为其实就是考察我们对event loop（事件循环）机制的认识；
那今天我们就围绕这个面试题来探索一下，看完回来，你只会感慨：就这，太TM简单了！
JavaScript是单线程
JavaScript是一种单线程的编程语言，意思就是同一时间段只能做一件事，所有任务都需要排队依次完成；
那么，为什么JavaScript不能有多个线程呢？
答：作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准；
所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。
同步任务和异步任务
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
我们把上面得部分代码拿过来，如下：
console.log('1')
setTimeout(function (){
console.log('2')
}, 1000)
console.log('3')
/* 运行结果：
1
3
2
*/
这时就有人纳闷啦，Js不是单线程吗，它应该从上到下一行一行执行的，只有当上一行的代码执行完后才会执行下一行代码，那应该打印出：1，2，3；那为什么是：1，3，2呢；
JavaScript开发人员意识到，为了不影响主线程正常运行，就把那些耗时的时间（比如定时器，Ajax操作从网络读取数据等）任务挂起来，依次的放进一个任务队列中，等主线程的任务执行完毕后，再回过来去继续执行队列中的任务；
于是，任务就可以分成两种：
- 同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
- 异步任务：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
event loop（事件循环）
其实上面的代码执行动图大致如下：（图片来源于 「零一」）
执行机制过程如下：
- 所有同步任务都在主线程上执行，形成一个执行栈（调用栈）；
- 主线程之外，还存在一个‘任务队列’（task queue），浏览器中的各种 Web API 为异步的代码提供了一个单独的运行空间，当异步的代码运行完毕以后，会将代码中的回调送入到 任务队列中（队列遵循先进先出得原则）
- 一旦主线程的栈中的所有同步任务执行完毕后，调用栈为空时系统就会将队列中的回调函数依次压入调用栈中执行，当调用栈为空时，仍然会不断循环检测任务队列中是否有代码需要执行；
其实，这一过程就是我们要了解的event loop（事件循环）机制；
现在你知道为什么打印出来的结果是：1、3、2了吧；
宏任务和微任务
回过头来我们再看看这道面试题:
console.log('1')
setTimeout(function callback(){
console.log('2')
}, 1000)
new Promise((resolve, reject) => {
console.log('3')
resolve()
})
.then(res => {
console.log('4');
})
console.log('5')
扩展：这里涉及到 Promise构造函数,这里就不多讲；这里大家知道Promise函数是同步执行，.then方法为异步执行就可以；
上面说过了同步和异步任务,也了解了event loop（事件循环）机制,大家知道要先等调用栈的同步任务执行完毕后再去执行异步任务，所以先打印出：1、3、5，这是没有问题，setTimeout()和Promise()都是异步任务，那接下来setTimeout()先于Promise()插入异步任务队列，为什么先打印的是4，不是2呢？
实际上，异步任务也有区别，分为：macrotask（宏任务） 和 microtask（微任务）
浏览器中常用的宏任务和微任务：
| 名称 | 事件 |
|---|---|
| 宏任务 | setTimeout 、setInterval 、UI rendering |
| 微任务 | promise 、requestAnimationFrame |
那么异步任务既然分为宏任务和微任务，则队列肯定也分为宏任务队列和微任务队列啦；
当宏任务和微任务都处于 任务队列（Task Queue） 中时，微任务的优先级大于宏任务，即先将微任务执行完，再执行宏任务；
其实上面得代码执行动图大致如下：（图片来源于 「零一」）
执行机制过程如下：
- 第一步： 主线程执行同步任务的同时，把一些异步任务放入‘任务队列’（task queue）中，等待主线程的调用栈为空时，再依次从队列出去任务去执行；
- 第二步：检测任务队列中的微队列是否为空，若不为空，则取出一个微任务入栈执行；然后继续执行第2步；如果微队列为空，则开始取出宏队列中的一个宏任务执行；
- 第三步：执行完宏队列中的一个宏任务后，会继续检测微队列是否为空，如果有新插入的任务，这继续执行第二步；如果微队列为空，则继续执行宏队列中的下一个任务，然后再继续循环执行第三步；
上面的执行步骤可以结合动图来看，一定要看懂，一定要理解！
现在知道了为什么打印出：1，3，5，4，2 了吧；
检测练习
为了看你是否真正理解，可以看下面代码，打印输出为？
setTimeout( () => {
console.log('1')
Promise.resole().then( () => {
console.log('2')
})
},0)
new Promise((resolve, reject) => {
console.log('3')
resolve()
})
.then(res => {
console.log('4');
})
console.log('5')