JavaScript通过事件循环处理异步,先执行同步代码,再按“宏任务→清空微任务→渲染→下一宏任务”顺序循环;微任务如Promise回调在当前宏任务后立即执行,优先级高于setTimeout等宏任务。

JavaScript 是单线程语言,通过事件循环(Event Loop)实现异步操作的处理。理解宏任务(Macro Task)与微任务(Micro Task)是掌握异步执行顺序的关键。
宏任务与微任务的基本概念
在 JavaScript 中,所有任务被分为两类:宏任务和微任务。
宏任务包括:
- 整体代码块(script)
- setTimeout 回调
- setInterval 回调
- I/O 操作
- UI 渲染
微任务包括:
立即学习“Java免费学习笔记(深入)”;
- Promise.then/catch/finally 回调
- MutationObserver
- queueMicrotask()
- process.nextTick()(Node.js 环境)
事件循环的执行流程
每次事件循环开始时,会先执行同步代码。之后,按照以下顺序处理异步任务:
- 执行一个宏任务(例如 script 主线程代码)
- 执行该宏任务中产生的所有可执行微任务
- 进行 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
微任务的优先级高于宏任务
微任务会在当前宏任务结束后、下一轮宏任务开始前全部执行完毕。这意味着微任务具有更高的响应优先级,适合用于需要快速响应的操作,比如 Promise 的链式调用。
例如,在 Vue 或 React 的响应式更新中,也利用了微任务机制来批量异步更新视图,保证性能和一致性。
基本上就这些。掌握宏任务与微任务的执行顺序,能帮助你更好理解异步代码的运行逻辑,避免出现意料之外的行为。不复杂但容易忽略。










