JavaScript通过事件循环实现异步非阻塞，核心为调用栈、宏任务队列和微任务队列协同工作，确保同步代码优先执行，微任务在每个宏任务后立即清空，从而精准控制异步回调顺序。
JavaScript 的事件循环机制是理解异步编程的核心。由于 JavaScript 是单线程语言，它通过事件循环（Event Loop）实现非阻塞操作，使得诸如网络请求、定时器、DOM 事件等异步任务可以高效执行而不阻塞主线程。
JavaScript 单线程与异步需求
JavaScript 最初设计用于浏览器中操作 DOM，为了简化内存管理和避免复杂的状态冲突，采用了单线程模型。这意味着同一时间只能执行一个任务。然而，如果某个操作（如读取文件或发送网络请求）需要等待，程序不能因此“卡住”。
为了解决这个问题，JavaScript 引入了异步编程模型：
调用栈、任务队列与事件循环
事件循环的工作依赖于几个关键组成部分：调用栈（Call Stack）、回调队列（Callback Queue，也称任务队列）和微任务队列（Microtask Queue）。
立即学习“Java免费学习笔记（深入）”；
调用栈：记录当前正在执行的函数。每当函数被调用，就压入栈；执行完毕后弹出。
宏任务队列（Macrotask Queue）：存放异步宏任务的回调，例如：
- setTimeout 回调
- setInterval 回调
- I/O 操作（在 Node.js 中）
- UI 渲染事件
微任务队列（Microtask Queue）：存放更高优先级的任务，包括：
- Promise.then/catch/finally 回调
- MutationObserver（浏览器中观察 DOM 变化）
- queueMicrotask() 方法添加的任务
事件循环的基本流程如下：
- 主线程执行同步代码，函数依次进入调用栈
- 遇到异步操作时，交由浏览器或运行环境处理，并注册回调
- 当异步任务完成，其回调被推入对应的任务队列（宏任务或微任务）
- 当前调用栈清空后，事件循环检查微任务队列，执行所有微任务
- 然后从宏任务队列中取出一个任务执行
- 重复上述过程
微任务与宏任务的执行顺序
这是理解事件循环的关键点：每次事件循环迭代中，微任务队列会在每一个宏任务之后被清空。
来看一个经典例子：
console.log('1');
setTimeout(() => {
console.log('2');
}, 0);
Promise.resolve().then(() => {
console.log('3');
});
console.log('4');
输出结果是：1 → 4 → 3 → 2
- '1' 和 '4' 是同步代码，最先输出
- Promise 的 then 回调属于微任务，在当前宏任务结束后立即执行
- setTimeout 属于宏任务，放入下一个事件循环周期执行
async/await 与事件循环
async 函数本质上是 Promise 的语法糖，其内部的 await 会暂停函数执行，直到 Promise 解决，然后将后续代码作为微任务加入队列。
示例：
async function asyncFunc() {
console.log('a');
await console.log('b'); // 同步执行，但 await 后续是微任务
console.log('c');
}
console.log('x');
asyncFunc();
console.log('y');
输出：x → a → b → y → c
- asyncFunc 内部 'a' 和 'b' 是同步执行
- await 后的代码（'c'）会被包装成微任务
- 所以 'y'（同步代码）在 'c' 之前输出
基本上就这些。掌握事件循环有助于写出更可预测的异步代码，避免回调地狱，合理使用 Promise 和 async/await。不复杂但容易忽略细节。
