当前位置: 首页 > article >正文

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

宏任务与微任务的区别

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. 重复循环

三、关键差异对比

特征宏任务微任务
执行优先级
队列清空机制每次执行一个全部执行直至队列清空
触发机制EventLoop每个循环周期执行栈清空后立即执行
典型APIsetTimeout, setIntervalPromise, process.nextTick

四、代码分析

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/

#前端面试题


http://www.kler.cn/a/589395.html

相关文章:

  • C语言之 循环语句:程序运行的核心动力(上)
  • vuex持久化存储,手动保存到localStorage
  • 奥林巴斯道Olympus DAO、奥拉丁模式、诺瓦银行、RWA模型合约解析开发
  • 大数据学习(70)-大数据调度工具对比
  • Navigation页面导航的使用
  • 基于javaweb的SpringBoot校园运动会管理系统设计与实现(源码+文档+部署讲解)
  • 6k ± 1 规则
  • 自然语言处理编程文档
  • 数组题型-二分查找-JS
  • 实战:自适应均衡的设计与实现
  • 【Docker】容器中安装cron命令
  • 使用 Docker 部署 MySQL 8
  • TensorFlow 基本原理与使用场景
  • 移除元素(快慢指针)
  • Linux第六讲----git与gdb
  • 文本检测-文本内容审核-文本过滤接口如何用PHP调用?
  • 市长海报/ Mayor‘s posters
  • L2-3 花非花,雾非雾
  • maven使用install将jar包编译到本地仓库管理
  • 【系统架构设计师】操作系统 - 文件管理 ② ( 位示图 | 空闲区域 管理 | 位号 | 字号 )