JavaScript通过事件循环实现异步编程，核心是宏任务与微任务的执行顺序：先执行同步代码，再清空微任务队列，最后处理下一个宏任务。例如setTimeout属于宏任务，Promise.then属于微任务，因此输出顺序为start、end、promise、timeout。理解该机制可避免阻塞问题，优化异步逻辑。
JavaScript 是单线程语言，但它通过事件循环（Event Loop）机制实现了高效的异步编程。理解事件循环是掌握 JS 异步执行逻辑的关键。它决定了代码的执行顺序，尤其是在涉及回调、Promise、setTimeout 等场景时。
JS 单线程与异步需求
JavaScript 引擎在同一时间只能执行一个任务。如果所有操作都同步进行，遇到网络请求或定时器就会阻塞后续代码。为解决这个问题，JS 借助浏览器或 Node.js 的底层 API 提供异步能力。
例如，setTimeout 并不会立即执行回调，而是将任务交给浏览器的定时器模块，JS 主线程继续执行其他代码。当时间到达后，回调被放入任务队列，等待事件循环处理。
事件循环的核心机制
事件循环持续监听调用栈和任务队列。只要调用栈为空，它就会从任务队列中取出最早的任务推入调用栈执行。
关键组成部分包括：
- 调用栈（Call Stack）：记录当前正在执行的函数。
- 回调队列（Callback Queue）：存放已准备好执行的异步回调。
- 微任务队列（Microtask Queue）：优先级高于回调队列，用于 Promise、MutationObserver 等微任务。
- 事件循环主体：不断检查调用栈是否为空，并决定先处理微任务还是宏任务。
宏任务与微任务的执行顺序
不是所有异步任务都一样。JS 区分宏任务（Macrotask）和微任务（Microtask），它们在事件循环中的执行优先级不同。
常见的任务类型：
- 宏任务：setTimeout、setInterval、I/O、UI 渲染、script 标签整体代码。
- 微任务：Promise.then、queueMicrotask、MutationObserver。
执行规则是：每次完成一个宏任务后，会清空当前所有的微任务队列，然后再进入下一个宏任务。
示例帮助理解：
<script type="text/<a style=" color: text-decoration:underline title="javascript" href="https://www.php.cn/zt/15724.html" target="_blank">javascript"> console.log('start'); setTimeout(() => { console.log('timeout'); }, 0); Promise.resolve().then(() => { console.log('promise'); }); console.log('end'); </script>输出顺序是：start → end → promise → timeout。因为 Promise.then 是微任务，在当前宏任务结束后立即执行；而 setTimeout 属于宏任务，需等待下一轮事件循环。
实际开发中的影响与优化建议
了解事件循环有助于避免一些性能问题或逻辑错误。
- 避免在微任务中无限递归添加微任务（如连续 resolve Promise），可能导致主线程阻塞，无法处理其他任务。
- 需要延迟执行但不希望阻塞渲染时，可用 queueMicrotask；若希望给 UI 更新留出时间，应使用 setTimeout(..., 0)。
- 复杂异步流程建议使用 async/await，其本质仍是 Promise，遵循微任务规则。
基本上就这些。事件循环看似复杂，核心逻辑清晰：先执行同步代码，再处理微任务，最后进入下一个宏任务。掌握这一点，异步代码的行为就不再神秘了。
