事件循环（Event Loop）的理解（宏任务与微任务、async与await执行流程）

⾸先， JavaScript 是⼀⻔单线程的语⾔，意味着同⼀时间内只能做⼀件事，但是这并不意味着 单线程就是阻塞，⽽实现单线程⾮阻塞的⽅法就是事件循环.

在 JavaScript 中，所有的任务都可以分为 同步任务：⽴即执⾏的任务，同步任务⼀般会直接进⼊到主线程中执⾏ 异步任务：异步执⾏的任务，⽐如 ajax ⽹络请求， setTimeout 定时函数等 同步任务与异步任务的运⾏流程图如下：

 从上⾯我们可以看到，同步任务进⼊主线程，即主执⾏栈，异步任务进⼊任务队列，主线程内的任务执 ⾏完毕为空，会去任务队列读取对应的任务，推⼊主线程执⾏。上述过程的不断重复就事件循环

1.宏任务与微任务

如果将任务划分为同步任务和异步任务并不是那么的准确，举个例⼦：

onsole.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 中的执⾏，但是结果却偏 偏相反

原因在于异步任务还可以细分为微任务与宏任务

微任务

⼀个需要异步执⾏的函数，执⾏时机是在主函数执⾏结束之后、当前宏任务结束之前 常⻅的微任务有：

1.Promise.then

2.MutaionObserver

3.Object.observe（已废弃；Proxy 对象替代）

4.process.nextTick（Node.js）

宏任务

宏任务的时间粒度⽐较⼤，执⾏的时间间隔是不能精确控制的，对⼀些⾼实时性的需求就不太符合 常⻅的宏任务有：

1.script (可以理解为外层同步代码)

2.setTimeout/setInterval

3.UI rendering/UI事件

4.postMessage、MessageChannel

5.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 start

2. 遇到定时器了，它是宏任务，先放着不执⾏

3. 遇到 async1() ，执⾏ async1 函数，先打印 async1 start ，下⾯遇到 await 怎么办？ 先执⾏ async2 ，打印 async2 ，然后阻塞下⾯代码（即加⼊微任务列表），跳出去执⾏同步代码

4. 跳到 new Promise 这⾥，直接执⾏，打印 promise1 ，下⾯遇到 .then() ，它是微任务， 放到微任务列表等待执行

5. 最后⼀⾏直接打印 script end ，现在同步代码执⾏完了，开始执⾏微任务，即 await 下⾯的 代码，打印 async1 end

6.继续执⾏下⼀个微任务，即执⾏ then 的回调，打印 promise2

7. 上⼀个宏任务所有事都做完了，开始下⼀个宏任务，就是定时器，打印 settimeout

所以最后的结果是： scrit start 、 async1 start 、 async2 、 promise1 、 script end 、 async1 end 、 promise2 、 settimeout