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

news/2025/3/18 19:06:57/

宏任务与微任务的区别

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.ppmy.cn/news/1580134.html

相关文章

【拓扑排序】火星词典

文章目录 LCR 114. 火星词典解题思路:拓扑排序 LCR 114. 火星词典 LCR 114. 火星词典 ​ 现有一种使用英语字母的外星文语言,这门语言的字母顺序与英语顺序不同。 ​ 给定一个字符串列表 words ,作为这门语言的词典,words 中的…

【CSS】二、浏览器调试与文字样式

文章目录 1、谷歌调试前端代码2、文字属性控制2.1 字体大小2.2 字体粗细2.3 字体倾斜2.4 行高2.5 字体族2.6 复合属性2.7 文本缩进2.8 文本对齐方式2.9 文本修饰线2.10 文字颜色 3、练习 1、谷歌调试前端代码 CommandOptionI或者F12打开开发者模式,选中元素栏Eleme…

Android 数据持久化之 SharedPreferences 存储

1、概述 SharedPreferences 是 Android 提供的一种轻量级存储类,用于存储简单的键值对数据。它非常适合保存应用的配置信息、用户偏好设置等。SharedPreferences支持数据类型String、int、float、long、boolean、Set(字符串集合)&#xff0c…

Secs/Gem第二讲 (基于secs4net项目的ChatGpt介绍)

好的,我们正式进入: 第二讲:深入 SECS4NET 项目结构——主机程序是怎么搭起来的? 关键词:项目结构、类图、通信类、事件处理、连接生命周期、异步机制 本讲目的 我们从源码入手,一步步搞懂: S…

【品铂科技】在高精度定位行业内的口碑怎么样?

1. ‌技术实力与行业认可‌ 公司自主研发的ABELL无线实时定位系统在复杂环境中(如工业、司法监狱等)展现出厘米级(5-10厘米)高精度定位能力,客户反馈系统稳定性强、抗干扰能力突出,成为行业技术标杆‌。参…

Spring Boot中@Valid 与 @Validated 注解的详解

Spring Boot中Valid 与 Validated 注解的详解 引言Valid注解功能介绍使用场景代码样例 Validated注解功能介绍使用场景代码样例 Valid与Validated的区别结论 引言 在Spring Boot应用中,参数校验是确保数据完整性和一致性的重要手段。Valid和Validated注解是Spring …

Spring中Bean的自动装配

1.自动装配的核心概念 定义: Bean的自动装配是Spring框架中用于自动满足Bean依赖的一种机制。通过自动装配,Spring容器会在应用上下文中为某个Bean寻找其依赖的Bean,从而减少手动配置的工作量。其核心目标是减少配置代码,通过类型…

jenkins 配置邮件问题整理

版本:Jenkins 2.492.1 插件: A.jenkins自带的, B.安装功能强大的插件 配置流程: 1. jenkins->系统配置->Jenkins Location 此处的”系统管理员邮件地址“,是配置之后发件人的email。 2.配置系统自带的邮件A…