是什么
⾸先， JavaScript 是⼀⻔单线程的语⾔，意味着同⼀时间内只能做⼀件事，但是这并不意味着单线程就是阻塞，⽽实现单线程⾮阻塞的⽅法就是事件循环
在 JavaScript 中，所有的任务都可以分为
同步任务：⽴即执⾏的任务，同步任务⼀般会直接进⼊到主线程中执⾏
异步任务：异步执⾏的任务，⽐如 ajax ⽹络请求， setTimeout 定时函数等
同步任务与异步任务的运⾏流程图如下：
从上⾯我们可以看到，同步任务进⼊主线程，即主执⾏栈，异步任务进⼊任务队列，主线程内的任务执⾏完毕为空，会去任务队列读取对应的任务，推⼊主线程执⾏。上述过程的不断重复就是事件循环
宏任务与微任务
如果将任务划分为同步任务和异步任务并不是那么的准确，举个例⼦：
console.log(1)
setTimeout(()=>{
console.log(2)
}, 0)
new Promise((resolve, reject)=>{
console.log('new Promise')
resolve()
}).then(()=>{
console.log('then')
})
console.log(3)如果按照上⾯流程图来分析代码，我们会得到下⾯的执⾏步骤：
console.log(1) ，同步任务，主线程中执⾏
setTimeout() ，异步任务，放到 Event Table ，0 毫秒后 console.log(2) 回调推⼊Event Queue 中
new Promise ，同步任务，主线程直接执⾏
.then ，异步任务，放到 Event Table
console.log(3) ，同步任务，主线程执⾏
所以按照分析，它的结果应该是 1 => 'new Promise' => 3 => 2 => 'then'
但是实际结果是： 1 => 'new Promise' => 3 => 'then' => 2
出现分歧的原因在于异步任务执⾏顺序，事件队列其实是⼀个“先进先出”的数据结构，排在前⾯的事件会优先被主线程读取
例⼦中 setTimeout 回调事件是先进⼊队列中的，按理说应该先于 .then 中的执⾏，但是结果却偏偏相反
原因在于异步任务还可以细分为微任务与宏任务
微任务
⼀个需要异步执⾏的函数，执⾏时机是在主函数执⾏结束之后、当前宏任务结束之前
常⻅的微任务有：
Promise.then
MutaionObserver
Object.observe（已废弃；Proxy 对象替代）
process.nextTick（Node.js）
宏任务
宏任务的时间粒度⽐较⼤，执⾏的时间间隔是不能精确控制的，对⼀些⾼实时性的需求就不太符合
常⻅的宏任务有：
script (可以理解为外层同步代码)
setTimeout/setInterval
UI rendering/UI事件
postMessage、MessageChannel
setImmediate、I/O（Node.js）
这时候，事件循环，宏任务，微任务的关系如图所⽰
按照这个流程，它的执⾏机制是：
执⾏⼀个宏任务，如果遇到微任务就将它放到微任务的事件队列中
当前宏任务执⾏完成后，会查看微任务的事件队列，然后将⾥⾯的所有微任务依次执⾏完
回到上⾯的题⽬
console.log(1)
setTimeout(()=>{
console.log(2)
}, 0)
new Promise((resolve, reject)=>{
console.log('new Promise')
resolve()
}).then(()=>{
console.log('then')
})
console.log(3)流程如下
// 遇到 console.log(1) ，直接打印 1
// 遇到定时器，属于新的宏任务，留着后⾯执⾏
// 遇到 new Promise，这个是直接执⾏的，打印 'new Promise'
// .then 属于微任务，放⼊微任务队列，后⾯再执⾏
// 遇到 console.log(3) 直接打印 3
// 好了本轮宏任务执⾏完毕，现在去微任务列表查看是否有微任务，发现 .then 的回调，执⾏它，打印 'then'
// 当⼀次宏任务执⾏完，再去执⾏新的宏任务，这⾥就剩⼀个定时器的宏任务了，执⾏它，打印 2
async与await
async 是异步的意思， await 则可以理解为 async wait 。所以可以理解 async 就是⽤来声明⼀个异步⽅法，⽽ await 是⽤来等待异步⽅法执⾏
async
async 函数返回⼀个 promise 对象，下⾯两种⽅法是等效的
function f() {
return Promise.resolve('TEST');
}
// asyncF is equivalent to f!
async function asyncF() {
return 'TEST';
}await
正常情况下， await 命令后⾯是⼀个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值
async function f(){
// 等同于
// return 123
return await 123
}
f().then(v => console.log(v)) // 123不管 await 后⾯跟着的是什么， await 都会阻塞后⾯的代码
async function fn1 (){
console.log(1)
await fn2()
console.log(2) // 阻塞
}
async function fn2 (){
console.log('fn2')
}
fn1()
console.log(3)上⾯的例⼦中， await 会阻塞下⾯的代码（即加⼊微任务队列），先执⾏ async 外⾯的同步代码，同步代码执⾏完，再回到 async 函数中，再执⾏之前阻塞的代码
所以上述输出结果为： 1 ， fn2 ， 3 ， 2
流程分析
通过对上⾯的了解，我们对 JavaScript 对各种场景的执⾏顺序有了⼤致的了解
这⾥直接上代码：
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2')
}
console.log('script start')
setTimeout(function () {
console.log('settimeout')
})
async1()
new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('promise2')
})
console.log('script end')分析过程：
1. 执⾏整段代码，遇到 console.log('script start') 直接打印结果，输出 script
2. s遇 t到 ar定 t时器了，它是宏任务，先放着不执⾏
3. 遇到 async1() ，执⾏ async1 函数，先打印 async1 start ，下⾯遇到 await 怎么办？先执⾏ async2 ，打印 async2 ，然后阻塞下⾯代码（即加⼊微任务列表），跳出去执⾏同步代码
4.跳到 new Promise 这⾥，直接执⾏，打印 promise1 ，下⾯遇到 .then() ，它是微任务，放到微任务列表等待执⾏
5. 最后⼀⾏直接打印 script end ，现在同步代码执⾏完了，开始执⾏微任务，即 await 下⾯的
代码，打印 async1 end
6. 继续执⾏下⼀个微任务，即执⾏ then 的回调，打印 promise2
7. 上⼀个宏任务所有事都做完了，开始下⼀个宏任务，就是定时器，打印 settimeout
所以最后的结果是： script start 、 async1 start 、 async2 、 promise1 、 script
end 、 async1 end 、 promise2 、 settimeout