MutationObserver：DOM 变更监听与性能边界

--- title: MutationObserver：DOM 变更监听与性能边界 keywords: - MutationObserver - DOM 监听 - 批处理 - subtree - 性能边界 description: 介绍 MutationObserver 的变更队列与回调模型、子树监听与过滤、批处理与节流策略，避免过度观察与主线程阻塞，提供示例与参考。 categories: - 文章资讯 - 技术教程 --- 概述 MutationObserver 提供异步的 DOM 变更监听（属性/文本/子节点），将多次变更汇总后回调，避免同步监听导致的性能问题。合理使用过滤与批处理可降低开销。 示例 ```js const target = document.getElementById('app') const obs = new MutationObserver(list => { for (const m of list) { if (m.type === 'childList') { // 处理新增/删除节点 } if (m.type === 'attributes' && m.attributeName === 'aria-busy') { // 处理属性变更 } } }) obs.observe(target, { childList: true, attributes: true, subtree: true }) ``` 工程建议 - 过滤与范围：仅监听必要的类型与节点；避免对大型子树全量监听。 - 批处理：在回调中聚合更新，减少重排与重绘；必要时使用微任务或调度。 - 关闭与回收：完成后 `disconnect()`；避免泄漏与多重监听。 参考与验证 - MDN MutationObserver 文档：https://developer.mozilla.org/docs/Web/API/MutationObserver - WHATWG DOM 标准：https://dom.spec.whatwg.org/