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"…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
