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

server/2025/3/18 13:02:26/

宏任务与微任务的区别

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/server/175962.html

相关文章

Java常用设计模式

设计模式是软件开发中解决常见问题的模板或指南。Java中的23种设计模式通常被分为三大类:创建型模式(Creational Patterns)、结构型模式(Structural Patterns)和行为型模式(Behavioral Patterns&#xff09…

python脚本实现服务器内存和cpu使用监控,并记录日志,可以设置阈值和采样频率

Python 脚本,实现以下功能: 按日期自动生成日志文件(例如 cpu_mem_20231001.csv)当 CPU 或内存超过阈值时触发记录独立记录报警事件(保存到 alert.log)支持自定义阈值和监控间隔 脚本代码 import psutil …

HCIA-PPP

一、基本概念 1、定义:PPP 协议是一种数据链路层协议,在两点之间建立直接通信连接。常用于拨号上网、宽带接入、路由器间通信等。 2、核心功能: ①链路控制:建立、配置和测试数据链路连接。 ②网络层协议支持:支持…

【密码学——基础理论与应用】李子臣编著 第四章 SM4分组密码算法 课后习题

免责声明 这里都是自己搓或者手写的。 里面不少题目感觉有问题或者我的理解有偏颇,请大佬批评指正! 不带思考抄作业的请自动退出,我的并非全对,仅仅提供思维! SM4的python实现 基于AI生成的SM4加密算法-CSDN博客 题…

【云原生技术】容器技术的发展史

一、Jail 时代 容器不是一个新概念或者新技术,很早就有了,只是近几年遇到了云计算,整个技术 被彻底引爆了。 1.1 1979年 贝尔实验室发明 chroot chroot系统调用是在 1979 年开发第 7 版 Unix 期间引入的。贝尔实验室在 Unix V7 的 开发过程…

【STM32】USART串口协议串口外设-学习笔记

串口协议 通信接口 通信的目的:将一个设备的数据传送到另一个设备,扩展硬件系统。比如STM32芯片内部集成了很多功能模块,像定时器计数、PWM输出、AD采集等等。这些都是芯片内部的电路,这些电路的配置寄存器,数据寄存…

C++ 类和对象----构造函数

一、构造函数 概念&#xff1a; 在平时初始化&#xff0c;都要调用Init公有方法来初始化&#xff0c;调用比较频繁&#xff0c;因此&#xff0c;构造函数就是在对象创建时&#xff0c;就将信息设置进去。 没有构造函数前&#xff1a; #include<iostream> using namesp…

【蓝桥杯速成】| 5.动态规划

学习资料 代码随想录 动态规划五部曲 确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举例推导dp数组 简单题 509. 斐波那契数 - 力扣&#xff08;LeetCode&#xff09; 70. 爬楼梯 - 力扣&#xff08;LeetCode&#…