JavaScript内核与高级编程之：`MutationObserver`：如何监听`DOM`树的动态变化，其实现原理与性能考量。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，大家好！我是你们的老朋友，今天咱们来聊聊JavaScript里一个挺有意思的东西——MutationObserver，这玩意儿能让你像个狗仔一样，时刻盯着DOM树，任何风吹草动都逃不过你的眼睛。

开场白：DOM的“恩怨情仇”

话说，Web开发这江湖，DOM就是咱的舞台。但这个舞台可不安生，演员（各种HTML元素）们经常变来变去，一会儿加个标签，一会儿改个属性，一会儿又删掉一个节点，简直比变脸还快。

以前，我们想知道DOM发生了啥变化，只能用setInterval或者setTimeout，像个老黄牛一样不停地轮询，效率低得令人发指。想象一下，你守着一个变量，每隔几毫秒就问它一句：“你变了吗？你变了吗？”，累不累啊？

直到MutationObserver的出现，我们才终于有了更优雅的方式来追踪DOM的变化。它就像一个训练有素的侦探，默默观察，一旦发现目标有动静，立刻向你汇报。

什么是MutationObserver？

简单来说，MutationObserver是一个接口，它允许你注册回调函数，当DOM树发生变化时，这些回调函数会被异步调用。

MutationObserver的用法：三步走

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

创建MutationObserver实例： 就像雇佣一个侦探，你需要先创建一个MutationObserver对象。
```
const observer = new MutationObserver(callback);
```
这里的callback就是你的汇报员，当DOM发生变化时，它会被调用。

定义回调函数： 回调函数是你的情报接收中心，它接收到DOM变化的信息，并进行处理。

function callback(mutationsList, observer) {
  // mutationsList 是一个 MutationRecord 对象的数组，包含了所有发生的变化
  // observer 是 MutationObserver 实例本身
  for (const 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.');
    }
  }
}

mutationsList是最重要的参数，它是一个MutationRecord对象的数组，包含了所有发生的变化。每个MutationRecord对象都包含了变化的类型、目标节点、新增节点、移除节点、属性名称等等信息。

开始观察： 告诉侦探你要监视哪个目标，以及要监视哪些变化。
```
const targetNode = document.getElementById('myElement');

const config = {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true,
  attributeOldValue: true,
  characterDataOldValue: true
};

observer.observe(targetNode, config);
```
targetNode是你要监视的目标节点，可以是任何DOM元素。

config是一个配置对象，用于指定要监视的变化类型。这里我们监视了属性变化、子节点变化、子树变化和字符数据变化，并要求记录旧值。

config参数详解：像点菜一样选择你要监控的变化

config参数决定了MutationObserver侦探的敏感程度，以及汇报哪些信息。它是一个对象，可以包含以下属性：

属性	描述
`childList`	布尔值，指示是否监视目标节点子节点的添加或删除。
`attributes`	布尔值，指示是否监视目标节点属性的变化。
`characterData`	布尔值，指示是否监视目标节点（如果它是`CharacterData`节点，例如`Text`节点）的数据变化。
`subtree`	布尔值，指示是否监视目标节点的后代节点的变化。如果设置为`true`，则会递归地监视目标节点的所有子节点。
`attributeOldValue`	布尔值，指示是否记录属性变化的旧值。如果设置为`true`，则`MutationRecord`对象的`oldValue`属性将包含属性变化的旧值。只有在 `attributes` 为 `true` 时才有效。
`characterDataOldValue`	布尔值，指示是否记录字符数据变化的旧值。如果设置为`true`，则`MutationRecord`对象的`oldValue`属性将包含字符数据变化的旧值。只有在 `characterData` 为 `true` 时才有效。
`attributeFilter`	字符串数组，指示要监视哪些属性的变化。如果设置了此属性，则只会监视指定的属性的变化。只有在 `attributes` 为 `true` 时才有效。

MutationRecord对象：侦探的报告

当DOM发生变化时，回调函数会接收到一个MutationRecord对象的数组。每个MutationRecord对象都包含了关于一个特定变化的信息。

属性	描述
`type`	字符串，指示变化的类型。可以是`"attributes"`（属性变化）、`"characterData"`（字符数据变化）或`"childList"`（子节点变化）。
`target`	`Node`对象，指示发生变化的目标节点。
`addedNodes`	`NodeList`对象，包含了被添加到目标节点的节点。
`removedNodes`	`NodeList`对象，包含了从目标节点移除的节点。
`previousSibling`	`Node`对象，指示被添加或移除的节点的前一个兄弟节点。
`nextSibling`	`Node`对象，指示被添加或移除的节点的后一个兄弟节点。
`attributeName`	字符串，指示被修改的属性的名称。只有在 `type` 为 `"attributes"` 时才有效。
`attributeNamespace`	字符串，指示被修改的属性的命名空间。只有在 `type` 为 `"attributes"` 且属性位于 XML 命名空间中时才有效。
`oldValue`	字符串，包含了变化前的旧值。只有在 `attributeOldValue` 或 `characterDataOldValue` 设置为 `true` 时才有效。

停止观察：下班回家

当你不再需要监视DOM的变化时，可以调用disconnect()方法来停止观察。

observer.disconnect();

实例演示：一个简单的计数器

让我们来创建一个简单的计数器，当计数器数值变化时，使用MutationObserver来记录变化。

<!DOCTYPE html>
<html>
<head>
  <title>MutationObserver Example</title>
</head>
<body>
  <div id="counter">0</div>
  <button id="increment">Increment</button>

  <script>
    const counterElement = document.getElementById('counter');
    const incrementButton = document.getElementById('increment');

    let count = 0;

    incrementButton.addEventListener('click', () => {
      count++;
      counterElement.textContent = count;
    });

    const observer = new MutationObserver((mutationsList, observer) => {
      for (const mutation of mutationsList) {
        if (mutation.type === 'characterData') {
          console.log('Counter value changed from ' + mutation.oldValue + ' to ' + mutation.target.textContent);
        }
      }
    });

    observer.observe(counterElement, {
      characterData: true,
      characterDataOldValue: true,
      subtree: true // 确保监听文本节点的直接变化
    });
  </script>
</body>
</html>

在这个例子中，我们监视了counter元素的字符数据变化，并记录了变化前后的值。

MutationObserver的实现原理：偷偷告诉你

MutationObserver的实现原理并不复杂，它主要依赖于浏览器提供的底层API。浏览器会维护一个DOM树的快照，当DOM发生变化时，浏览器会将当前的DOM树与快照进行比较，找出差异，然后将这些差异信息传递给MutationObserver的回调函数。

性能考量：别让侦探累趴下

虽然MutationObserver比轮询高效得多，但过度使用也会影响性能。以下是一些性能优化的建议：

只监视必要的节点： 避免监视整个document，尽量只监视你需要关注的节点。
只监视必要的变化类型： 避免同时监视所有类型的变化，只选择你需要的信息。
避免在回调函数中执行耗时操作： 回调函数是异步执行的，但如果执行时间过长，仍然会阻塞浏览器渲染。
及时停止观察： 当你不再需要监视DOM的变化时，及时调用disconnect()方法停止观察。

MutationObserver与MutationEvent：新欢与旧爱

在MutationObserver出现之前，我们使用MutationEvent来监听DOM的变化。但是，MutationEvent是同步触发的，会阻塞浏览器渲染，而且性能较差，已经被废弃。MutationObserver是异步触发的，不会阻塞浏览器渲染，而且性能更高，是MutationEvent的完美替代品。

特性	`MutationObserver`	`MutationEvent`
触发方式	异步	同步
性能	高	低
是否阻塞渲染	否	是
是否已废弃	否	是

MutationObserver的应用场景：无处不在的侦探

MutationObserver的应用场景非常广泛，以下是一些常见的例子：

框架和库： 许多前端框架和库都使用MutationObserver来实现数据绑定和组件更新。
富文本编辑器： 富文本编辑器可以使用MutationObserver来监听用户对文本的修改，并实时更新编辑器界面。
广告拦截器： 广告拦截器可以使用MutationObserver来检测广告元素的添加，并将其移除。
性能监控工具： 性能监控工具可以使用MutationObserver来记录DOM的变化，并分析性能瓶颈。
响应式布局： 可以监听特定的DOM元素的属性变化，根据变化动态调整布局。例如，监听某个容器的宽度变化，然后调整其内部元素的排列方式。

高级用法：批量处理Mutation记录

有时候，DOM变化非常频繁，回调函数会被频繁调用。为了提高性能，可以批量处理Mutation记录。

const observer = new MutationObserver(function(mutationsList) {
  // 优化：使用requestAnimationFrame来批量处理mutation
  window.requestAnimationFrame(() => {
    for (const mutation of mutationsList) {
      // 处理mutation
      console.log(mutation);
    }
  });
});

使用requestAnimationFrame可以将多个回调函数合并成一个，并在浏览器下一次重绘之前执行，从而减少回调函数的调用次数。

兼容性：老伙计也能用

MutationObserver的兼容性非常好，几乎所有现代浏览器都支持它。对于老旧的浏览器，可以使用polyfill来提供支持。

总结：让DOM变化尽在掌握

MutationObserver是一个强大的工具，可以让你轻松地监听DOM树的变化。掌握了它，你就可以像一个经验丰富的侦探一样，时刻掌握DOM的动态，并根据变化做出相应的处理。记住，合理使用MutationObserver，才能让你的Web应用更加健壮和高效。

好了，今天的讲座就到这里，希望大家有所收获。下次有机会，我们再聊点更刺激的！拜拜！

发表回复 取消回复

发表回复取消回复