JavaScript 任务队列详解:Event Loop、宏任务与微任务
JavaScript 任务队列详解:Event Loop、宏任务与微任务
在 JavaScript 的世界里,异步编程是一个至关重要的概念。JavaScript 采用 单线程 运行方式,但能够处理异步任务,这一切都要归功于 事件循环(Event Loop) 机制。本文将深入剖析 JavaScript 的 任务队列(Task Queue),包括 宏任务(Macrotask) 和 微任务(Microtask),并结合示例解析代码的执行顺序。

1. 事件循环(Event Loop)
Event Loop 是 JavaScript 运行时的核心机制,负责调度 同步任务 和 异步任务。
执行顺序:
- 执行 同步代码(同步代码会直接进入调用栈
Call Stack运行)。 - 执行 微任务队列(Microtask Queue) 里的所有任务。
- 执行 宏任务队列(Macrotask Queue) 里的一个任务。
- 回到 第 2 步,检查是否有新的 微任务,如果有,则执行所有微任务。
- 循环往复,直到所有任务执行完成。
2. Web APIs 与异步任务
在 JavaScript 代码执行过程中,遇到 异步任务(如 setTimeout、Promise、fetch 请求等)时,并不会阻塞主线程,而是将其交给 Web APIs 处理。等任务完成后,相应的回调函数会被放入 任务队列,等待执行。
常见的 Web APIs 任务:
- 定时器(
setTimeout、setInterval) - 网络请求(
fetch、XMLHttpRequest) - DOM 事件(
click、mousemove) - I/O 操作(Node.js)
这些任务完成后,会按照一定的优先级放入 任务队列,由 事件循环 调度执行。
3. 宏任务(Macrotask) vs. 微任务(Microtask)
JavaScript 的 任务队列 分为 宏任务队列 和 微任务队列,它们的主要区别如下:
3.1 宏任务(Macrotask)
- 宏任务(Macrotask) 是相对 微任务(Microtask) 而言的较大单位任务。
- 常见的宏任务包括:
setTimeoutsetIntervalsetImmediate(Node.js)requestAnimationFrameI/O操作(如fs.readFile)- 事件回调(如
click、mousemove)
- 执行顺序: 每次执行一个 宏任务 之后,会立即执行 所有微任务。
3.2 微任务(Microtask)
- 微任务(Microtask) 是比宏任务优先级更高的异步任务。
- 常见的微任务包括:
Promise.thenMutationObserverqueueMicrotaskprocess.nextTick(Node.js 专有)
- 执行顺序: 每次执行完同步代码或宏任务后,都会立即执行 所有 微任务。
4. 执行顺序示例解析
来看一个经典的示例,分析 JavaScript 任务队列的执行顺序:
console.log("script start");setTimeout(() => {console.log("setTimeout");
}, 0);Promise.resolve().then(() => {console.log("promise1");
}).then(() => {console.log("promise2");
});console.log("script end");
执行流程解析
- 同步代码 依次执行:
console.log("script start")✅console.log("script end")✅
- ``** 回调** 进入 宏任务队列。
- ``** 回调** 进入 微任务队列。
- 同步代码执行完毕后,执行微任务队列:
console.log("promise1")✅console.log("promise2")✅
- 执行宏任务队列:
console.log("setTimeout")✅
最终输出结果
script start
script end
promise1
promise2
setTimeout
5. 另一个复杂案例解析
console.log("A");setTimeout(() => {console.log("B");
}, 0);Promise.resolve().then(() => {console.log("C");return Promise.resolve("D");
}).then((msg) => {console.log(msg);
});console.log("E");
执行流程
- 同步代码执行:
A、E - ``** 进入宏任务队列**
- ``** 进入微任务队列**
- 执行微任务:
CD
- 执行宏任务:
B
最终输出结果
A
E
C
D
B
6. 总结
Event Loop 执行顺序
- 执行同步代码(主线程上的任务)。
- 执行所有微任务(Microtask Queue)。
- 执行一个宏任务(Macrotask Queue)。
- 回到步骤 2,执行所有新的微任务。
- 继续执行宏任务队列中的下一个任务。
优先级对比
- 微任务 > 宏任务(微任务会在每个宏任务前全部执行完)。
- 多个微任务 会按照添加顺序执行。
- 多个宏任务 也是按照添加顺序执行。
掌握 事件循环(Event Loop) 的工作原理,有助于优化 JavaScript 代码的执行流程,避免常见的异步问题,提高程序的执行效率。
希望这篇文章能帮助你更好地理解 JavaScript 的 任务队列机制!
相关文章:
JavaScript 任务队列详解:Event Loop、宏任务与微任务
JavaScript 任务队列详解:Event Loop、宏任务与微任务 在 JavaScript 的世界里,异步编程是一个至关重要的概念。JavaScript 采用 单线程 运行方式,但能够处理异步任务,这一切都要归功于 事件循环(Event Loopÿ…...
VScode运行后出现黑窗口
原文链接:VScode运行出黑窗口 1.安装插件:C/C Compile Run 2.快捷键【CtrlShiftp】,点击【首选项:打开用户设置】...
华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南
本文记录 在 华为昇腾 910B(65GB) * 8 上 部署 DeepSeekR1 蒸馏系列模型(14B、32B)全过程与测试结果。 NPU:910B3 (65GB) * 8 (910B 有三个版本 910B1、2、3) 模型:DeepSeek-R1-Distill-Qwen-14B、DeepSeek…...
vue3项目实践心得-多次渲染同一svg + 理解v-if、transition、dom加载之间的顺序
🧡🧡需求🧡🧡 未点击查看答案按钮时,步骤3面板未展示内容(v-if控制) 点击查看答案按钮后,通过graphviz绘制并展示状态转换图,渲染在步骤2中,同时步骤3的v-…...
【实战项目】BP神经网络识别人脸朝向----MATLAB实现
(꒪ꇴ꒪ ),Hello我是祐言QAQ我的博客主页:C/C语言,数据结构,Linux基础,ARM开发板,网络编程等领域UP🌍快上🚘,一起学习,让我们成为一个强大的攻城狮࿰…...
java数据结构_二叉树_5.5
2.7 二叉树的相关操作 1. size方法 获取二叉树元素个数 思路:遍历思路,在前面文章中,前序 中序 后序遍历的时候,会把树中的所有结点遍历一次。可以添加一个计数器,遍历一个结点就加一次。 于是有如下代码࿱…...
Deepseek-R1推理模型API接入调用指南 ChatGPT Web Midjourney Proxy 开源项目接入Deepseek教程
DeepSeek-R1和OpenAI o1模型都属于推理任务模型,两个模型各有优点:DeepSeek-R1 在后训练阶段大规模使用了强化学习技术,在仅有极少标注数据的情况下,极大提升了模型推理能力。在数学、代码、自然语言推理等任务上,性能…...
计算机网络(4)TCP断开
1、TCP 断开连接四次挥手流程 TCP 断开连接是通过四次挥手方式。双方都可以主动断开连接,断开连接后主机中的「资源」将被释放。 2、为什么 TIME_WAIT 等待的时间是 2MSL? 3、为什么需要 TIME_WAIT 状态? 4、拔掉网线后, 原本的 …...
科技云报到:科技普惠潮流渐起,“开源”将带我们走向何方?
科技云报到原创。 开源决定软件未来,已成为全球技术和产业创新的主导模式之一。“开源”思想的诞生,可以说是计算机发展史中极具理想主义和浪漫主义色彩的一页,是科技自由与技术极客思想的延伸。 数字化浪潮奔涌,从软件开发的底…...
【论文笔记】On Generative Agents in Recommendation
论文信息 标题: On Generative Agents in Recommendation 会议: SIGIR 24 —— CCF-A 作者: An Zhang, Yuxin Chen, Leheng Sheng 文章链接: On Generative Agents in Recommendation 代码链接: On Generative Agents…...
使用 Spring Boot 和 Canal 实现 MySQL 数据库同步
文章目录 前言一、背景二、Canal 简介三、主库数据库配置1.主库配置2.创建 Canal 用户并授予权限 四.配置 Canal Server1.Canal Server 配置文件2.启动 Canal Server 五.开发 Spring Boot 客户端1. 引入依赖2. 配置 Canal 客户端3. 实现数据同步逻辑 六.启动并测试七.注意事项八…...
vue3 在element-plus表格使用render-header
在vue2中 element表格render-header 源码是有返回h()函数的 在vue3 element-plus 表格源码 render-header函数没有返回h函数了 所以需要用render-header方法中创建虚拟DOM节点的话需要引用h方法 <el-table-column header-align"right" align"right" …...
算法——结合实例了解Minimax算法(极小化极大算法)
计算机科学中最有趣的事情之一就是编写一个人机博弈的程序。有大量的例子,最出名的是编写一个国际象棋的博弈机器。但不管是什么游戏,程序趋向于遵循一个被称为Minimax算法,伴随着各种各样的子算法在一块。本篇将简要介绍 minimax 算法&#…...
使用 DeepSeek 生成商城流程图
步骤 1.下载 mermaid 2.使用 DeepSeek 生成 mermaid 格式 3.复制内容到 4.保存备用。 结束。...
什么是GraphQL?
如果你在寻找漏洞利用方式,请参考下面的文章 GraphQL API 漏洞 |网络安全学院 GitHub - swisskyrepo/PayloadsAllTheThings: A list of useful payloads and bypass for Web Application Security and Pentest/CTF GraphQL 查询(Query) GraphQL 既不是…...
Spring Boot 的约定优于配置,你的理解是什么?
Spring Boot 的“约定优于配置”:开发效率的革命性提升 在软件开发中,开发者常常需要花费大量时间编写繁琐的配置文件,尤其是在传统的 Java EE 或 Spring 框架中。而 Spring Boot 通过“约定优于配置”(Convention Over Configur…...
C#开源大型商城系统之B2B2C+O2O一体化_OctShop
一、应用背景与引言 在当今数字化商业的浪潮中,电子商务平台的构建成为众多企业拓展业务、提升竞争力的关键举措。C# 语言以其强大的功能、高效的性能以及良好的开发框架支持,在商城系统开发领域占据着重要地位。独立开源的大型 C# 商城系统,…...
gitte远程仓库修改后,本地没有更新,本地与远程仓库不一致
问题 :gitte远程仓库修改后,本地没有更新,本地与远程仓库不一致 现象: [cxqiZwz9fjj2ssnshikw14avaZ rpc]$ git push Username for https://gitee.com: beihangya Password for https://beihangyagitee.com: To https://gitee.c…...
【对比】Pandas 和 Polars 的区别
Pandas vs Polars 对比表 特性PandasPolars开发语言Python(Cython 实现核心部分)Rust(高性能系统编程语言)性能较慢,尤其在大数据集上(内存占用高,计算效率低)极快,利用…...
el-input无法输入0.0001的小数,自动转换为0在vue3中的bug
今天遇到个bug,el-input中只能输入0.1或者输入0.1再加上00成为0.001,不能直接输入0.001,否则自动转换为0。需要去掉 v-model.number后面的 .number 源代码: <el-table-column label"实发数量" width"120"…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门  5.2 IPsec隧道模式(Tunne…...
python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生?别怕,教你轻松起飞! 最近Homebrew更新至最新版,每次执行 brew 命令时都会自动从官方地址 https://formulae.…...
