JavaScript微任务与宏任务详解

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《JavaScript微任务与宏任务解析》，涉及到，有需要的可以收藏一下

微任务在宏任务后立即执行且优先级高，如Promise回调；宏任务包括setTimeout、I/O等。事件循环先执行同步代码，再处理微任务队列，最后进入下一宏任务。例如，console.log('1')、Promise.then输出'3'、setTimeout输出'2'的顺序为1→4→3→2，因微任务在当前宏任务结束后立即执行。

在JavaScript中，理解微任务（microtask）与宏任务（macrotask）是掌握事件循环（Event Loop）机制的关键。由于JavaScript是单线程语言，它通过事件循环来协调代码的执行顺序，尤其是在处理异步操作时。微任务和宏任务正是这个机制中的两个核心概念。

什么是宏任务和微任务？

JavaScript中的任务被分为两大类：宏任务和微任务。它们的主要区别在于执行时机和优先级。

宏任务包括：

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

微任务包括：

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

每次事件循环开始时，会先执行一个宏任务，完成后立即清空当前所有的微任务队列，然后再进入下一个宏任务。

事件循环的执行流程

事件循环的基本流程如下：

1. 执行同步代码（属于初始宏任务）
2. 遇到异步任务时，将其放入对应的宏任务或微任务队列
3. 当前宏任务执行完毕后，检查微任务队列
4. 执行所有当前可用的微任务（按入队顺序）
5. 执行完所有微任务后，进行一次UI渲染（如果需要）
6. 从宏任务队列中取出下一个任务，重复上述过程

关键点在于：每个宏任务执行完后，都会“清空”当前所有的微任务。

实际例子说明执行顺序

看下面这段代码：

输出顺序是：1 → 4 → 3 → 2

解释：

• '1' 和 '4' 是同步代码，直接输出
• setTimeout 回调是宏任务，进入宏任务队列
• Promise.then 是微任务，进入微任务队列
• 当前宏任务（主脚本）执行完后，立即执行微任务（输出'3'）
• 然后才轮到下一个宏任务 setTimeout（输出'2'）

微任务的高优先级特性

微任务的一个重要特点是：它们在每个宏任务之后立即执行，且具有高优先级。这意味着：

• 即使在微任务中又添加了新的微任务，也会被继续执行，直到队列为空
• 这可能导致“微任务饥饿”，即宏任务迟迟得不到执行
• 因此避免在微任务中无限递归添加微任务

例如使用 queueMicrotask 的递归调用：