JavaScript事件循环详解

本篇文章向大家介绍《JavaScript事件循环解析》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

JavaScript通过事件循环实现异步，先执行同步代码，再处理回调；宏任务（如setTimeout）每轮取一个，微任务（如Promise.then）在宏任务后立即清空。输出顺序为1→4→3→2，因微任务优先级高；但滥用微任务可能阻塞UI更新或引发“微任务风暴”，需合理选择执行时机。

JavaScript 是单线程语言，通过事件循环（Event Loop）实现异步操作的处理。理解事件循环和微任务队列是掌握 JavaScript 异步执行机制的关键。

事件循环的基本原理

JavaScript 引擎在执行代码时，会先运行同步任务，这些任务在主线程上按顺序执行。当遇到异步操作（如 setTimeout、Promise、DOM 事件等），它们会被挂起并交给浏览器的其他模块处理。一旦这些异步任务完成，对应的回调函数就会被放入任务队列中，等待事件循环调度执行。

事件循环持续检查调用栈是否为空。如果为空，就从任务队列中取出一个任务推入调用栈执行。这个过程不断重复，形成“循环”。

宏任务与微任务的区别

在事件循环中，任务分为两类：宏任务（macrotask）和微任务（microtask）。

• 宏任务 包括：整体 script 代码、setTimeout、setInterval、I/O、UI 渲染等。
• 微任务 包括：Promise.then/catch/finally 回调、MutationObserver、queueMicrotask 等。

每次事件循环迭代中，只会从宏任务队列中取一个任务执行。但在该宏任务执行结束后，会清空当前所有的微任务队列——也就是说，所有已存在的微任务会连续执行，直到微任务队列为空，才会进行下一轮宏任务。

微任务队列的执行时机

微任务的关键特性是在**每个宏任务执行完后立即执行**。这意味着微任务具有更高的优先级。

例如：

console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

Promise.resolve().then(() => {
  console.log('3');
});

console.log('4');

输出顺序是：1 → 4 → 3 → 2。

解释：

• '1' 和 '4' 是同步代码，最先输出。
• Promise 的 then 回调是微任务，在当前宏任务结束后立即执行。
• setTimeout 是宏任务，要等到下一个事件循环周期才执行。

实际应用中的注意事项

由于微任务执行时机早于下一个宏任务，滥用微任务可能导致问题：

• 长时间清空微任务队列会阻塞 UI 更新，因为渲染属于宏任务。
• 递归使用 queueMicrotask 或 Promise 可能导致“微任务风暴”，使页面无响应。
• 在某些场景下，想让代码“稍后执行但不阻塞渲染”，应使用 setTimeout 而非微任务。

基本上就这些。搞清楚宏任务和微任务的执行顺序，就能更好预测异步代码的行为。

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