前言：JS作为单线程脚本语言，在面对主线程阻塞时，需要借助事件循环，即Event Loop来同时执行其他任务。
1. 事件循环
1.1 JS为何是单线程
JS起初是为了在浏览器中运行脚本而设计的，保持简单和易用，并避免多线程带来的复杂性和安全问题。比如：两个线程同时对一个DOM对象进行处理。
1.2 执行栈、主线程、任务队列
基础概念：
- 任务分为同步任务和异步任务
- JS的任务都在执行栈顺序执行
- 执行至同步任务，会进入主线程；执行至异步任务，将被加入到任务队列（Event Queue）中
- 执行栈中所有任务执行完毕，系统会读取任务队列，将异步任务的回调事件添加到执行栈中，如此反复循环
我们可以看下面的图来理解一下：
image.png
举个例子：
setTimeout(() => {
console.log(0)
}, 0)
const p = new Promise(r => console.log(3))
Promise.resolve(1).then((res) => {
console.log(res)
})
console.log(2)
// 输出结果：3 2 1 0
我们来解析下流程：
- setTimeout为异步任务，存入任务队列；p的resolve会立即执行，输出3；Promisi对象执行then，为异步任务，存入任务队列；最后同步任务直接打印2
- 此时执行栈为空，检查任务队列，存在setTimeout和Promise.then，此处会涉及到宏任务和微任务的概念（后面会详细解释），此时Promise.then作为微任务，回调事件优先于宏任务setTimeout进入执行栈，顺序执行后分别输出1 0
- 最后得到输出顺序为：3 2 1 0
1.3 宏任务、微任务
1.3.1 宏任务
其实每一个script脚本都是一个宏任务（执行栈），每一个宏任务都会从头到尾执行完成，不会执行别的任务。因此，JS脚本线程和GUI渲染线程是一个互斥的关系，为此浏览器在每一次宏任务执行完成后，会执行GUI渲染，渲染完成后再进行下一轮宏任务，如此反复...
以下是常见的宏任务：
- script
- setTimeout、setInterval
- I/O操作（例如读取文件、发送请求）
- UI渲染（绘制、重布局等）
举个例子，开发者将某dom元素的宽度初始值设置为50px，通过点击事件将宽度修改为100px，同时写一个setTimeout将宽度修改为150px。那该dom元素会在点击后宽度变为100px，并在规定时间后宽度变为150px。
1.3.2 微任务
事实上任务队列分为：宏任务队列、微任务队列。微任务队列用于处理Promise的回调函数、async/await、MutationObserver等产生的微任务。当执行栈中的任务为空时，会优先检查微任务队列，并依次执行队列中的所有微任务。在每个宏任务执行结束后，会检查是否存在微任务队列，并在宏任务下一个周期执行之前执行微任务队列中的所有任务。这样的机制会保证微任务的优先级更高，可以在UI渲染之前执行，使页面得到更新。
我们再回到上一个例子，如果我们把setTimeout改为Promise.then，那么dom元素在点击后会直接变成150px，因为微任务执行在GUI之前。
与此同时，前面setTimeout和Promise.then的输出顺序在这里也得到了很好的解释。
可以看下面的流程图更进一步理解：
image.png
2. 面试题
2.1 基础
setTimeout(()=>{
console.log(0)
},0)
new Promise((resolve)=>{
console.log(1)
resolve()
}).then(()=>{
console.log(2)
}).then(()=>{
console.log(3)
})
console.log(4)
// 输出 1 4 2 3 0
执行过程：
- 主线程输出1 4，任务队列存入setTimeout、Promise.then
- 判断存在微任务，输出 2 3
- 执行宏任务，输出 0
2.2 深入微任务
new Promise((resolve,reject)=>{
console.log("p1-0")
resolve()
}).then(()=>{
console.log("p1-1")
new Promise((resolve,reject)=>{
console.log("p2-0")
resolve()
}).then(()=>{
console.log("p2-1")
}).then(()=>{
console.log("p2-2")
})
}).then(()=>{
console.log("p1-2")
})
// 输出 p1-0 p1-1 p2-0 p2 -1 p1-2 p2-2
执行过程：
- Promise1输出p1-0，Promise1.then进入微任务队列
- 执行Promise1.then输出p1-1，读取到Promise2，输出p2-0，Promise2.then进入微任务队列；Promise1.then读取完毕，Promise1.then.then进入微任务队列，此时微任务队列的顺序为: Promise2.then -> Promise1.then.then
- 执行栈为空，执行微任务队列，输出p2-1，Promise2.then.then进入微任务队列，输出p1-2，此时微任务队列的顺序为：Promise2.then.then
- 执行栈为空，执行微任务队列，输出p2-2
最后整体输出为：p1-0 p1-1 p2-0 p2-1 p1-2 p2-2
2.3 结合宏任务
new Promise((resolve, reject) => {
console.log("p1-0")
resolve()
}).then(() => {
setTimeout(() => {
console.log('macrotask-1')
new Promise((resolve, reject) => {
console.log("p2-0")
resolve()
}).then(() => {
setTimeout(() => {
console.log('macrotask-2')
}, 0)
console.log("p2-1")
}).then(() => {
console.log("p2-2")
})
}, 0)
console.log("p1-1")
}).then(() => {
console.log("p1-2")
})
// 输出 p1-0 p1-1 p1-2 macrotask-1 p2-0 p2-1 p2-2 macrotask-2
执行过程：
- Promise1输出p1-0，Promise1.then进入微任务队列
- setTimeOut1进入宏任务队列，输出p1-1，Promise1.then.then进入微任务队列
- 执行栈为空，执行微任务队列，输出p1-2；执行宏任务队列，输出macrotask-1，p2-0，Promise2.then进入微任务队列
- setTimeout2进入宏任务队列，输出p2-1，Promise2.then.then进入微任务队列
- 执行栈为空，执行微任务队列，输出p2-2，执行宏任务队列，输出macrotask-2
最后整体输出为：p1-0 p1-1 p1-2 macrotask-1 p2-0 p2-1 p2-2 macrotask-2
2.4 结合async/await
async function async1() {
console.log("a1-0");
await async2();
console.log("a1-1");
setTimeout(() => {
console.log('macro-2')
}, 0)
}
async function async2() {
console.log("a2-0");
setTimeout(() => {
console.log('macro-3')
}, 0)
}
setTimeout(() => {
console.log('macro-1')
}, 0)
async1();
// 输出 a1-0 a2-0 a1-1 macro-1 macro-3 macro-2
执行过程：
- setTimeout1进入宏任务队列，然后执行async1，输出a1-0，后续内容存入微任务队列，执行async2，输出a2-0，setTimeout3进入宏任务队列
- 执行栈为空，执行微任务队列，输出a1-1，setTimeout2进入宏任务队列
- 执行宏任务队列，输出macro-1,macro-3,macro-2
最终输出： a1-0 a2-0 a1-1 macro-1 macro-3 macro-2
2.5 Promise.all
function runAsync(x) {
return new Promise((resolve, _) => {
setTimeout(() => {
console.log(x)
resolve(x)
}, 1000)
})
}
Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then((res) => {
console.log('res', res)
})
已知Promise.all会在所有的异步任务完成后再执行回调。
- all遍历传入的数组，执行每一个Promise对象，分别将setTimeout1、setTimeout2、setTimeout3存入宏任务队列
- 执行栈为空，执行宏任务队列，输出1、2、3；all的所有异步任务完成，执行回调，输出res [1,2,3]
输出：1、2、3、res[1,2,3]
2.6 Promise.race
function runAsync(x) {
return new Promise((resolve, _) => {
setTimeout(() => {
console.log(x)
resolve(x)
}, 1000 * x)
})
}
Promise.race([runAsync(1), runAsync(2), runAsync(3)]).then((res) => {
console.log('res', res)
})
已知Promise.race会在第一个异步任务完成后马上执行回调，不返回其他的异步任务结果（但是会执行）
- race遍历传入的数组，执行每一个Promise对象，分别将setTimeout1、setTimeout2、setTimeout3存入宏任务队列
- setTimeout1优先完成，输出1，race执行回调，输出res 1，后续逐个输出2、3
最终输出 1 res1 2 3
