JavaScript事件循环是单线程下实现异步的核心机制，通过调用栈、Web API、宏任务队列和微任务队列协作，先执行完同步代码，再清空微任务队列，最后执行一个宏任务，循环往复。
JavaScript 事件循环是单线程环境下实现异步行为的核心机制。它让 JS 能在不阻塞主线程的前提下处理定时器、网络请求、用户交互等耗时操作。异步编程之所以关键，是因为浏览器环境要求界面必须保持响应——如果所有代码都同步执行，页面就会卡死。
事件循环的基本流程
JS 引擎执行代码时，会维护几个关键结构：
- 调用栈（Call Stack）：同步任务按顺序执行，先进后出
- Web API（浏览器提供）：处理 setTimeout、fetch、addEventListener 等异步操作，它们不进调用栈，而是在后台运行
- 任务队列（Task Queue / Callback Queue）：存放由 Web API 完成后推入的宏任务（如 setTimeout 回调、事件处理函数）
- 微任务队列（Microtask Queue）：存放 Promise.then、MutationObserver 等微任务，优先级高于宏任务
事件循环每轮先清空当前调用栈，然后执行所有微任务（直到微任务队列为空），再取一个宏任务执行——这个过程不断重复。
宏任务与微任务的执行顺序差异
理解两者的优先级对写出可预测的异步逻辑至关重要：
立即学习“Java免费学习笔记（深入）”；
- 每次宏任务执行完，引擎会立即处理所有已排队的微任务，且不会被新宏任务打断
- Promise 链中的 .then/.catch 是微任务；setTimeout 回调是宏任务
- 例如：setTimeout(() => console.log(1)); Promise.resolve().then(() => console.log(2)); 输出一定是 2、1
为什么异步编程不可替代
JavaScript 运行在单线程环境中，但现实需求天然具备并发性：
- 用户点击、滚动、键盘输入需要即时响应，不能等一个 for 循环跑完才处理
- HTTP 请求可能耗时数百毫秒到数秒，同步等待会让整个页面冻结
- DOM 操作和渲染也依赖主线程，长时间同步脚本会跳过重绘帧，造成卡顿甚至“未响应”提示
异步模式（配合事件循环）让 JS 在保持语言简洁性的同时，能高效协调 I/O、渲染与用户交互。
常见误区与实践建议
很多问题源于对事件循环时机的误判：
- 不要用 while(true) 或超长同步循环模拟延迟——它会彻底阻塞事件循环
- 大量数据处理时，考虑用 setTimeout(fn, 0) 或 queueMicrotask 拆分任务，给渲染和其他事件留出时间片
- 避免在 Promise.then 中写大量同步计算；必要时用 requestIdleCallback 让浏览器在空闲时执行
- 注意 async/await 本质仍是基于 Promise 的语法糖，await 后的代码会被编译为微任务，不是立即执行
不复杂但容易忽略。
