当前位置:首页 > 文章列表 > 文章 > 前端 > 宏任务不会阻塞微任务执行。在 JavaScript 的事件循环中,宏任务(如 `setTimeout`、`setInterval`、`setImmediate`)和微任务(如 `Promise.then()`、`MutationObserver`)是分开处理的。宏任务会在当前执行栈清空后执行,而微任务会在宏任务之后、下一个宏任务之前执行。因此,宏任务不会直接阻塞微任务的执行,但微任务会在宏任务完成
宏任务不会阻塞微任务执行。在 JavaScript 的事件循环中,宏任务(如 `setTimeout`、`setInterval`、`setImmediate`)和微任务(如 `Promise.then()`、`MutationObserver`)是分开处理的。宏任务会在当前执行栈清空后执行,而微任务会在宏任务之后、下一个宏任务之前执行。因此,宏任务不会直接阻塞微任务的执行,但微任务会在宏任务完成
在 JavaScript 的事件循环机制中,宏任务和微任务扮演着不同的角色,理解它们的执行顺序对于编写高性能、响应迅速的代码至关重要。宏任务(如 `setTimeout`、`setInterval`)不会阻塞微任务(如 `Promise.then()`、`MutationObserver`)的执行,因为事件循环会优先处理微任务队列。具体来说,事件循环先执行一个宏任务,然后立即清空微任务队列,所有微任务会不间断执行完毕,之后浏览器可能进行UI渲染,最后才进入下一个宏任务周期。这种机制确保了异步操作的状态更新更及时、可预测,避免竞态条件和UI延迟问题。掌握宏任务和微任务的执行原理,能帮助开发者更好地控制异步流程,提升代码的可维护性和性能,从而构建出更流畅的用户体验。
JavaScript中宏任务不会阻塞微任务,因为事件循环机制规定微任务会在当前宏任务结束后立即优先执行。1. 事件循环先执行当前宏任务;2. 然后清空微任务队列,所有微任务会不间断执行完毕;3. 浏览器环境可能进行UI渲染;4. 最后进入下一个宏任务周期。例如,在setTimeout(宏任务)中创建的Promise.then(微任务)会在当前宏任务结束后立即执行,而不是等待下一个宏任务。这种机制确保了异步操作的状态更新更及时、可预测,避免竞态条件和UI延迟问题。常见宏任务包括主脚本、setTimeout、I/O操作、DOM事件等;常见微任务包括Promise.then、queueMicrotask、MutationObserver等。理解该机制有助于编写高性能、响应性强的代码,并提升异步流程的可控性。
JavaScript中,宏任务并不会阻塞微任务。恰恰相反,微任务会在当前宏任务执行完毕后,以及下一个宏任务开始之前,被优先、完整地执行。这其实是JavaScript事件循环(Event Loop)机制中一个非常核心且容易让人混淆的优先级规则。理解这一点,对于我们编写高性能、可预测的异步代码至关重要。

解决方案
要深入理解这个问题,我们需要把目光投向JavaScript的事件循环机制。简单来说,事件循环是JavaScript运行时处理异步操作的核心机制。它不断地检查调用栈(Call Stack),当调用栈清空后,就会从任务队列中取出任务来执行。但这里面,任务被分成了两大类:宏任务(Macrotask)和微任务(Microtask),它们有着不同的优先级。
一个典型的事件循环周期是这样的:

- 执行当前宏任务:这通常是主脚本代码的执行,或者从宏任务队列中取出的一个任务(比如一个
setTimeout
的回调函数,或者一个UI渲染任务)。 - 清空微任务队列:当前宏任务执行完毕后,事件循环会立即检查微任务队列。如果队列中有任务,它会一个接一个地,不间断地执行所有微任务,直到微任务队列完全清空。
- UI渲染(浏览器环境特有):在浏览器中,清空微任务队列后,可能会进行一次UI渲染。
- 进入下一个宏任务周期:完成上述步骤后,事件循环才会从宏任务队列中取出下一个宏任务来执行,然后重复整个过程。
这意味着,如果你在一个setTimeout
(宏任务)的回调函数里创建了一个Promise(其.then()
是微任务),那么这个Promise的.then()
回调会立即执行,在下一个setTimeout
的回调函数被调度执行之前。这也就是为什么我们说微任务具有更高的优先级,它们会在每个宏任务执行结束后“插队”执行。
看个例子:

console.log('脚本开始'); setTimeout(() => { console.log('宏任务1:setTimeout 0ms'); Promise.resolve().then(() => { console.log('微任务1:Promise.then inside setTimeout'); }); }, 0); Promise.resolve().then(() => { console.log('微任务2:Promise.then outside setTimeout'); }); setTimeout(() => { console.log('宏任务2:setTimeout 10ms'); }, 10); console.log('脚本结束');
这段代码的输出顺序会是:
脚本开始 脚本结束 微任务2:Promise.then outside setTimeout 宏任务1:setTimeout 0ms 微任务1:Promise.then inside setTimeout 宏任务2:setTimeout 10ms
从输出可以看出,主脚本执行完毕后,首先执行了所有“待处理”的微任务(微任务2
),然后才轮到第一个宏任务(宏任务1
)。而宏任务1
执行完后,它内部产生的微任务(微任务1
)又会立即执行,而不是等到下一个宏任务(宏任务2
)开始。这清晰地展示了微任务在宏任务之间的“插队”机制。
为什么微任务会优先于宏任务执行?
这其实是JavaScript设计者为了解决特定异步场景而做出的选择。在我看来,微任务的存在主要是为了提供一种更细粒度的异步控制,尤其是在处理状态变化和高优先级回调时。
想想看,如果Promise的.then()
回调也是宏任务,那么一个Promise在resolve之后,它的回调可能需要等到下一个事件循环周期才能执行。这期间,如果有很多其他宏任务排队,就可能导致Promise的回调被延迟,从而引发状态不一致或竞态条件。例如,你可能期望一个异步操作的结果能立即被处理,并更新UI或内部状态,而如果中间被其他不相关的宏任务打断,就可能出现用户界面“闪烁”或数据不同步的问题。
微任务的这种“在当前宏任务结束后立即清空”的特性,确保了Promise链式调用、MutationObserver的回调等能够在当前执行上下文的“紧密”后续中完成。它提供了一种“我需要尽快处理这个,但在当前同步代码执行完之后”的机制。这有点像你在完成一项主要工作(宏任务)后,会立即处理一些紧密相关的、不能拖延的小事(微任务),然后再去考虑下一个完全独立的主要工作。这种设计让异步编程中的状态管理变得更加可预测和可靠。
常见的宏任务和微任务有哪些?
了解不同类型的任务有助于我们更好地规划异步代码的执行顺序。
常见的宏任务 (Macrotasks) 包括:
- 主脚本代码 (Initial Script Execution):这是整个程序的起点,也是一个大的宏任务。
setTimeout()
和setInterval()
的回调:这是最常见的定时器,它们的回调函数会被推入宏任务队列。- I/O 操作:例如网络请求(在浏览器中,XHR的回调通常是宏任务)、文件读写(Node.js中的
fs
模块回调)。 - UI 渲染事件:在浏览器中,DOM事件(如
click
、load
、resize
等)的回调,以及浏览器本身的渲染任务。 MessageChannel
:一个允许创建新消息队列的API,其消息回调也是宏任务。requestAnimationFrame
:虽然它与UI渲染紧密相关,通常在渲染前执行,但从宏观上看,它也是一个独立的任务调度点。
常见的微任务 (Microtasks) 包括:
Promise.then()
、.catch()
和.finally()
的回调:Promise是微任务最典型的代表,它的回调函数会在Promise状态改变后被推入微任务队列。queueMicrotask()
:这是一个专门用于调度微任务的API,允许开发者显式地将一个函数放入微任务队列。MutationObserver
的回调:用于监听DOM变化的API,其回调函数也是微任务。process.nextTick()
(Node.js 特有):在Node.js环境中,process.nextTick()
的回调会在当前操作完成后立即执行,甚至比其他微任务优先级更高,但在浏览器中没有对应概念。
理解这些分类,能帮助你预测代码的执行时机,尤其是在涉及到复杂异步流程和第三方库时。
理解任务队列对异步编程有什么实际意义?
深入理解宏任务和微任务的优先级,绝不仅仅是理论知识,它对我们日常的异步编程有着非常实际且深远的影响。
首先,它决定了代码的执行顺序和可预测性。在处理复杂的异步操作链时,比如多个Promise的串联和并行,或者与定时器、DOM事件的混合使用,如果你不清楚微任务和宏任务的执行规则,就很容易写出行为不符合预期的代码,甚至引入难以调试的bug。例如,你可能想在某个DOM更新后立即执行一个操作,如果用setTimeout(..., 0)
,它可能会在下一次UI渲染后才执行,而如果用Promise.resolve().then()
或者queueMicrotask()
,则能确保在当前渲染周期前完成。
其次,它直接影响到用户界面的响应性和性能。长时间运行的同步代码会阻塞主线程,导致UI卡顿。但即使是异步代码,如果调度不当,也可能影响用户体验。通过将耗时操作拆分成小块的宏任务(例如,使用setTimeout
将一个大数据处理任务分成多步),可以在每步之间插入微任务执行和UI渲染的机会,从而保持界面的流畅响应。微任务的高优先级也意味着,那些需要即时反馈的逻辑(如Promise状态更新)能够迅速执行,避免了不必要的延迟。
再者,在处理共享状态和竞态条件时,任务队列的知识是你的利器。微任务的“原子性”执行(即在一个宏任务结束后,所有微任务会一次性执行完毕)确保了某些依赖于最新状态的操作能够可靠地完成。比如,当你连续修改一个共享变量,并希望在每次修改后都立即触发一个副作用时,Promise的链式调用(基于微任务)就能提供比setTimeout
(宏任务)更强的即时性和一致性保证。
总的来说,事件循环和任务队列的知识,就像是JavaScript异步编程的“地图”和“指南针”。掌握它,你就能更自信地驾驭异步世界的复杂性,编写出更健壮、更高效且更易于维护的代码。这不仅仅是避免“宏任务阻塞微任务”这种误解,更是理解JavaScript运行时如何“思考”异步、如何调度任务的底层逻辑。
到这里,我们也就讲完了《宏任务不会阻塞微任务执行。在 JavaScript 的事件循环中,宏任务(如 `setTimeout`、`setInterval`、`setImmediate`)和微任务(如 `Promise.then()`、`MutationObserver`)是分开处理的。宏任务会在当前执行栈清空后执行,而微任务会在宏任务之后、下一个宏任务之前执行。因此,宏任务不会直接阻塞微任务的执行,但微任务会在宏任务完成后立即执行。》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于的知识点!

- 上一篇
- Selenium抓取Google地图评分与评论技巧

- 下一篇
- 无JS实现弹窗的5种方法详解
-
- 文章 · 前端 | 1小时前 |
- Petite-Vue数据绑定与响应式教程
- 451浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- mouseenter重复触发问题解决与优化方法
- 316浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- LiveServer无法加载Canvas解决办法
- 461浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- KendoGrid选列:行选中条件与状态同步技巧
- 257浏览 收藏
-
- 文章 · 前端 | 2小时前 | CSS教程 css函数怎么用
- CSSrotate()旋转效果详解
- 230浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- Div文本溢出加滚动条解决方法
- 231浏览 收藏
-
- 文章 · 前端 | 2小时前 | CSS教程
- CSS蒙版使用教程详解
- 139浏览 收藏
-
- 文章 · 前端 | 3小时前 | CSS 图片 响应式 position object-fit
- CSS固定图片位置与大小设置教程
- 151浏览 收藏
-
- 文章 · 前端 | 3小时前 | HTML样式
- HTMLAMP加速移动页面教程
- 158浏览 收藏
-
- 文章 · 前端 | 3小时前 | CSS CSS教程
- CSS阴影效果添加教程
- 265浏览 收藏
-
- 文章 · 前端 | 3小时前 |
- 延迟任务详解:setTimeout与setInterval作用机制
- 186浏览 收藏
-
- 文章 · 前端 | 3小时前 | redis Node.js cookie 会话管理 express-session
- Node.js会话管理实战指南
- 425浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 515次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 499次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 484次学习
-
- AI Mermaid流程图
- SEO AI Mermaid 流程图工具:基于 Mermaid 语法,AI 辅助,自然语言生成流程图,提升可视化创作效率,适用于开发者、产品经理、教育工作者。
- 801次使用
-
- 搜获客【笔记生成器】
- 搜获客笔记生成器,国内首个聚焦小红书医美垂类的AI文案工具。1500万爆款文案库,行业专属算法,助您高效创作合规、引流的医美笔记,提升运营效率,引爆小红书流量!
- 818次使用
-
- iTerms
- iTerms是一款专业的一站式法律AI工作台,提供AI合同审查、AI合同起草及AI法律问答服务。通过智能问答、深度思考与联网检索,助您高效检索法律法规与司法判例,告别传统模板,实现合同一键起草与在线编辑,大幅提升法律事务处理效率。
- 838次使用
-
- TokenPony
- TokenPony是讯盟科技旗下的AI大模型聚合API平台。通过统一接口接入DeepSeek、Kimi、Qwen等主流模型,支持1024K超长上下文,实现零配置、免部署、极速响应与高性价比的AI应用开发,助力专业用户轻松构建智能服务。
- 901次使用
-
- 迅捷AIPPT
- 迅捷AIPPT是一款高效AI智能PPT生成软件,一键智能生成精美演示文稿。内置海量专业模板、多样风格,支持自定义大纲,助您轻松制作高质量PPT,大幅节省时间。
- 788次使用
-
- 优化用户界面体验的秘密武器:CSS开发项目经验大揭秘
- 2023-11-03 501浏览
-
- 使用微信小程序实现图片轮播特效
- 2023-11-21 501浏览
-
- 解析sessionStorage的存储能力与限制
- 2024-01-11 501浏览
-
- 探索冒泡活动对于团队合作的推动力
- 2024-01-13 501浏览
-
- UI设计中为何选择绝对定位的智慧之道
- 2024-02-03 501浏览