JavaScript通过事件循环实现异步非阻塞，宏任务与微任务按序执行，async/await基于Promise简化异步代码，微任务优先于宏任务执行，掌握机制可提升性能与可预测性。
JavaScript 是单线程语言，但它通过异步编程模型实现了高效的非阻塞操作。理解高级异步编程机制与事件循环（Event Loop）是掌握 JavaScript 并发处理能力的核心。
异步编程的演进：从回调到 async/await
早期 JavaScript 使用回调函数处理异步任务，比如定时器或 AJAX 请求：
setTimeout(() => { console.log("执行完成"); }, 1000);但多层嵌套容易导致“回调地狱”，代码难以维护。为解决这个问题，Promise 被引入：
fetch('/api/data') .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err));Promise 提供了链式调用和统一错误处理。进一步地，ES2017 引入 async/await，让异步代码更接近同步写法：
立即学习“Java免费学习笔记（深入）”；
async function getData() { try { const res = await fetch('/api/data'); const data = await res.json(); console.log(data); } catch (err) { console.error(err); }}async 函数始终返回 Promise，await 只能在 async 函数内部使用，它会暂停函数执行直到 Promise 解决，但不会阻塞主线程。
事件循环：驱动异步执行的核心机制
JavaScript 引擎只有一个主线程，所有同步代码立即执行，异步任务则被放入任务队列等待处理。事件循环持续检查调用栈是否为空，一旦空闲，就从队列中取出最早的任务推入栈中执行。
任务分为两类：
- 宏任务（Macro Task）：如 setTimeout、setInterval、I/O、UI 渲染、script 标签中的整体代码。
- 微任务（Micro Task）：如 Promise.then、MutationObserver、queueMicrotask。
每次事件循环迭代中，先执行当前宏任务，然后清空所有微任务队列，再进入下一个宏任务。这意味着微任务总是在下一个宏任务之前执行。
console.log('start');setTimeout(() => console.log('timeout'), 0);Promise.resolve().then(() => console.log('promise'));console.log('end');// 输出顺序：start → end → promise → timeout
深入理解微任务与宏任务的执行顺序
微任务的高优先级使其成为实现延迟但即时响应的关键。例如，在状态更新后立即执行回调：
function observe(cb) { queueMicrotask(cb);}observe(() => console.log('observed'));即使 setTimeout 设置为 0 毫秒，它仍属于宏任务，必须等待当前宏任务结束以及所有微任务执行完毕。因此 Promise.then 总比 setTimeout 更快执行。
注意：await 后的代码会被视为微任务的一部分。以下代码说明了这一点：
async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); // 这行实际上是微任务}async function async2() { console.log('async2');}console.log('script start');async1();console.log('script end');// 输出：script start → async1 start → async2 → script end → async1 end因为 await async2() 后的语句被包装成 then 回调，进入微任务队列。
实际应用中的高级异步模式
在真实项目中，常需控制并发或处理多个异步依赖。以下是几种实用模式：
- 并发控制：使用 Promise.allSettled 或 Promise.race 实现批量请求容错或超时控制。
- 防抖与节流：避免高频事件（如 resize、input）触发过多异步请求。
- 生成器 + Promise：虽较少见，但可用于复杂流程控制，如状态机或协程。
- AbortController：用于取消 fetch 请求等可中断操作，提升资源管理效率。
现代框架如 React 和 Vue 内部大量使用微任务来批量更新视图，确保 DOM 更新高效且一致。
基本上就这些。掌握异步编程不只是会用 async/await，更要理解背后事件循环如何调度任务。这决定了你能否写出高性能、可预测的 JavaScript 应用。
