无需登录 数据私有 本地保存

MutationObserver 游乐场 - DOM变动实时记录

10
0
0
0

MutationObserver 游乐场

实时监听并记录DOM变动 · 可视化观察浏览器原生API的强大能力

未观察 0 条记录
contenteditable
🍎 苹果
🍌 香蕉
🍊 橙子
🍇 葡萄

💡 点击上方区域可直接编辑文本，或使用下方按钮触发变动

快速操作
提示：尝试在目标区域中直接编辑文字、删除元素（Backspace）、或按 Enter 换行，观察不同类型的DOM变动记录。
观察配置
总计: 0 childList: 0 attributes: 0 characterData: 0 ⏱ 00:00
实时日志
暂无变动记录
点击「开始观察」后操作目标区域

常见问题与知识点

MutationObserver 是浏览器原生提供的API，用于异步监听DOM树中的变动。它可以检测子节点的添加/删除、元素属性的变化、文本内容的修改等。与已废弃的 Mutation Events 相比，它采用异步批处理机制，对性能影响极小，是现代前端开发中监听DOM变化的首选方案。

childList：监听目标节点直接子节点的添加或删除（需配合subtree监听后代节点）。
attributes：监听目标节点属性的变更（如class、style、data-*等）。
characterData：监听文本节点内容的变化（如通过textContent或contenteditable编辑）。
三种类型可组合使用，灵活覆盖各种场景。

subtree: true 会将观察范围扩展到目标节点的所有后代节点。例如，若不开启subtree，childList仅监听直接子节点的增减；开启后，任何层级的后代节点变动都会被捕获。这在监听复杂组件内部变化时非常重要，但也会略微增加性能开销。

attributeFilter 是一个字符串数组，用于精确指定需要监听的属性名称。例如 ['class', 'data-id'] 表示仅监听class和data-id的变化，忽略其他属性。这可以显著减少不必要的回调触发，提升性能。留空或省略该选项则监听所有属性变化。

MutationObserver的回调是异步的，在微任务队列中执行。浏览器会将同一事件循环内的多个DOM变动合并成一批，一次性传递给回调函数（即回调的 mutations 参数是一个数组）。这意味着即使短时间内触发了100次DOM变动，回调也只执行一次，极大减少了性能开销。如需同步获取未处理的记录，可使用 takeRecords() 方法。

如果在MutationObserver回调中修改了被观察的DOM，会触发新的变动并再次调用回调，形成无限循环。避免方法：① 在修改前调用 disconnect() 暂时断开观察，修改完再重新 observe()；② 使用标志位控制，在回调执行期间跳过特定操作；③ 确保修改的节点不在观察范围内。

Mutation Events（如DOMSubtreeModified）是同步触发的，每次DOM变动都立即执行回调，容易导致页面卡顿和性能灾难。MutationObserver则是异步批处理，将多次变动合并后一次性回调，性能提升显著。因此Mutation Events已被废弃并从标准中移除，应使用MutationObserver替代。

① 监听第三方内容变化（如广告注入、iframe内容）
② 实现自定义的"撤消/重做"功能
③ 代码高亮库检测DOM中新增的代码块
④ 监听SPA页面路由变化引起的DOM更新
⑤ Chrome扩展中监听页面结构变化
⑥ 自动化测试中验证DOM操作结果
⑦ 实现数据绑定的简易响应式系统

takeRecords() 会同步返回尚未传递给回调的变动记录数组，并清空内部队列。这在需要立即获取当前累积的变动（例如在 disconnect 之前获取所有未处理的记录）时非常有用。调用后，这些记录不会再触发回调。

disconnect()：停止该observer实例上的所有观察（若对多个节点调用了observe，全部停止）。
unobserve(node)：仅停止对指定节点的观察，不影响其他节点。一个observer实例可同时观察多个节点，disconnect一次性全部断开，unobserve则精确取消某一个。

三者都是Observer系列API，但用途不同：
MutationObserver：监听DOM结构和内容变化。
ResizeObserver：监听元素尺寸变化（更精准替代resize事件）。
IntersectionObserver：监听元素与视口（或祖先元素）的交叉状态，用于懒加载、曝光统计等。它们可配合使用实现复杂的响应式逻辑。

Vue 2.x 内部曾使用 MutationObserver 来实现 nextTick 的降级方案（优先使用Promise）。React 在合成事件系统中不直接使用，但一些UI库（如代码高亮、富文本编辑器）利用它监听DOM注入。此外，在集成第三方非框架组件时，MutationObserver是桥接框架与原生DOM操作的利器。
🔧 相关工具