变动观察器(MutationObserver)

变动观察器(MutationObserver) 是浏览器提供的一个用于监听 DOM 变化的 API。它可以异步观察某个节点及其子树的属性变更、子节点增删以及文本内容变化,并在变动发生后批量派发记录。

概述

早期浏览器提供过 Mutation Events,但因每次 DOM 变动都同步触发事件,严重拖累性能,已被废弃。MutationObserver 作为替代方案,采用异步、批量的模型:在一批 DOM 操作完成后,将所有变动记录一次性交给回调处理,大幅降低了开销。

核心原理

• 实例化时传入回调,再通过 observe 方法指定目标节点和观察配置。
• 配置项包括是否观察子节点变动、属性变化、字符数据、以及是否递归观察整个子树。
• 变动发生后,回调接收一个变动记录数组,每条记录描述具体的变更类型与受影响节点。
• 调用 disconnect 可停止观察,takeRecords 可主动取出尚未处理的记录。

应用场景

MutationObserver 常用于监测由第三方脚本或用户操作动态插入的内容,例如广告拦截、自动化脚本、富文本编辑器同步。前端框架和组件库也用它检测宿主环境变化,浏览器扩展则借助它在目标页面出现特定元素时执行处理逻辑。

常见问题

问:它和 Mutation Events 有何区别?答:Mutation Events 是同步触发且已废弃,每次变动都打断执行;MutationObserver 是异步批处理,性能好且是当前推荐方案。

问:观察大范围子树会不会很耗性能?答:观察范围越大、变动越频繁,回调需处理的记录越多。应尽量缩小观察范围并精确配置观察类型,及时 disconnect 不再需要的观察。