JavaScript事件循环全解析

一分耕耘，一分收获！既然都打开这篇《JavaScript事件循环详解》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

事件循环先执行同步代码，再处理异步任务。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引入了事件循环 + 任务队列的机制，通过异步回调的方式实现“看似并发”的效果。

关键点在于：所有同步代码先执行，异步任务被挂起，等到条件满足后，将其回调函数推入任务队列，由事件循环决定何时执行。

宏任务与微任务：两种任务队列

事件循环并非只维护一个队列，而是区分了宏任务（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运行时协调任务执行的调度机制。掌握宏任务与微任务的区别，就能准确预测代码执行顺序，写出更可靠的异步逻辑。

文中关于异步,单线程,宏任务,微任务,JavaScript事件循环的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript事件循环全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。