JavaScript 中怎么区分 MutationObserver 微任务-js教程-PHP中文网

mutationobserver回调以微任务形式入队，dom变化后批量合并为mutationslist，在当前同步代码执行完、下一轮事件循环前执行，比settimeout早、通常不早于promise.then；回调接收mutationslist和observer实例，可调用disconnect或takerecords，但不可在回调内重新observe。

javascript 中怎么区分 mutationobserver 微任务

MutationObserver 是微任务

MutationObserver 的回调函数属于微任务，这一点在规范和实际运行中都明确。它和 Promise.then、queueMicrotask 一样，会在当前宏任务执行完后、下一个宏任务开始前，被立即执行，且会清空整个微任务队列。

为什么 MutationObserver 是微任务

它的设计目标是响应 DOM 变化，但又不能阻塞渲染或用户交互。如果作为宏任务，可能要等几毫秒甚至更久才执行，导致界面更新延迟；而作为微任务，它能紧贴 DOM 修改之后、浏览器重绘之前执行，兼顾响应及时性与渲染性能。

DOM 修改（如 appendChild、setAttribute）是同步操作
修改完成后，MutationObserver 回调被加入微任务队列
当前宏任务结束 → 立即执行所有排队的微任务（包括该回调）→ 然后才可能触发 UI 渲染

怎么验证它是微任务

用一段典型代码对比执行顺序：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

console.log('1');
new Promise(r => {
  console.log('2');
  r();
}).then(() => console.log('3'));

const mo = new MutationObserver(() => console.log('4'));
mo.observe(document.body, { childList: true });
document.body.appendChild(document.createElement('div'));

console.log('5');
setTimeout(() => console.log('6'), 0);

输出顺序为：1 → 2 → 5 → 3 → 4 → 6。其中 3（Promise.then）和 4（MutationObserver 回调）同属微任务，按注册/入队先后执行，证明它确实走微任务通道。