前言：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

我们来解析下流程：

1. setTimeout为异步任务，存入任务队列；p的resolve会立即执行，输出3；Promisi对象执行then，为异步任务，存入任务队列；最后同步任务直接打印2
2. 此时执行栈为空，检查任务队列，存在setTimeout和Promise.then，此处会涉及到宏任务和微任务的概念（后面会详细解释），此时Promise.then作为微任务，回调事件优先于宏任务setTimeout进入执行栈，顺序执行后分别输出1 0
3. 最后得到输出顺序为：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. 主线程输出1 4，任务队列存入setTimeout、Promise.then
2. 判断存在微任务，输出 2 3
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

执行过程：

1. Promise1输出p1-0，Promise1.then进入微任务队列
2. 执行Promise1.then输出p1-1，读取到Promise2，输出p2-0，Promise2.then进入微任务队列；Promise1.then读取完毕，Promise1.then.then进入微任务队列，此时微任务队列的顺序为: Promise2.then -> Promise1.then.then
3. 执行栈为空，执行微任务队列，输出p2-1，Promise2.then.then进入微任务队列，输出p1-2，此时微任务队列的顺序为：Promise2.then.then
4. 执行栈为空，执行微任务队列，输出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

执行过程：

1. Promise1输出p1-0，Promise1.then进入微任务队列
2. setTimeOut1进入宏任务队列，输出p1-1，Promise1.then.then进入微任务队列
3. 执行栈为空，执行微任务队列，输出p1-2；执行宏任务队列，输出macrotask-1，p2-0，Promise2.then进入微任务队列
4. setTimeout2进入宏任务队列，输出p2-1，Promise2.then.then进入微任务队列
5. 执行栈为空，执行微任务队列，输出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

执行过程：

1. setTimeout1进入宏任务队列，然后执行async1，输出a1-0，后续内容存入微任务队列，执行async2，输出a2-0，setTimeout3进入宏任务队列
2. 执行栈为空，执行微任务队列，输出a1-1，setTimeout2进入宏任务队列
3. 执行宏任务队列，输出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会在所有的异步任务完成后再执行回调。

1. all遍历传入的数组，执行每一个Promise对象，分别将setTimeout1、setTimeout2、setTimeout3存入宏任务队列
2. 执行栈为空，执行宏任务队列，输出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会在第一个异步任务完成后马上执行回调，不返回其他的异步任务结果（但是会执行）

1. race遍历传入的数组，执行每一个Promise对象，分别将setTimeout1、setTimeout2、setTimeout3存入宏任务队列
2. setTimeout1优先完成，输出1，race执行回调，输出res 1，后续逐个输出2、3
   最终输出 1 res1 2 3