宏任务与微任务对比【前端异步】
目录
- 简介
- 微任务与宏任务的基本概念
- 宏任务(Macrotasks)
- 微任务(Microtasks)
- 宏任务示例
- 微任务示例
- 微任务与宏任务的执行时序
- 结论
简介
在JavaScript的异步编程中,理解
事件循环(Event Loop)是至关重要的。事件循环机制确保了JavaScript的单线程能够处理高并发的异步任务。
微任务(Microtasks)和宏任务(Macrotasks)是事件循环中的两种主要任务类型。
本文将介绍这两种任务的区别,并通过代码示例深入探讨它们的工作机制,帮助您掌握前端异步编程的核心概念。

微任务与宏任务的基本概念
JavaScript的事件循环由任务队列组成,任务队列分为两种:
微任务队列和宏任务队列。每个宏任务执行完毕后,JavaScript引擎会先执行所有微任务队列中的任务,然后再执行下一个宏任务。
宏任务(Macrotasks)
宏任务通常指的是那些会在事件循环的单独迭代中执行的任务,它们包括:
- 整体脚本执行:整个JavaScript文件或脚本标签作为首次宏任务执行。
- setTimeout 和 setInterval:设定的定时器到期后,会作为宏任务被添加到宏任务队列。
- setImmediate (Node.js 特有):在Node.js中,
setImmediate用于在当前事件循环结束时执行。 - I/O:包括从网络、文件系统等进行的输入/输出操作。
- UI 渲染:浏览器将计算好的DOM更新渲染到屏幕上。
- requestAnimationFrame:用于动画的帧同步,会在下一次重绘之前执行。
微任务(Microtasks)
微任务在当前宏任务完成后立即执行,它们包括:
- Promise 回调:
Promise的.then(),.catch(), 和.finally()方法。 - MutationObserver:用于监听DOM树变化的API,当DOM变化时触发。
- queueMicrotask:一个标准的API,允许开发者显式地将函数排入微任务队列。
- process.nextTick (Node.js):在Node.js中,process.nextTick 用于延迟函数的执行直到当前操作结束,但它会在当前执行栈清空之后,下一次事件循环之前执行。
宏任务示例
尽管
setTimeout的延迟时间设置为0,它仍然是一个宏任务,会在当前宏任务执行完毕后,下一个事件循环迭代中执行。
console.log('Script start');setTimeout(function() {console.log('setTimeout');
}, 0);console.log('Script end');
输出:
Script start
Script end
setTimeout
微任务示例
Promise的then回调是微任务,它们会在当前宏任务的所有代码执行完毕后立即执行。
console.log('Script start');Promise.resolve().then(function() {console.log('promise1');
}).then(function() {console.log('promise2');
});console.log('Script end');
输出:
Script start
Script end
promise1
promise2
微任务与宏任务的执行时序
在这个示例中,我们可以看到
Promise的微任务在当前宏任务的代码执行完毕后立即执行,而两个setTimeout的宏任务则在下一个事件循环迭代中执行。
console.log('Script start');setTimeout(function() {console.log('setTimeout');
});Promise.resolve().then(function() {console.log('promise1');
});setTimeout(function() {console.log('setTimeout2');
}, 0);console.log('Script end');
输出:
Script start
Script end
promise1
setTimeout2 (next event loop iteration)
setTimeout
结论
- 微任务和宏任务是JavaScript异步编程的基石。
- 微任务提供了一种更快的异步处理方式,通常用于
快速连续的异步操作,而宏任务则包括了更广泛的异步事件。
相关文章:
宏任务与微任务对比【前端异步】
目录 简介微任务与宏任务的基本概念宏任务(Macrotasks)微任务(Microtasks)宏任务示例微任务示例微任务与宏任务的执行时序 结论 简介 在JavaScript的异步编程中,理解事件循环(Event Loop)是至关…...
Autogen和LangGraph对比
AutoGen和LangGraph是两种用于构建多代理AI系统的框架,它们各有特点和优势。以下是对这两个框架的详细对比: 共同点 都支持创建多个AI代理进行协作都可以与大语言模型(LLM)集成都允许定义代理之间的交互流程都支持使用工具和外部资源来增强代理能力 AutoGen的特点 灵活的代…...
uniapp vue3微信小程序如何获取dom元素
在网上很多人说可以通过下面两种形式获取到指定dom元素 // 定义ref <div ref"box"></div>//1通过this.$refs获取dom元素 this.$refs.box//2通过ref(null)获取dom元素 let box ref(null)第一种方式在vue2中是可以获取到的,但是在vue3 setup中…...
Mongodb索引使用限制
学习mongodb,体会mongodb的每一个使用细节,欢迎阅读威赞的文章。这是威赞发布的第85篇mongodb技术文章,欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题,欢迎在文章下面点个赞,或者关…...
阿里云通义千问开源两款语音基座模型分别是SenseVoice和CosyVoice
阿里巴巴近期发布了开源语音大模型项目FunAudioLLM,该项目包含了两个核心模型:SenseVoice和CosyVoice。可以精准多语言识别并且进行语音克隆。 SenseVoice:精准多语言识别与情感辨识 SenseVoice主要致力于高精度多语言语音识别、情感辨识和…...
第11章 规划过程组(二)(11.10制订进度计划)
第11章 规划过程组(二)11.10制订进度计划,在第三版教材第402~404页; 文字图片音频方式 第一个知识点:主要输出 1、进度基准 经过批准的进度模型,只有通过正式的变更控制程序才能进行变更,用作…...
如何在Spring Boot中集成Hibernate
如何在Spring Boot中集成Hibernate 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将探讨如何在Spring Boot项目中集成Hibernate。Hibernate是一个广泛…...
Grind 75 | 3. merge two sorted lists
Leetcode 21. 合并两个有序链表 题目链接 思路: 和归并排序中 merge 部分一致 两个指针分别指向 2 个链表头每次选小的那个加入 res 中,对应指针后移一位;重复步骤2,直至一个指针到链表末尾将另一个剩余的全部 copy 到 res 中,链…...
MyBatis(35)如何在 MyBatis 中实现软删除
实现软删除在MyBatis中通常意味着更新数据库记录的某个字段,而不是真正地从数据库中删除记录。这个字段(通常是is_deleted、deleted或status等)被用来标记记录是否被删除。下面我们将详细探讨如何在MyBatis中实现软删除,包括数据库…...
C# 预处理器指令
C# 预处理器指令 概述 C# 预处理器指令是编译器在编译代码之前处理的指令。这些指令用于控制编译过程,包括条件编译、编译指令的定义和取消等。预处理器指令以 # 开头,不包含在代码的执行逻辑中,仅在编译阶段起作用。 常用的预处理器指令 1. #define 和 #undef #define…...
Perl编译器架构:前端与后端的精细分工
🔧 Perl编译器架构:前端与后端的精细分工 Perl作为一种高级、通用的编程语言,其编译器的架构设计对于性能和灵活性至关重要。Perl编译器由前端和后端组成,它们各自承担着不同的职责。本文将深入解析Perl编译器前端和后端的区别&a…...
14-63 剑和诗人37 - 分布式系统中的数据访问设计
在分布式系统中,跨服务和数据库提供统一、可靠的数据访问至关重要,但又极具挑战性。微服务和数据库的拓扑结构为分布、缓存、复制和同步带来了复杂性。 让我们探索有助于解决这些复杂性并简化构建强大、高性能分布式系统的常见数据访问模式。 概述 我们将通过示例介绍…...
大数据基础:Hadoop之MapReduce重点架构原理
文章目录 Hadoop之MapReduce重点架构原理 一、MapReduce概念 二、MapReduce 编程思想 2.1、Map阶段 2.2、Reduce阶段 三、MapReduce处理数据流程 四、MapReduce Shuffle 五、MapReduce注意点 六、MapReduce的三次排序 Hadoop之MapReduce重点架构原理 一、MapReduce概…...
人工智能算法工程师(中级)课程3-sklearn机器学习之数据处理与代码详解
大家好,我是微学AI,今天给大家分享一下人工智能算法工程师(中级)课程3-sklearn机器学习之数据处理与代码详解。 Sklearn(Scikit-learn)是一个基于Python的开源机器学习库,它提供了简单有效的数据挖掘和数据分析工具。Sklearn包含了…...
华为机考真题 -- 螺旋数字矩阵
题目描述: 疫情期间,小明隔离在家,百无聊赖,在纸上写数字玩。他发明了一种写法:给出数字 个数 n 和行数 m(0 < n ≤ 999,0 < m ≤ 999),从左上角的 1 开始&#x…...
防御笔记第四天(持续更新)
1.状态检测技术 检测数据包是否符合协议的逻辑顺序;检查是否是逻辑上的首包,只有首包才会创建会话表。 状态检测机制可以选择关闭或则开启 [USG6000V1]firewall session link-state tcp ? check Indicate link state check [USG6000V1]firewall ses…...
HUAWEI VRRP 实验
实验要求:在汇聚交换机上SW1和SW2中实施VRRP以保证终端网关的高可靠性(当某一个网关设备失效时,其他网关设备依旧可以实现业务数据的转发。) 1.在SW1和SW2之间配置链路聚合,以提高带宽速度。 2.PC1 访问远端网络8.8.8.8 ,优先走…...
领取serv00免费虚拟主机
参考 教程地址【免费serv00虚拟机SSH登录搭建网站】 领取地址 领到了 SSH登录要魔法,网页登录不用 轻松搭建自己的静态网站 soulio.serv00.net 网页加载速度还可以。 ...
云开发技术的壁纸小程序源码,无需服务期无需域名
1、本款小程序为云开发版本,不需要服务器域名 2、文件内有图文搭建教程,小白也不用担心不会搭建。 3、本程序反应速度极快,拥有用户投稿、积分系统帮助各位老板更多盈利。 4、独家动态壁纸在线下载,给用户更多的选择 5、最新版套图…...
基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui
背景和意义 随着互联网和数字媒体行业的快速发展,视频网站作为重要的内容传播平台之一,用户量和内容丰富度呈现爆发式增长。本研究旨在设计并实现一种基于Python的哔哩哔哩数据分析系统,采用Flask框架、MySQL数据库以及echarts数据可视化技术…...
Text Control DS Server 5.0 新增了依赖注入服务,允许插件直接与文档处理功能配合使用
启用插件对文档处理 API 的访问权限2026年3月24日Text Control DS Server 5.0 新增了依赖注入服务,允许插件直接与文档处理功能配合使用。TX Text Control DS Server 是一款服务器端文档处理解决方案,旨在将文档生成、编辑和转换功能集成到现代应用程序中…...
OpenClaw插件开发入门:为Qwen3-32B镜像编写天气查询技能
OpenClaw插件开发入门:为Qwen3-32B镜像编写天气查询技能 1. 为什么需要自定义技能? 去年冬天,我经常需要同时查看多个城市的天气来规划差旅行程。每次手动打开天气网站、输入城市名、对比数据的过程让我不胜其烦。直到我发现OpenClaw可以通…...
Matlab图表标注全攻略:希腊字母、线型与标记符号的灵活运用
Matlab图表标注全攻略:希腊字母、线型与标记符号的灵活运用 科研图表是数据可视化的核心载体,而Matlab作为工程与科学计算领域的标杆工具,其绘图系统的精细控制能力往往被低估。许多研究者止步于默认图表样式,却不知只需掌握几个关…...
CANoe CAPL实战:putvalue和getvalue函数在汽车总线测试中的高效应用
CANoe CAPL实战:putvalue和getvalue函数在汽车总线测试中的高效应用 在汽车电子测试领域,CANoe作为主流的测试工具,其CAPL编程语言的高效运用直接决定了测试效率和质量。对于经常与CAN总线打交道的测试工程师来说,putvalue和getva…...
BGP路由优化:配置、故障排除与网络性能提升
BGP路由优化:配置、故障排除与网络性能提升在复杂的网络环境中,尤其是在涉及多个自治系统(AS)互联互通的场景下,边界网关协议 BGP (Border Gateway Protocol) 作为互联网的关键路由协议,直接影响着网络稳定…...
OpenClaw安全指南:GLM-4.7-Flash环境下的权限控制与风险规避
OpenClaw安全指南:GLM-4.7-Flash环境下的权限控制与风险规避 1. 为什么需要特别关注OpenClaw的安全配置? 去年夏天,我在调试一个自动整理照片的OpenClaw任务时,差点酿成大祸。脚本误将整个/Users/Shared目录识别为待处理文件夹&…...
百川2-13B-4bits+OpenClaw组合优化:5招降低Token消耗
百川2-13B-4bitsOpenClaw组合优化:5招降低Token消耗 1. 为什么需要关注Token消耗? 当我第一次将百川2-13B-4bits模型与OpenClaw对接时,就被Token消耗的速度震惊了。一个简单的文件整理任务,前后不到10分钟的操作,竟然…...
自定义游戏环境:开源启动器PCL2-CE的多场景解决方案
自定义游戏环境:开源启动器PCL2-CE的多场景解决方案 【免费下载链接】PCL-CE PCL2 社区版,可体验上游暂未合并的功能 项目地址: https://gitcode.com/gh_mirrors/pc/PCL-CE PCL2-CE社区版作为一款开源的Minecraft启动工具,通过模块化设…...
Jetson Nano上Archiconda3安装避坑指南:从下载到换源完整流程
Jetson Nano开发者必备:Archiconda3高效配置与疑难排错全攻略 在边缘计算和嵌入式AI开发领域,Jetson Nano凭借其出色的能效比和紧凑体积,已成为众多开发者的首选平台。而Archiconda3作为专为ARM架构优化的Python环境管理工具,能够…...
Chat模型微调实战:基于AI辅助开发的高效调参指南
最近在做一个智能客服项目,需要基于一个预训练的Chat模型进行微调,以适应我们特定的业务对话场景。一开始,我天真地以为微调就是改改学习率、跑几轮训练那么简单,结果很快就陷入了“调参地狱”。手动调整超参数不仅耗时࿰…...
