JS `MutationObserver`：监听 DOM 树变化，实现高性能 DOM 监控

各位观众老爷们，大家好！今天咱们来聊聊前端界的一位“隐形守护者”—— MutationObserver。别看它名字挺唬人，其实用起来一点都不难，而且性能杠杠的，能让你的 DOM 监控飞起来！

开场白：DOM 监控的那些事儿

在前端开发中，我们经常需要监控 DOM 树的变化，比如某个元素被添加、删除、属性被修改等等。传统的做法，像 setInterval 定时轮询或者直接在 DOM 操作的地方埋点，虽然能实现功能，但性能实在不敢恭维。想象一下，你每隔几毫秒就去扫描整个 DOM 树，CPU 都快烧起来了！而 MutationObserver 就像一位训练有素的忍者，只有在 DOM 真正发生变化时才会现身，告诉你发生了什么。

MutationObserver 是什么？

简单来说，MutationObserver 是一个 API，它允许你监听 DOM 树的变化，并在变化发生时异步地执行回调函数。它的核心思想是：“别没事找事，有事再通知我！”

MutationObserver 的用法：三步走

使用 MutationObserver 非常简单，只需要三步：

创建观察者： 就像雇佣一位忍者，你需要先创建一个 MutationObserver 实例。
配置观察选项： 告诉忍者你需要关注哪些变化，比如属性变化、子节点变化等等。
开始观察： 就像给忍者下达指令，告诉他要监视哪个 DOM 节点。

代码示例：

// 1. 创建观察者
const observer = new MutationObserver(function(mutationsList, observer) {
  // mutationsList 是一个 MutationRecord 对象的数组，包含了所有发生的变化
  for(let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    } else if (mutation.type === 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
    } else if (mutation.type === 'characterData') {
      console.log('The character data was modified.');
    }
  }
});

// 2. 配置观察选项
const config = {
  childList: true, // 监听子节点的添加和删除
  attributes: true, // 监听属性的变化
  characterData: true, // 监听节点内容的变化
  subtree: true, // 监听目标节点及其后代节点
  attributeOldValue: true, // 记录属性变化前的值
  characterDataOldValue: true // 记录节点内容变化前的值
};

// 3. 开始观察
const targetNode = document.getElementById('myElement'); // 你要监视的 DOM 节点
observer.observe(targetNode, config);

//停止观察
//observer.disconnect();

代码解释：

new MutationObserver(callback)：创建 MutationObserver 实例，传入一个回调函数，当 DOM 发生变化时，这个回调函数会被调用。
config 对象：配置观察选项，告诉 MutationObserver 你要关注哪些变化。
- childList: 监听子节点的添加和删除。
- attributes: 监听属性的变化。
- characterData: 监听节点内容的变化。
- subtree: 监听目标节点及其后代节点（非常重要，可以监听整个子树的变化）。
- attributeOldValue: 记录属性变化前的值。
- characterDataOldValue: 记录节点内容变化前的值。
observer.observe(targetNode, config)：开始观察指定的 DOM 节点，并应用配置选项。
observer.disconnect():停止观察，释放资源。

MutationRecord 对象：变化的证据

每次 DOM 发生变化，MutationObserver 的回调函数都会收到一个 MutationRecord 对象的数组。每个 MutationRecord 对象都记录了具体的变化信息。常见的 MutationRecord 属性如下：

属性名	描述
`type`	变化的类型，可以是 `childList`、`attributes` 或 `characterData`。
`target`	发生变化的 DOM 节点。
`addedNodes`	如果是 `childList` 变化，表示被添加的节点列表。
`removedNodes`	如果是 `childList` 变化，表示被移除的节点列表。
`previousSibling`	如果是 `childList` 变化，表示被添加或移除的节点之前的兄弟节点。
`nextSibling`	如果是 `childList` 变化，表示被添加或移除的节点之后的兄弟节点。
`attributeName`	如果是 `attributes` 变化，表示被修改的属性名。
`attributeNamespace`	如果是 `attributes` 变化，表示属性的命名空间。
`oldValue`	如果配置了 `attributeOldValue` 或 `characterDataOldValue`，则表示变化前的值。

实战演练：监控属性变化

假设我们需要监控一个按钮的 disabled 属性是否被修改，可以这样做：

const button = document.getElementById('myButton');

const observer = new MutationObserver(function(mutationsList, observer) {
  for(let mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'disabled') {
      console.log('按钮的 disabled 属性被修改了！');
      console.log('新的 disabled 状态：', button.disabled);
      console.log('旧的 disabled 状态：', mutation.oldValue);
    }
  }
});

observer.observe(button, {
  attributes: true,
  attributeOldValue: true
});

// 模拟修改 disabled 属性
setTimeout(() => {
  button.disabled = true;
}, 2000);

在这个例子中，我们只监听了 disabled 属性的变化，并且使用了 attributeOldValue 来记录变化前的值。

性能优化：避免过度监听

虽然 MutationObserver 性能很高，但如果过度监听，仍然会影响性能。因此，我们需要注意以下几点：

只监听需要的变化： 不要监听所有类型的变化，只监听你真正关心的。
避免无限循环： 在回调函数中修改 DOM 可能会触发新的变化，导致无限循环。可以使用 observer.disconnect() 停止观察，修改完 DOM 后再重新开始观察。也可以使用 setTimeout 将 DOM 修改操作放入异步队列中。
及时停止观察： 当不再需要监听时，及时调用 observer.disconnect() 停止观察，释放资源。

浏览器兼容性

MutationObserver 的浏览器兼容性非常好，几乎所有现代浏览器都支持它。

浏览器	支持版本
Chrome	14+
Firefox	14+
Safari	6+
Opera	15+
Edge	12+
IE	11+

MutationObserver 的应用场景

MutationObserver 在前端开发中有很多应用场景，例如：

监听第三方库对 DOM 的修改： 有些第三方库会直接修改 DOM，使用 MutationObserver 可以监控这些修改，并做出相应的处理。
实现虚拟 DOM： 虚拟 DOM 的核心思想是监听 DOM 变化，然后计算出最小的更新量，最后应用到真实 DOM 上。 MutationObserver 可以用来监听 DOM 变化，为虚拟 DOM 提供数据来源。
监听广告的加载和展示： 可以使用 MutationObserver 监听广告容器的变化，判断广告是否加载成功并展示出来。
自定义组件的生命周期管理： 可以使用 MutationObserver 监听自定义组件的添加和删除，从而管理组件的生命周期。
响应式编程框架： 某些响应式编程框架会使用 MutationObserver 来追踪数据的变化并更新视图。

高级用法：takeRecords()

takeRecords() 方法可以立即返回所有待处理的 MutationRecord 对象，并清空队列。这个方法可以在某些特殊场景下使用，例如：

批量处理变化： 如果你想一次性处理多个变化，可以使用 takeRecords() 获取所有待处理的 MutationRecord 对象，然后进行批量处理。
手动触发回调函数： 你可以调用 takeRecords() 获取所有待处理的 MutationRecord 对象，然后手动调用回调函数进行处理。

代码示例：

const observer = new MutationObserver(function(mutationsList, observer) {
  // 这个回调函数可能不会立即执行
  console.log('MutationObserver callback called.');
});

observer.observe(document.body, { childList: true });

// 模拟添加一些节点
document.body.appendChild(document.createElement('div'));
document.body.appendChild(document.createElement('span'));

// 立即获取所有待处理的 MutationRecord 对象
const records = observer.takeRecords();
console.log('takeRecords() returned:', records);

// 手动处理 MutationRecord 对象
records.forEach(record => {
  console.log('Manually processing mutation:', record);
});

MutationObserver vs setInterval：性能对比

特性	`MutationObserver`	`setInterval`
触发时机	DOM 发生变化时	定时触发
资源消耗	只有在 DOM 变化时才消耗资源	无论 DOM 是否变化，都会定时消耗资源
实时性	实时性更高，DOM 变化后立即触发	实时性较低，需要等待定时器触发
适用场景	需要实时监听 DOM 变化的场景	不需要实时监听，只需要定期执行某些操作的场景

总结：MutationObserver，你的 DOM 监控利器

MutationObserver 是一款强大的 DOM 监控 API，它具有高性能、实时性好、使用简单等优点。在前端开发中，我们可以使用 MutationObserver 来监听 DOM 变化，实现各种各样的功能。但是，在使用 MutationObserver 时，也要注意性能优化，避免过度监听，及时停止观察。

好了，今天的讲座就到这里。希望大家能够掌握 MutationObserver 的用法，并在实际开发中灵活运用。感谢大家的观看！

发表回复 取消回复

发表回复取消回复