一、微任务的定义与来源
什么是JavaScript的微任务
在JavaScript的事件循环模型中，微任务是当前任务结束后需要尽快执行的一组任务。它们属于任务队列中的一类，专门用于在进入下一轮宏任务之前完成一些紧急的工作。微任务的执行时机通常在当前执行栈清空后、进入下一个事件循环轮次之前完成。
从设计角度来看，微任务为异步操作提供了更高的确定性：它们会在同一轮事件循环中尽快执行，避免造成额外的延迟。这意味着微任务的执行往往被视为比普通回调更优先的任务，用于确保状态在接续的代码执行前保持一致。
微任务的常见来源
当前最常见的微任务来源包括：Promise 的 then/catch/finally 回调、queueMicrotask 注册的回调、以及某些环境提供的额外微任务源（如 MutationObserver、Node.js 的 process.nextTick 在不同实现中的行为差异）等。这些来源都会把回调放入微任务队列，等待事件循环的相应阶段来执行。
了解来源有助于分析复杂的异步流程：当一个 Promise 链中再产生新的微任务时，往往会形成嵌套但仍然在同一轮微任务执行阶段完成的执行序列。微任务的层级关系决定了后续代码的整体执行顺序。
二、微任务的执行时机与事件循环
执行时机与执行顺序
当一个宏任务中的代码完成时，事件循环不会直接进入渲染或开始下一个宏任务，而是先检查并执行<微任务队列。微任务队列在当前轮次中不断执行，直到清空为止，只有在微任务全部执行完毕后，事件循环才会进入渲染阶段或执行下一个宏任务。
如果在执行微任务的过程中继续添加新的微任务，这些新加入的微任务也会在同一轮内被执行，直到队列为空。这种机制保证了状态的一致性，避免在同一轮中出现混乱的状态更新。因此微任务的执行是“先执行、再继续下一轮宏任务”的策略核心。
事件循环中的微任务阶段
在浏览器和Node.js 的事件循环模型中，每个宏任务结束后都会进入一个微任务执行阶段，在这一阶段，微任务队列中的任务会逐个执行，直到队列清空。随后可能会进行一次渲染或进入下一轮宏任务。
这一阶段的执行顺序对交互性和渲染时机有直接影响：如果微任务改变了需要渲染的状态，浏览器往往会在清空微任务后尽快进行重绘，以确保用户看到的界面是最新状态。
三、常见示例：Promise、queueMicrotask、MutationObserver
Promise.then 的微任务行为
Promise 的回调（通过 then/catch/finally 注册）会成为微任务，被放入微任务队列。当当前执行任务结束后，事件循环会把这些回调按注册顺序依次执行，直到队列为空。这就是为什么 Promise 链会在同步代码后第一时间被处理，而不会等待下一个宏任务。
console.log('start');
Promise.resolve().then(() => console.log('microtask: then 1'));
console.log('end');
/* 输出顺序：start、end、microtask: then 1 */
上述示例说明：尽管 then 回调在 Promise.resolve() 之后注册，但它们在当前任务结束后才执行，并且紧跟着同步代码的输出。这也体现了微任务的高优先级。
queueMicrotask 的使用与影响
queueMicrotask 可以显式地把回调注册到微任务队列中，语义上等价于将任务放入 Promise 的微任务执行阶段，但提供了更直接的控制方式。使用 queueMicrotask 能使代码对微任务的顺序规划更加清晰，尤其在需要在同一个执行轮次中串联多个微任务时。
console.log('A');
queueMicrotask(() => console.log('microtask: 1'));
queueMicrotask(() => console.log('microtask: 2'));
console.log('B');
/* 输出顺序：A、B、microtask: 1、microtask: 2 */
通过显式添加微任务队列，可以控制输出顺序并避免意外的渲染时机错位。
MutationObserver 与其他微任务来源
在某些浏览器环境中，MutationObserver 的回调会被作为微任务执行。这种机制常用于在 DOM 变化后捕获微观变更并在同一轮事件循环内给予响应。虽然用途各异，但其触发时机与 Promise、queueMicrotask 相同，都在当前宏任务完成后尽快执行。
const observer = new MutationObserver(() => {console.log('microtask: MutationObserver');
});
const target = document.createElement('div');
observer.observe(target, { childList: true });
target.appendChild(document.createTextNode('x'));
/* 微任务阶段会执行 MutationObserver 回调（前提环境支持） */
四、微任务与宏任务的关系及实际影响
宏任务与微任务的区别
宏任务（macro task）包括：整体事件回调、setTimeout、setInterval、I/O、UI 渲染等，每个宏任务完成后，事件循环会进入一个微任务阶段对微任务队列进行处理。微任务是宏任务之上的更高优先级队列，用于在下一轮宏任务开始前完成紧急工作。
因此，理解两者的关系对分析性能和执行顺序至关重要：微任务的执行会延迟下一次宏任务的开始，但确保了状态的一致性，从而影响到渲染、用户交互和异步处理的时序。
输出序列示例与解释
下面的示例展示了一个典型的微任务和宏任务混合场景，以及它们的输出顺序。先执行同步代码，随后执行微任务，再进入下一轮宏任务。
console.log('start'); // 同步
setTimeout(() => console.log('macro: timeout'), 0); // 宏任务
Promise.resolve().then(() => console.log('microtask: then')); // 微任务
console.log('end'); // 同步
/* 输出顺序：start、end、microtask: then、macro: timeout */
再看一个更复杂的嵌套例子，其中一个微任务添加了另一个微任务，结果是在同一轮中完成多次微任务执行，直至队列清空，然后进入下一个宏任务。
Promise.resolve().then(() => {console.log('microtask 1');return Promise.resolve().then(() => console.log('microtask 2'));
});
console.log('sync');
/* 输出顺序：sync、microtask 1、microtask 2 */
五、实战中的注意点与理解要点
编写和调试时的要点
在编写基于 Promise 的异步逻辑时，要理解微任务队列的执行时机，以避免意料之外的状态变更。将关键的状态更新放在微任务内，可以确保在进入下一轮宏任务前已经稳定。
在使用 queueMicrotask 时，需要注意可能导致的重复微任务执行，以及它对渲染和交互的影响。对复杂链式异步流程，尽量线性化微任务的层级，以保持可维护性。
function updateStateSoon() {// 通过微任务确保在下一轮宏任务前完成状态更新queueMicrotask(() => {// 更新 UI 或数据状态console.log('微任务执行：更新状态');});
}
updateStateSoon();
console.log('继续执行其他任务');
/* 输出顺序：继续执行其他任务、微任务执行：更新状态 */
