在 javascript 的事件循环中，微任务（如 promise.then、queuemicrotask）并不是在事件捕获阶段执行的，而是在当前宏任务（如点击事件、定时器回调）的回调函数执行完毕后，且在下一个宏任务开始前统一执行的。如果你希望在事件处理过程中触发微任务，只需在事件监听器内部调用创建微任务的 api 即可，这些微任务会排队等待当前同步代码和事件处理逻辑全部结束后再运行。
如何确保微任务在事件处理完成后立即执行
要让微任务在事件处理逻辑结束后尽快执行，最直接的方法是在事件回调函数的末尾或关键逻辑后调用 Promise.resolve().then() 或 queueMicrotask()。这样，浏览器会在完成当前事件的冒泡/捕获流程及所有同步操作后，清空微任务队列，然后再去检查是否有新的渲染或下一轮事件。
document.getElementById('btn').addEventListener('click', function() {
console.log('1. 同步代码开始');
// 模拟一些同步操作
for (let i = 0; i < 1000; i++) {
let x = i * i;
}
console.log('2. 同步代码结束');
// 将微任务加入队列
queueMicrotask(() => {
console.log('3. 微任务执行');
});
});当用户点击按钮时，控制台输出顺序为：先打印“1. 同步代码开始”，接着是“2. 同步代码结束”，最后才是“3. 微任务执行”。这证明了微任务是在当前事件回调的同步部分执行完毕后才被调度的。
立即学习“Java免费学习笔记（深入）”；
微任务与 DOM 更新的时序关系
开发者常关心微任务是否会影响页面的重绘。实际上，微任务的执行优先级高于浏览器的渲染步骤。如果在微任务中修改了 DOM，这些修改不会立即反映在屏幕上，而是会等到微任务队列清空后，浏览器才会进行下一次绘制。这意味着你可以在微任务中批量更新 DOM，而不会产生中间状态的闪烁。
const btn = document.getElementById('btn');
const div = document.getElementById('content');
btn.addEventListener('click', () => {
console.log('Click handled');
Promise.resolve().then(() => {
div.style.color = 'red';
console.log('DOM updated in microtask');
});
});在上述代码中，点击按钮后，虽然我们在微任务中将文字颜色改为红色，但用户肉眼看到的颜色变化可能会稍微延迟，因为浏览器需要等待微任务执行完并重新计算样式和布局后才能进行绘制。这种机制保证了数据逻辑的一致性优先于视觉反馈。
微任务队列满时的行为表现
如果在一个事件回调中递归地添加大量微任务，例如在 then 回调中再次调用 then，微任务队列会持续增长。只要队列不为空，浏览器就不会进入下一轮宏任务（包括渲染）。极端情况下，这可能导致页面假死，因为后续的 UI 交互事件（如鼠标移动）会被阻塞，直到微任务队列被清空。因此，应避免在微任务中创建无限递归或过长的链式调用。
