深入J*aScript_微任务与宏任务_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

深入J*aScript_微任务与宏任务

2025-11-23

浏览次数：次

返回列表

J*aScript通过事件循环处理异步操作，宏任务（如setTimeout、script整体代码）与微任务（如Promise.then、queueMicrotask）分属不同队列。每次事件循环先执行一个宏任务，随后清空所有当前微任务，微任务具有更高优先级。例如，同步代码执行后，微任务回调（如Promise.then）会在当前宏任务结束后立即执行，而setTimeout等宏任务需等待下一轮循环。嵌套场景中，宏任务产生的微任务会在该宏任务结束后立即执行，导致输出顺序可能不符合直觉。由于微任务持续占用主线程，递归调用queueMicrotask或Promise.then可能引发“微任务风暴”，阻塞UI渲染，影响性能。相比之下，setTimeout能让出执行权，允许页面更新。理解宏任务与微任务的执行顺序，有助于准确预测异步代码行为，避免逻辑错误，提升程序可靠性与性能。

深入javascript_微任务与宏任务

J*aScript 是单线程语言，所有任务在一个主线程上执行。为了高效处理异步操作，比如定时器、DOM 事件、网络请求等，J*aScript 引入了事件循环（Event Loop）机制，而微任务（Microtasks）与宏任务（Macrotasks）是其中的核心概念。理解它们的执行顺序和区别，对掌握异步编程至关重要。

宏任务与微任务的基本概念

在 J*aScript 中，任务被分为两大类：宏任务和微任务。

宏任务包括：

整体 script 代码
setTimeout 回调
setInterval 回调
I/O 操作
UI 渲染
postMessage

微任务包括：

Promise.then/catch/finally 回调
MutationObserver 回调
queueMicrotask()
process.nextTick()（Node.js 环境）

每次事件循环迭代中，会先执行一个宏任务，然后清空当前所有的微任务队列。微任务具有更高的优先级，一旦有微任务进入队列，就会在当前宏任务结束后立即执行，直到微任务队列为空。

事件循环的执行流程

事件循环的工作方式可以概括为以下步骤：

从宏任务队列中取出一个任务执行
执行过程中遇到异步操作，将其回调注册到对应的微任务或宏任务队列
当前宏任务执行完毕后，立即检查微任务队列
执行所有当前存在的微任务（按先进先出顺序）
微任务清空后，进行 UI 渲染（如果需要）
进入下一轮事件循环，取下一个宏任务

这意味着：一个宏任务之后，一定会把所有当前可用的微任务全部执行完，才开始下一个宏任务。

实际代码示例分析

看一段经典代码来理解执行顺序：

console.log('script start'); setTimeout(() => { console.log('setTimeout'); }, 0); Promise.resolve().the

n(() => { console.log('Promise then'); }); console.log('script end');

输出结果是：

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

script start script end Promise then setTimeout

解释：

“script start” 和 “script end” 是同步代码，属于初始宏任务
setTimeout 回调被放入宏任务队列
Promise.then 被放入微任务队列
初始宏任务执行完后，立即执行微任务：输出 “Promise then”
微任务清空后，进入下一轮事件循环，执行 setTimeout 的回调

再看一个嵌套例子：

console.log(1); setTimeout(() => { console.log(2); Promise.resolve().then(() => { console.log(3); }); }, 0); Promise.resolve().then(() => { console.log(4); setTimeout(() => { console.log(5); }, 0); }); console.log(6);

输出为：

1 6 4 2 3 5

原因：

1 和 6 是同步输出
第一个 Promise.then 进入微任务，输出 4
微任务执行完，第一轮结束
第二轮宏任务执行 setTimeout 输出 2，同时注册新的微任务（输出 3）
该宏任务结束后，执行微任务输出 3
接着执行后续 setTimeout（输出 5）

微任务的高优先级影响性能

由于微任务会在每个宏任务结束后立即执行，如果不断产生新的微任务，可能会阻塞主线程，导致页面无法及时渲染。

例如递归使用 queueMicrotask 或 Promise.then，会造成“微任务风暴”：

let count = 0; function recursiveMicrotask() { if (count > 5) return; count++; console.log('microtask', count); queueMicrotask(recursiveMicrotask); } recursiveMicrotask();

这段代码会连续执行 6 次微任务，期间不会有任何 UI 更新或其他宏任务介入。相比之下，使用 setTimeout 实现递归则会让出执行权，允许浏览器渲染。

基本上就这些。掌握微任务与宏任务的区别，能帮助你预测代码执行顺序，避免异步逻辑中的陷阱，写出更可靠、高效的 J*aScript 代码。

以上就是深入J*aScript_微任务与宏任务的详细内容，更多请关注其它相关文章！

# 下一轮 # 湘潭网站建设价格表 # 开原推广网站制作 # 标题截取seo # 兰州seo权重主要方式 # 澄迈县网站建设直供 # 给几个好点的网站推广 # 网络推广营销博主排名表 # 福州城市营销推广招聘网 # 公司网站建设代理公司 # 台州抖音seo投放 # 相比之下 # 管理器 # 更高 # javascript # 清空 # 结束后 # 如何使用 # 会在 # 回调 # 递归 # 区别 # mac # 浏览器 # node # node.js # js # java