深入JavaScript_微任务与宏任务-js教程-PHP中文网

深入JavaScript_微任务与宏任务

紅蓮之龍

发布： 2025-11-23 09:24:07

原创

630人浏览过

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

深入javascript_微任务与宏任务

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

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

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

宏任务包括：

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

微任务包括：

立即学习“Java免费学习笔记（深入）”；

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

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

事件循环的执行流程

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

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

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

实际代码示例分析

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

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

输出结果是：

Onlook

专为前端设计师和开发者打造的视觉编辑工具

108

查看详情

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 实现递归则会让出执行权，允许浏览器渲染。

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

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