微任务在事件传播后执行，是因为浏览器的事件循环机制规定：当前宏任务（如点击事件处理函数）执行完毕后，会先清空整个微任务队列，然后才进入下一轮渲染和事件循环。这意味着，在一个事件处理函数中调用的 promise.then 或 queuemicrotask 注册的回调，会在该事件处理函数完全结束、dom 更新完成并触发重绘之前执行。
为什么微任务比 DOM 更新更早执行
微任务之所以在 DOM 更新前执行，是因为它们属于当前宏任务的后续工作，而 DOM 的样式计算和布局重排属于下一阶段的渲染任务。当点击事件触发时，浏览器将事件分发到目标节点，执行对应的 onclick 处理函数。如果在这个函数里创建了一个 Promise 并注册了 then 回调，这个回调会被放入微任务队列。只有当这个处理函数彻底运行完，引擎才会去检查微任务队列，依次执行所有待处理的微任务。只有在微任务队列清空后，浏览器才会进行必要的渲染步骤，比如重新计算样式或重排布局。
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
console.log('1. Click event handler starts');
// 模拟一个异步操作，产生微任务
Promise.resolve().then(() => {
console.log('3. Microtask executed');
// 此时 DOM 尚未更新，但微任务已执行
});
console.log('2. Click event handler ends');
});
// 预期输出顺序：
// 1. Click event handler starts
// 2. Click event handler ends
// 3. Microtask executed
如何确保在微任务中访问最新的 DOM 状态
如果在微任务中需要读取由其他同步代码修改的 DOM 属性，必须注意这些修改可能尚未反映在浏览器的渲染树中。例如，如果在事件处理函数中直接修改了元素的 style 或 textContent，这些更改在微任务执行期间是可见的（通过 JavaScript 对象模型），但在视觉上可能还未呈现。若需确保视觉更新完成后再执行逻辑，应将相关逻辑放在 requestAnimationFrame 中，或者使用 setTimeout 将其推迟到下一个宏任务。然而，大多数情况下，开发者只需关注 JavaScript 层面的数据一致性即可，因为微任务保证了在当前事件上下文中数据的即时可用性。
// 示例：在微任务中访问刚修改的 DOM 属性
const div = document.getElementById('myDiv');
div.addEventListener('click', () => {
div.textContent = 'Updated'; // 同步修改 DOM
Promise.resolve().then(() => {
// 在微任务中，div.textContent 已经是 'Updated'
// 尽管浏览器可能还未重绘屏幕
console.log(div.textContent); // 输出: Updated
});
});
// 如果需要等待视觉更新完成，可以使用 requestAnimationFrame
// div.addEventListener('click', () => {
// div.textContent = 'Updated';
// requestAnimationFrame(() => {
// console.log('Visual update complete');
// });
// });
微任务队列清空对页面性能的影响
大量微任务的堆积会导致当前宏任务被显著延迟，因为浏览器必须等待所有微任务执行完毕才能进行渲染。这可能会引起页面卡顿，尤其是在处理复杂的数据转换或大量的异步操作时。因此，建议将非紧急的微任务拆分为多个较小的批次，或者使用 setTimeout 将它们推迟到下一个宏任务，以避免阻塞主线程。此外，避免在微任务中进行昂贵的计算或 DOM 操作，以确保页面响应用户交互的流畅性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
