【前端面试题】宏任务与微任务的区别

宏任务与微任务的区别

JavaScript采用单线程模型，通过 事件循环（Event Loop） 机制处理异步操作。

类比于厨师上菜的过程，顾客点的菜可能存在容易处理的 “软菜” 与难处理的 “硬菜” ，以及要加米饭酒水这些立马可以上的 “快菜”
这里立马可以上的快菜就是JS执行栈中的同步代码，更容易处理的软菜就是微任务队列中代码，最难处理的硬菜就是宏任务队列中的代码。

一、核心概念解析

1.1 宏任务（MacroTask）

典型场景：

• setTimeout/setInterval
• DOM事件回调
• I/O操作（如文件读写）
• UI渲染
• requestAnimationFrame

1.2 微任务（MicroTask）

典型场景：

• Promise.then()/catch()/finally()
  注意：Promise本身的方法体是同步执行的
• MutationObserver
• process.nextTick（Node.js环境）

二、执行顺序

1. 执行当前执行栈中的所有同步代码
2. 执行所有微任务（直到微任务队列清空）
3. 执行一个宏任务
4. 更新UI渲染（如果需要）
5. 重复循环

三、关键差异对比

四、代码分析

console.log("start")

setTimeout(()=>{
  console.log(1)
},0)
var pro = new Promise((resolve, reject)=>{
  resolve(2)
  var innerPro = new Promise((resolve, reject)=>{
    resolve(3)
    console.log(4)
  })
  innerPro.then(res=>{
    console.log(res)
  })
})
pro.then(res=>{
  console.log(res)
})

console.log('end')

/* 输出顺序：
start
4
end
3
2
1
*/

1. 首先执行栈将所有同步代码进行执行，先输出"start"
2. 将setTimeout推入宏任务队列进行等待。
3. pro的方法体和 innerPro的方法体依次推入执行栈中执行，会输出"4"
4. 将innerPro.then推入微任务队列，pro.then也推入微任务队列。微任务队列的顺序为innerPro.then -> pro.then
5. 执行栈输出"end"，执行栈已清空。
6. 微任务队列依次清空，输出"3"和"2"
7. 执行宏任务队列中的代码，输出"1"
8. 流程结束

最后推荐一个JS代码执行流程可视化的网站:https://www.jsv9000.app/

#前端面试题