17370845950

JavaScript通过事件循环实现异步，宏任务与微任务决定执行顺序；2. 每个宏任务后立即执行所有微任务；3. 微任务优先级高于宏任务，如Promise.then在setTimeout前执行。

JavaScript 是单线程语言，通过事件循环（Event Loop）实现异步操作的调度。理解宏任务（MacroTask）与微任务（MicroTask）的执行机制，是掌握 JS 异步编程的关键。

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

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

宏任务包括：

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

微任务包括：

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

每次事件循环中，JS 引擎会先执行一个宏任务，然后清空所有当前可用的微任务队列，再进入下一个宏任务。

事件循环的执行流程

事件循环遵循以下步骤：

• 执行同步代码（第一个宏任务）
• 遇到异步操作时，将其回调注册到对应的队列中（宏或微任务队列）
• 当前宏任务执行完毕后，立即执行微任务队列中的所有任务
• 微任务清空后，进行 UI 渲染（如果需要），然后开始下一个宏任务

这个“宏任务 → 所有微任务 → 下一个宏任务”的模式是理解异步执行顺序的核心。

实际执行顺序示例分析

看下面这段代码：

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

输出结果为：1 → 4 → 3 → 2

解释：

• '1' 和 '4' 是同步代码，属于当前宏任务，直接输出
• setTimeout 回调进入宏任务队列
• Promise.then 回调进入微任务队列
• 当前宏任务结束后，优先执行微任务：输出 '3'
• 微任务清空后，进入下一轮事件循环，执行 setTimeout 的回调：输出 '2'

微任务的优先级高于宏任务

微任务的一个关键特性是：它们会在当前宏任务结束后立即执行，不会等待下一次事件循环。

这意味着：

• 即使 setTimeout 设置为 0ms，它也会在所有微任务之后执行
• 多个微任务会按入队顺序连续执行，中间不会插入宏任务
• 使用 queueMicrotask 可以手动添加微任务，其执行时机与 Promise.then 相同

例如：

输出顺序为：micro1 → micro2 → macro

基本上就这些。掌握宏任务与微任务的执行顺序，能帮助你准确预测异步代码的行为，避免常见的逻辑错误。不复杂但容易忽略。