事件循环先执行同步代码，再处理异步任务。1. 同步任务依次执行，输出 start 和 end；2. setTimeout 回调进入宏任务队列；3. Promise.then 回调进入微任务队列；4. 当前宏任务结束，清空微任务队列，输出 promise；5. 下一轮事件循环执行宏任务，输出 timeout。宏任务包括 script、setTimeout、I/O 等，微任务包括 Promise.then、queueMicrotask 等。每次事件循环先执行一个宏任务，再清空所有微任务，然后进行 UI 渲染（浏览器）。理解该机制可避免对异步行为的误解，如 setTimeout(0) 并非立即执行，Vue 的 nextTick 利用微任务确保 DOM 更新前回调。
JavaScript的事件循环（Event Loop）机制是理解其异步编程模型的核心。很多人在使用setTimeout、Promise或async/await时，只知道它们能实现“延迟执行”或“非阻塞”，但不清楚背后是如何调度的。要真正掌握JavaScript的运行逻辑，必须深入事件循环的工作原理。
JavaScript单线程与异步的矛盾
JavaScript是一门单线程语言，意味着同一时间只能执行一个任务。但浏览器环境需要处理用户交互、网络请求、定时器等耗时操作，如果这些操作都同步阻塞，页面将无法响应。
为解决这个问题，JavaScript引入了事件循环 + 任务队列的机制，通过异步回调的方式实现“看似并发”的效果。
关键点在于：所有同步代码先执行，异步任务被挂起，等到条件满足后，将其回调函数推入任务队列，由事件循环决定何时执行。
立即学习“Java免费学习笔记（深入）”；
宏任务与微任务：两种任务队列
事件循环并非只维护一个队列，而是区分了宏任务（Macrotask）和微任务（Microtask）。
常见的宏任务包括：- 整体script代码
- setTimeout/setInterval 回调
- I/O 操作（如Ajax）
- UI渲染（浏览器层面）
- setImmediate（Node.js）
- Promise.then/catch/finally 回调
- MutationObserver（DOM变化监听）
- queueMicrotask()
- process.nextTick（Node.js）
执行顺序规则是：每次事件循环迭代，先执行一个宏任务，然后清空所有当前微任务队列，再进入下一个宏任务。
事件循环执行流程详解
以一段典型代码为例，说明事件循环如何工作：
console.log('start');
setTimeout(() => {
console.log('timeout');
}, 0);
Promise.resolve().then(() => {
console.log('promise');
});
console.log('end');
输出顺序是：start → end → promise → timeout。
原因如下：
- 同步代码依次执行，打印 start 和 end
- setTimeout 回调进入宏任务队列
- Promise.then 回调进入微任务队列
- 当前宏任务（整体script）执行完毕，事件循环检查微任务队列，发现有一个Promise回调，立即执行，打印 promise
- 微任务队列清空后，进入下一轮事件循环，取出宏任务 setTimeout 的回调，打印 timeout
实际开发中的影响与注意事项
理解事件循环有助于避免一些“奇怪”的行为。
比如，在Vue或React中，数据更新后的DOM更新时机依赖于微任务队列。Vue的 nextTick 就是基于 Promise 实现的微任务延迟，确保在数据变更后、DOM更新前执行回调。
另一个常见误区是认为 setTimeout(fn, 0) 会立即执行。实际上它只是将任务加入宏任务队列，必须等待当前所有同步和微任务完成才会执行，因此存在延迟。
在性能敏感场景，应避免大量微任务堆积，因为它们会在当前宏任务结束后连续执行，可能阻塞渲染。
基本上就这些。事件循环不是复杂算法，而是JavaScript运行时协调任务执行的调度机制。掌握宏任务与微任务的区别，就能准确预测代码执行顺序，写出更可靠的异步逻辑。
