微任务在事件派发后执行，是因为它们被安排在当前宏任务（如 dom 渲染或用户交互）完成后的下一个阶段处理。具体做法是调用 queuemicrotask() 或在 promise 的 .then() 回调中返回结果，这样代码会在当前同步代码和所有已排队的宏任务之后、下一轮 ui 更新之前运行。
如何确保微任务在当前宏任务结束后立即执行
要确保微任务在当前宏任务结束后立即执行，只需将逻辑放入 Promise 的 .then() 方法中或直接使用 queueMicrotask()。浏览器的事件循环机制规定，在一个宏任务（例如点击事件处理函数）执行完毕后，会先清空整个微任务队列，然后才进行下一阶段的 UI 渲染或响应下一个宏任务。这意味着，无论你在事件处理函数的哪个位置调度微任务，只要它被正确入队，就会在当前事件处理流程完全结束前执行完毕。
function handleClick() {
console.log('Start');
queueMicrotask(() => {
console.log('Microtask executed');
});
console.log('End');
}
// 模拟点击事件触发
handleClick();
// 输出顺序: Start, End, Microtask executed
上述代码展示了在事件处理函数中调度微任务的典型模式。当 handleClick 作为宏任务被调用时，它会先打印 'Start'，然后调度一个微任务，接着打印 'End'。此时同步代码执行完毕，事件循环检查到微任务队列中有待处理项，于是执行该微任务并打印 'Microtask executed'。这证明了微任务总是在当前宏任务的所有同步代码执行完后立即执行，而不会等待下一帧的渲染。
微任务与 DOM 渲染的时序关系是什么
微任务在 DOM 渲染之前执行，因为浏览器的渲染步骤被视为一个独立的宏任务阶段，发生在微任务队列清空之后。如果你在事件处理函数中修改了 DOM 样式，并希望这些更改在视觉上立即生效，通常不需要依赖微任务，因为同步的 DOM 操作已经触发了重排或重绘。但是，如果你需要在 DOM 更新后执行某些逻辑，且希望这些逻辑在视觉反馈之前完成，可以使用微任务。反之，如果需要在视觉更新后执行逻辑，则应使用 requestAnimationFrame 或下一个宏任务。
function updateDOMAndLog() {
const div = document.getElementById('myDiv');
div.style.color = 'red';
queueMicrotask(() => {
console.log('DOM updated, color is now:', getComputedStyle(div).color);
});
}
updateDOMAndLog();
// 微任务中的日志会在同步 DOM 操作后立即记录，但视觉渲染稍后发生
这段代码演示了微任务与 DOM 操作的交互。在 updateDOMAndLog 函数中，我们首先同步地将 div 的颜色设置为红色。随后，我们调度一个微任务来读取计算后的颜色值。由于微任务在当前宏任务结束时执行，此时 DOM 已经更新了内部状态，因此微任务中可以获取到最新的样式值。然而，浏览器的实际像素渲染（即用户在屏幕上看到红色）是在微任务队列清空之后进行的。这种时序关系确保了 JavaScript 逻辑的一致性，同时允许 UI 在逻辑完成后进行最终的视觉呈现。
如果在微任务中再次调度微任务会发生什么
如果在微任务中再次调度新的微任务，新调度的微任务会被添加到当前微任务队列的末尾，并在当前正在执行的微任务完成后继续执行。这意味着微任务可以形成链式调用，直到队列为空。这种行为类似于递归，但它是基于队列的非递归实现，避免了栈溢出的风险。开发者可以利用这一特性来构建异步流水线，确保一系列操作按顺序执行，且每个操作都在 UI 更新之前完成。
function chainMicrotasks() {
console.log('Task 1');
queueMicrotask(() => {
console.log('Task 2');
queueMicrotask(() => {
console.log('Task 3');
});
});
}
chainMicrotasks();
// 输出: Task 1, Task 2, Task 3
在这个例子中，chainMicrotasks 函数启动了一个微任务链。第一个微任务打印 'Task 1' 并调度第二个微任务。第二个微任务打印 'Task 2' 并调度第三个微任务。第三个微任务打印 'Task 3'。由于所有操作都是微任务，它们会在同一个宏任务周期内连续执行，中间不会插入任何 UI 渲染或其他宏任务。这种链式结构对于需要严格顺序执行的异步操作非常有用，例如在数据加载后依次进行验证、转换和存储。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
