JavaScript通过事件循环实现异步非阻塞，执行顺序为：同步代码 → 微任务 → 宏任务；例如console.log('1')、Promise.then、setTimeout(0)的输出顺序是1→4→3→2，因微任务在宏任务后立即清空。
JavaScript 是单线程语言，这意味着它同一时间只能处理一个任务。但现实中的应用往往需要处理异步操作，比如网络请求、定时器、用户交互等。为了解决异步执行的问题，JavaScript 引入了事件循环（Event Loop）机制，它是 JavaScript 实现非阻塞行为的核心。
JavaScript 运行环境与执行栈
JavaScript 代码在执行时，依赖于一个叫做调用栈（Call Stack）的结构。每当函数被调用，就会被推入栈顶；函数执行完毕后，从栈中弹出。这个过程是同步的，遵循“后进先出”原则。
例如：
function foo() {console.log("foo");
}
function bar() {
foo();
}
bar(); // 调用顺序：bar → foo → 执行输出 → 弹出
但如果遇到异步操作，比如 setTimeout 或 fetch，它们不会立即执行回调，而是交由浏览器的其他模块处理，避免阻塞主线程。
立即学习“Java免费学习笔记（深入）”；
任务队列：宏任务与微任务
事件循环依赖两个主要的任务队列：宏任务队列（Macro Task Queue） 和 微任务队列（Micro Task Queue）。
- 宏任务 包括：整体 script 代码、setTimeout、setInterval、I/O、UI 渲染等。
- 微任务 包括：Promise.then/catch/finally 回调、MutationObserver、queueMicrotask 等。
关键区别在于执行时机：
- 每次事件循环迭代中，只从宏任务队列中取出一个任务执行。
- 宏任务执行完后，会清空当前所有可执行的微任务。
- 微任务会“插队”，在当前宏任务结束后立即全部执行，不给其他宏任务机会。
事件循环执行流程
事件循环的基本流程如下：
- 从宏任务队列中取一个任务执行（如 script 主代码或 setTimeout 回调）。
- 执行过程中，遇到异步操作，将其回调注册到对应的任务队列（宏或微）。
- 当前宏任务执行完毕。
- 检查微任务队列，将所有可执行的微任务依次执行，直到清空。
- 进行 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 回调进入微任务队列。
- 当前宏任务（script）执行完后，优先执行微任务（输出 '3'）。
- 下一轮事件循环才执行 setTimeout 的回调（输出 '2'）。
实际开发中的注意事项
理解事件循环有助于避免一些常见的陷阱：
- 不要假设 setTimeout(fn, 0) 会立即执行，它至少要等当前所有同步和微任务完成。
- 大量微任务可能阻塞渲染，因为它们会在每个宏任务后被清空。
- async/await 基于 Promise，其 await 后的代码相当于 then 回调，属于微任务。
例如：
async function async1() {console.log('A');
await async2();
console.log('B'); // 这部分是微任务
}
async function async2() {
console.log('C');
}
console.log('D');
async1();
console.log('E');
输出为：D → A → C → E → B，因为 'B' 在 await 后，被包装成微任务执行。
基本上就这些。掌握事件循环，能更好理解 JS 的执行顺序，写出更可靠的异步代码。
