MutationObserver 是现代前端监控 DOM 变化的首选方案，需精准定位目标节点、严格配置 childList/subtree/attributes 三选项、在回调中轻量校验并及时断开，适用于安全防御与动态 UI 场景。
MutationObserver 是现代前端监控 DOM 变化的首选方案，它不是“一监听就完事”的黑盒工具，而是需要明确目标、克制配置、轻量响应的精密机制。用错方式，它反而会拖慢页面甚至引发无限修复循环。
只盯关键节点，不碰 body 或 document
全量监听 document.body 或 document 是性能陷阱。广告 SDK、客服插件、A/B 测试脚本每秒都在改 body，你一开监听，99% 的回调都是噪音。
- 精准定位业务核心容器：如 document.querySelector('#pay-button')、document.querySelector('[data-role="legal-notice"]')、document.querySelector('.auth-form')
- 优先使用 id 或语义化 data- 属性，避开插件动态生成的 class（如 zopim-123abc）
- 若容器异步加载，用 setTimeout 或 requestIdleCallback 延迟初始化，避免 querySelector 返回 null
铁三角配置：childList + subtree + attributes
第三方插件篡改 DOM 主要就这三类动作：塞新节点、钻深层改结构、偷偷动属性。缺一不可，多一个也冗余。
- childList: true —— 必开，监听直接子节点增删
- subtree: true —— 必开，否则插件在 #pay-button > span > i 里插入水印图标你就完全看不见
- attributes: true + attributeFilter: ['class', 'style', 'hidden', 'data-*'] —— 只盯可能影响功能或隐藏内容的属性；不设 filter 会白增 30%+ 回调开销
- characterData: true 仅当法律声明、版权文本等需防篡改时才启用；普通区域不开
- 禁用 attributeOldValue 和 characterDataOldValue —— 你不需要比对“原来是什么”，只需判断“现在是否可疑”
回调内三步轻量校验，修复前先断开
回调执行越快越好。主线程卡住一秒，用户可能已点错支付按钮。
- 第一步：确认变更是否落在目标容器内 —— if (!targetEl.contains(mutation.target) && mutation.target !== targetEl) return
- 第二步：若是 childList 类型，只检查 mutation.addedNodes 中节点是否匹配恶意特征，例如：
node.matches('script[src*="malicious"], [id^="ad-"], [class*="taboola"]') - 第三步：一旦确认异常，立即调用 observer.disconnect()，再执行修复（如移除 script、还原 class），修复完成后再重新 observe
适用场景不止于“防插件”
MutationObserver 的价值远超安全防御，它是动态 UI 的底层支撑：
- 图片上传后自动隐藏“浏览文件”按钮，当缩略图被清空时再显示
- 评论区异步加载新内容后，自动为新节点绑定点击事件或打标
- 表单字段根据后台返回动态增删时，同步更新验证规则和提交逻辑
- 监听富文本容器高度变化，触发滚动锚点或折叠逻辑
