事件循环先执行宏任务，再清空微任务队列。同步代码如console.log立即执行，setTimeout等宏任务进入宏任务队列，Promise.then等微任务进入微任务队列。当前宏任务结束后，依次执行所有微任务，之后再取下一个宏任务。async/await基于Promise，await后续代码被视为微任务。例如：script start→async1 start→async2→script end→async1 end→timeout，因await将“async1 end”推入微任务队列，在本轮宏任务结束后执行。
JavaScript 的事件循环机制是理解异步编程的关键。很多人在处理 setTimeout、Promise、async/await 时会感到困惑，原因就在于没有搞清楚宏任务（Macrotask）和微任务（Microtask）的执行顺序。下面我们就来清晰地梳理这套机制。
事件循环基础：什么是宏任务与微任务？
JavaScript 是单线程语言，所有代码都在一个主线程上执行。为了实现异步操作而不阻塞主线程，JS 引入了事件循环机制。这个机制依赖两个任务队列：
- 宏任务队列（Macrotask Queue）：也叫任务队列，用于存放宏任务。常见的宏任务包括：setTimeout、setInterval、I/O 操作、UI 渲染、script 标签中的整体代码。
- 微任务队列（Microtask Queue）：优先级高于宏任务。常见的微任务包括：Promise.then/catch/finally、queueMicrotask、MutationObserver（浏览器环境）。
每次事件循环开始时，先执行当前宏任务中的同步代码，然后清空微任务队列，再取下一个宏任务执行，如此反复。
执行顺序规则：宏任务与微任务如何调度？
事件循环遵循以下流程：
- 从宏任务队列中取出一个任务执行（比如 script 主代码块或 setTimeout 回调）。
- 执行过程中遇到同步代码，直接运行。
- 遇到微任务（如 Promise.then），将其加入微任务队列。
- 当前宏任务执行完毕后，立即清空微任务队列中所有任务，按先进先出顺序执行。
- 微任务清空后，进入下一轮事件循环，取下一个宏任务执行。
关键点是：每完成一个宏任务，就会把所有当前可用的微任务执行完。
实际例子：看懂输出顺序
来看一段经典代码：
console.log('start');
setTimeout(() => {
console.log('timeout');
}, 0);
Promise.resolve().then(() => {
console.log('promise');
});
console.log('end');
输出结果为：
start end promise timeout
解释：
- “start” 是同步代码，最先输出。
- setTimeout 是宏任务，被放入宏任务队列。
- Promise.then 是微任务，进入微任务队列。
- “end” 是同步代码，紧接着输出。
- 当前宏任务（主 script）执行完，开始执行微任务，输出 “promise”。
- 微任务清空后，进入下一轮事件循环，执行 setTimeout 回调，输出 “timeout”。
async/await 与微任务的关系
async 函数返回一个 Promise，而 await 后面的表达式完成后，其后续代码会被当作微任务处理。
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(() => {
console.log('timeout');
}, 0);
async1();
console.log('script end');
输出为：
script start async1 start async2 script end async1 end timeout
注意 “async1 end” 在 “script end” 之后输出，是因为 await 相当于把后面的代码包装成 Promise.then，属于微任务。
基本上就这些。掌握宏任务和微任务的执行时机，就能准确预测异步代码的输出顺序。不复杂但容易忽略细节。
