JavaScript 事件循环中微任务怎么在宏任务之前执行-js教程-PHP中文网

javascript 引擎在执行完当前宏任务（如脚本主代码、settimeout回调）后，会立即清空整个微任务队列，确保所有微任务在下一个宏任务开始前全部执行完毕。要实现这一机制，开发者只需将需要优先执行的逻辑包装在 promise.then、mutationobserver 或 queuemicrotask 中，这些任务会被推入微任务队列，并在当前调用栈清空后、ui渲染前被依次处理。

JavaScript 事件循环中微任务怎么在宏任务之前执行

如何创建并触发一个微任务

创建一个微任务最简单的方式是返回一个 Promise 并挂载 .then 处理器，或者使用原生的 queueMicrotask API。当代码执行到这些语句时，对应的回调函数不会立即运行，而是被放入微任务队列等待。例如，在同步代码中调用 Promise.resolve().then(...)，其回调将在同步代码结束后立即执行，早于任何定时器或 I/O 回调。

JavaScript 事件循环中微任务怎么在宏任务之前执行

console.log('Start');

// 创建一个微任务
Promise.resolve().then(() => {
  console.log('Microtask 1');
});

queueMicrotask(() => {
  console.log('Microtask 2');
});

console.log('End');

上述代码的输出顺序为：Start、Microtask 1、Microtask 2、End。这证明了微任务在当前同步代码块结束后的执行优先级高于后续的宏任务（如 setTimeout）。

微任务与宏任务的执行时机对比

为了验证微任务确实在宏任务之前执行，我们可以将微任务与 setTimeout 这种典型的宏任务进行对比。即使 setTimeout 的延迟时间设置为 0，它也会被放入宏任务队列，必须等待当前事件循环阶段的所有微任务清空后才会被执行。这意味着，无论定时器设置多短，只要存在未完成的微任务，宏任务就必须排队等待。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

JavaScript 事件循环中微任务怎么在宏任务之前执行

console.log('Script Start');

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

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

console.log('Script End');

该程序的输出结果为：Script Start、Script End、Promise (Micro)、Timeout (Macro)。可以看到，尽管 setTimeout 被设定为 0ms，它依然排在微任务之后执行。这是因为 setTimeout 的回调属于宏任务，而 Promise.then 的回调属于微任务。事件循环在检查宏任务队列之前，必须先处理完当前的微任务队列。

微任务队列耗尽对 UI 渲染的影响

由于微任务在每次宏任务执行完毕后立即运行，且没有固定的数量限制，如果微任务队列中不断产生新的微任务，会导致当前宏任务一直无法释放控制权给浏览器的主线程用于 UI 更新和渲染。这种现象被称为“饥饿”效应。例如，在一个长列表渲染或复杂计算中，如果每个步骤都通过 queueMicrotask 触发下一步操作，浏览器将无法插入帧绘制，导致页面卡顿甚至无响应。因此，虽然微任务优先级高，但应避免在微任务中执行可能导致无限递归或大量新微任务产生的逻辑，必要时可改用 requestAnimationFrame 或分片处理来让出主线程。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南