JavaScript事件循环：宏任务与微任务解析

大家好，我们又见面了啊~本文《JavaScript事件循环：宏任务与微任务详解》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

JavaScript通过事件循环实现异步，宏任务（如setTimeout）每次执行一个，微任务（如Promise.then）在宏任务后立即清空队列；例如同步代码输出后先执行所有微任务再进入下一宏任务，因此script start、script end、Promise then、setTimeout依次输出。

JavaScript 是单线程语言，通过事件循环（Event Loop）实现异步操作的调度。在事件循环中，宏任务（MacroTask）和微任务（MicroTask）是两种不同优先级的任务队列，它们的执行顺序直接影响代码的行为。

宏任务与微任务的基本概念

宏任务包括整体代码块、setTimeout、setInterval、I/O 操作、UI 渲染等。每次事件循环迭代会执行一个宏任务。

微任务包括 Promise.then/catch/finally、MutationObserver、queueMicrotask 等。微任务在当前宏任务结束后立即执行，且会清空整个微任务队列。

事件循环的执行流程

每当一个宏任务执行完毕，JavaScript 引擎会检查是否存在待执行的微任务：

• 执行完当前宏任务后，立即执行所有可用的微任务
• 微任务会一个个执行，直到微任务队列为空
• 之后才开始下一个宏任务

这意味着微任务总是在宏任务之间“插队”执行，具有更高的优先级。

实际执行顺序示例

看下面这段代码：

console.log('script start');

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

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

console.log('script end');

输出顺序为：

1. script start
2. script end
3. Promise then
4. setTimeout

解释：同步代码（宏任务）先执行，遇到 setTimeout 将其加入宏任务队列，遇到 Promise.then 加入微任务队列。同步代码执行完后，先清空微任务队列（输出 'Promise then'），再进入下一轮事件循环处理宏任务（输出 'setTimeout'）。

微任务的连续执行特性

微任务的一个关键特点是：在当前宏任务结束后，引擎会持续执行微任务，直到队列为空。如果微任务中又注册了新的微任务，它们也会被追加并执行。

例如：

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

输出为：3 → 1 → 2。因为 console.log(3) 是同步代码，接着执行微任务输出 1，然后新生成的微任务输出 2，全部完成后才继续其他宏任务。

基本上就这些。理解宏任务和微任务的执行时机，有助于写出更可预测的异步代码，避免回调混乱或意外的执行顺序。

今天关于《JavaScript事件循环：宏任务与微任务解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！