前端面试题之EventLoop、宏任务与微任务

什么是EventLoop？

理解概念之前，咱们先来两个"栗子"吃~

栗子一：

console.log("我是")
setTimeout(function() {
    console.log("姐姐")
}, 0)
console.log("超凡的")

// 输出答案 “我是超凡的姐姐”

栗子二：

console.log("我是")
setTimeout(function() {
    console.log("姐姐(天津味儿的)")
}, 0)
new Promise(()=>{
    console.log("特别的")
}).then("哈哈哈")
console.log("超凡的")

//输出答案 "我是特别的超凡的哈哈哈哈姐姐(天津味儿的)"

那各位猜对/猜错的小伙伴，其实以上JS代码能够在浏览器中有效执行的过程，就是浏览器的EventLoop

总结：EvenLoop即事件循环，也就是浏览器或Node的一种能够javaScript单线程运行时不会阻塞的一种机制/运行机制

那么问题来了，为何会如何输出？那就要说到宏任务&微任务

首先说一下宏任务和微任务的执行内容和范围

宏任务：主线程要执行的代码 & 定时器/延时器

微任务：Promise的.then .catch中需要执行的内容

每一个宏任务都是独立的个体，上一个宏任务执行完，才会考虑下一个宏任务。第一个宏任务队列里的内容执行完毕时，会进行判断看是否有微任务，如果满足条件的微任务，执行完所有的微任务，才会执行下一个宏任务。

img1.png

EventLoop事件循环队列

1. Js是单线程的，Js执行时，主线程遇到了异步函数不会停留，放入执行队列
2. 满足条件后，将执行队列的内容，放入任务队列中排队
3. 主线程执行完毕代码空闲后，才会考虑任务队列中的代码

img2.png

题目一：无微任务

console.log("我是小姐姐,") //宏任务1
setTimeout(function(){
   console.log("你是谁？") // 宏任务2（属于下一个宏任务,定时器/延时器属于异步内容，放入执行栈后，并放入任务队列等待执行)
})        
console.log("我们认识一下,") //宏任务1
//执行顺序   执行宏任务1内容完毕后，没有满足条件的微任务，直接执行下一个宏任务2
//输出结果   我是小姐姐,我们认识一下,你是谁？

题目二：有微任务

说明补充1：promise的内部既包含宏任务也包含微任务，promise内部执行为宏任务，Promise的.then .catch中需要执行的内容执行为微任务

console.log("我是")  //宏任务1
setTimeout(function() {
    console.log("姐姐(天津味儿的)")   //宏任务2 (这里就不多说了.....)
}, 0)     
new Promise(()=>{
    console.log("特别的")   //宏任务1 (看下方的补充1)
}).then("哈哈哈")  // 满足条件的微任务，宏任务1执行完毕后，执行微任务，微任务执行完毕后执行宏任务2 
console.log("超凡的") // 宏任务1

//输出答案 "我是特别的超凡的哈哈哈哈姐姐(天津味儿的)"

题目三：什么都有

说明补充2：async表示函数是异步的的，async只有遇到了await开始，才是异步的开始。

async function fn(){
    console.log('111')
}
console.log('222')
//没有await，代码正常输出 111222

说明补充3：await后的内容为宏任务，await下的内容可以理解为.then后面的内容，相当于微任务

async function fn(){
    console.log("111")  //宏任务1
    const res = await fn2()// 宏任务1 fn2() await后的内容为宏任务
    console.log(res) //微任务1  await下的内容可以理解为.then后面的内容，相当于微任务
}
function fn2(){
    console.log('222') //宏任务1 
    return 3 //宏任务1 
}
fn()//宏任务1  
//输出结果为 111 222 3

小霸王来了(我们按照以上内容自己分析)

console.log('script start')

async function async1() {
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2 end')
}
async1()

setTimeout(function() {
  console.log('setTimeout')
}, 0)

new Promise(resolve => {
  console.log('Promise')
  resolve()
})
  .then(function() {
    console.log('promise1')
  })
  .then(function() {
    console.log('promise2')
  })

console.log('script end')

分析如下：

console.log('script start')  //宏任务1

async function async1() {
  await async2()    // 宏任务1 async2()   **await后的内容为宏任务，await下的内容为异步任务**
  console.log('async1 end')   //微任务1
}
async function async2() {
  console.log('async2 end')  //宏任务1 
}
async1() // 宏任务1

setTimeout(function() {
  console.log('setTimeout')  //宏任务2
}, 0)

new Promise(resolve => {
  console.log('Promise')  //宏任务1
  resolve()   //宏任务1
})
  .then(function() {
    console.log('promise1')  //微任务2
  })
  .then(function() {
    console.log('promise2') //微任务3
  })

console.log('script end') //宏任务1

输出顺序为宏任务1： script start    async2 end     Promise    script end
微任务依次执行：async1 end   promise1    promise2 
下一个宏任务： setTimeout

看完题目二、题目三的两个补充条件后，面试后大部分的宏任务和微任务练习题基本不会出错，也可以多看一些文章，加深理解，一起加油，欢迎互动和补充~