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

JavaScript 是单线程语言,通过事件循环(Event Loop)实现异步操作的调度。理解宏任务(MacroTask)与微任务(MicroTask)的执行机制,是掌握 JS 异步编程的关键。
宏任务与微任务的基本概念
在 JavaScript 中,任务被分为两类:宏任务和微任务。
宏任务包括:
- 整体代码块(script)
- setTimeout 回调
- setInterval 回调
- I/O 操作
- UI 渲染
微任务包括:
立即学习“Java免费学习笔记(深入)”;
- Promise.then/catch/finally 回调
- MutationObserver 回调
- queueMicrotask()
- process.nextTick()(Node.js 环境)
每次事件循环中,JS 引擎会先执行一个宏任务,然后清空所有当前可用的微任务队列,再进入下一个宏任务。
事件循环的执行流程
事件循环遵循以下步骤:
- 执行同步代码(第一个宏任务)
- 遇到异步操作时,将其回调注册到对应的队列中(宏或微任务队列)
- 当前宏任务执行完毕后,立即执行微任务队列中的所有任务
- 微任务清空后,进行 UI 渲染(如果需要),然后开始下一个宏任务
这个“宏任务 → 所有微任务 → 下一个宏任务”的模式是理解异步执行顺序的核心。
实际执行顺序示例分析
看下面这段代码:
输出结果为:1 → 4 → 3 → 2
解释:
- '1' 和 '4' 是同步代码,属于当前宏任务,直接输出
- setTimeout 回调进入宏任务队列
- Promise.then 回调进入微任务队列
- 当前宏任务结束后,优先执行微任务:输出 '3'
- 微任务清空后,进入下一轮事件循环,执行 setTimeout 的回调:输出 '2'
微任务的优先级高于宏任务
微任务的一个关键特性是:它们会在当前宏任务结束后立即执行,不会等待下一次事件循环。
这意味着:
- 即使 setTimeout 设置为 0ms,它也会在所有微任务之后执行
- 多个微任务会按入队顺序连续执行,中间不会插入宏任务
- 使用 queueMicrotask 可以手动添加微任务,其执行时机与 Promise.then 相同
例如:
queueMicrotask(() => console.log('micro1')); setTimeout(() => console.log('macro'), 0); queueMicrotask(() => console.log('micro2'));输出顺序为:micro1 → micro2 → macro
基本上就这些。掌握宏任务与微任务的执行顺序,能帮助你准确预测异步代码的行为,避免常见的逻辑错误。不复杂但容易忽略。










