MutationObserver 接口

MutationObserver 接口

不久前添加到 DOM 规范中的 MutationObserver 接口，可以在 DOM 被修改时异步执行回调。

使用 MutationObserver 可以观察整个文档、DOM 树的一部分，或某个元素。

此外还可以观察元素属性、子节点、文本，或者前三者任意组合的变化。

开始观察 observe( )

要观察节点变化，需要用到observe()方法，

回调并非与实际的 DOM 变化同步执行。

// 1、需要创建MutationObserver实例，创建时传入节点变化时的回调函数
let observer = new MutationObserver((mutationRecords, mutationObserver) => console.log(mutationRecords,mutationObserver));
// [MutationRecord], MutationObserver
// 2、使用observe()方法，参数有2个，分别为要观察其变化的 DOM 节点，以及一个 MutationObserverInit 对象
observer.observe(document.body, { attributes: true });
// 3、执行以上代码后，<body>元素上任何属性发生变化都会被这个 MutationObserver 实例发现，然后就会异步执行注册的回调函数。
// <body>元素后代的修改或其他非属性修改都不会触发回调进入任务队列。

回调与变化记录 MutationRecord

每个回调都会收到一个 MutationRecord 实例的数组，例包含的信息包括发生了什么变化，以及 DOM 的哪一部分受到了影响。

因为回调执行之前可能同时发生多个满足观察条件的事件，所以每次执行回调都会传入一个包含按顺序入队的 MutationRecord 实例的数组

document.body.setAttribute('foo', 'bar'); 
/*
MutationRecord 实例的数组
[ 
  { 
      addedNodes: NodeList [], // 包含变化中添加节点的 NodeList
        attributeName: "foo", // 被修改属性的名字
        attributeNamespace: null, // 对于使用了命名空间的"attributes"类型的变化，这里保存被修改属性的名字
        nextSibling: null, // 回变化节点的后一个同胞 Node
        oldValue: null, // 被替代的值
        previousSibling: null, // 变化节点的前一个同胞 Node 
        removedNodes: NodeList [], // 包含变化中删除节点的 NodeList
        target: body, // 被修改影响的目标节点
        type: "attributes" // 字符串，表示变化的类型:"attributes"、"characterData"或"childList"
    } 
]
*/

连续修改会生成多个 MutationRecord 实例，下次回调执行时就会收到包含所有这些实例的数组，顺序为变化事件发生的顺序

document.body.className = 'foo'; 
document.body.className = 'bar'; 
document.body.className = 'baz'; 
// [MutationRecord, MutationRecord, MutationRecord]

停止观察disconnect( )

默认情况下，只要被观察的元素不被垃圾回收，MutationObserver 的回调就会响应 DOM 变化事件，从而被执行。

要提前终止执行回调，可以调用 disconnect()方法。

下面的例子演示了同步调用disconnect()之后，不仅会停止此后变化事件的回调，也会抛弃已经加入任务队列要异步执行的回调。

observer.disconnect(); 
document.body.className = 'bar'; 
//（没有日志输出）
// 要想让已经加入任务队列的回调执行，可以使用 setTimeout()让已经入列的回调执行完毕再调用disconnect()
setTimeout(() => { 
 observer.disconnect(); 
 document.body.className = 'bar'; 
}, 0); 
// <body> attributes changed

复用 MutationObserver

多次调用 observe()方法，可以复用一个 MutationObserver 对象观察多个不同的目标节点。

此时，MutationRecord 的 target 属性可以标识发生变化事件的目标节点。

let observer = new MutationObserver( 
 (mutationRecords) => console.log(mutationRecords.map((x) => x.target)) // 只返回target被修改的目标
); 
// 向页面主体添加两个子节点
let childA = document.createElement('div'), 
 childB = document.createElement('span'); 
document.body.appendChild(childA); 
document.body.appendChild(childB); 
// 观察两个子节点
observer.observe(childA, { attributes: true }); 
observer.observe(childB, { attributes: true }); 
// 修改两个子节点的属性
childA.setAttribute('foo', 'bar'); 
childB.setAttribute('foo', 'bar'); 
// [<div>, <span>]
// 调用它会停止观察所有目标
observer.disconnect();

重新观察 observe( )

let observer = new MutationObserver(() => console.log('<body> attributes changed')); 
observer.observe(document.body, { attributes: true }); 
// 这行代码会触发变化事件
document.body.setAttribute('foo', 'bar'); 
setTimeout(() => { 
 observer.disconnect(); 
 // 这行代码不会触发变化事件
 document.body.setAttribute('bar', 'baz'); 
}, 0); 
setTimeout(() => { 
 // 重新观察
 observer.observe(document.body, { attributes: true }); 
 // 这行代码会触发变化事件
 document.body.setAttribute('baz', 'qux'); 
}, 0); 
// <body> attributes changed 
// <body> attributes changed

能观察什么 { }

let observer = new MutationObserver(() => console.log('<body> attributes changed')); 
observer.observe(document.body, { attributes: true }); // 第二个参数就是能观察什么的MutationObserverInit 对象

默认都为false

subtree 布尔值，表示除了目标节点，是否观察目标节点的子树（后代）
如果是 false，则只观察目标节点的变化；如果是 true，则观察目标节点及其整个子树

attributes 布尔值，表示是否观察目标节点的属性变化

attributeFilter 字符串数组，表示要观察哪些属性的变化（ { attributeFilter: [‘foo’] } ）
把这个值设置为 true 也会将 attributes 的值转换为 true 默认为观察所有属性

attributeOldValue 布尔值，表示 MutationRecord 是否记录变化之前的属性值
把这个值设置为 true 也会将 attributes 的值转换为 true

characterData 布尔值，表示修改字符数据是否触发变化事件

characterDataOldValue 布尔值，表示 MutationRecord 是否记录变化之前的字符数据
把这个值设置为 true 也会将 characterData 的值转换为 true

childList 布尔值，表示修改目标节点的子节点是否触发变化事件

至少有一项为 true，否则会报错

清空记录队列并取出 takeRecords()

MutationObserver 接口是出于性能考虑而设计的，其核心是异步回调与记录队列模型。

为了在大量变化事件发生时不影响性能，每次变化的信息（由观察者实例决定）会保存在 MutationRecord 实例中，然后添加到记录队列。

这在希望断开与观察目标的联系，但又希望处理由于调用 disconnect()而被抛弃的记录队列中的 MutationRecord 实例时比较有用

let observer = new MutationObserver( 
 (mutationRecords) => console.log(mutationRecords)); 
observer.observe(document.body, { attributes: true }); 
document.body.className = 'foo'; 
document.body.className = 'bar'; 
document.body.className = 'baz'; 
console.log(observer.takeRecords()); 
// [MutationRecord, MutationRecord, MutationRecord] 
console.log(observer.takeRecords()); 
// []

性能、内存与垃圾回收

DOM Level 2 规范中描述的 MutationEvent 定义了一组会在各种 DOM 变化时触发的事件。

由于浏览器事件的实现机制，这个接口出现了严重的性能问题。因此，DOM Level 3 规定废弃了这些事件。

MutationObserver 接口就是为替代这些事件而设计的更实用、性能更好的方案。

将变化回调委托给微任务来执行可以保证事件同步触发，同时避免随之而来的混乱。

为 MutationObserver 而实现的记录队列，可以保证即使变化事件被爆发式地触发，也不会显著地拖慢浏览器。

无论如何，使用 MutationObserver 仍然不是没有代价的。因此理解什么时候避免出现这种情况就很重要了。

1. MutationObserver 的引用

MutationObserver 拥有对要观察的目标节点的弱引用。因为是弱引用，所以不会妨碍垃圾回收程序回收目标节点。

然而，目标节点却拥有对 MutationObserver 的强引用。如果目标节点从 DOM 中被移除，随后被垃圾回收，则关联的 MutationObserver 也会被垃圾回收。

2. MutationRecord 的引用

记录队列中的每个 MutationRecord 实例至少包含对已有 DOM 节点的一个引用。

如果变化是 childList 类型，则会包含多个节点的引用。

记录队列和回调处理的默认行为是耗尽这个队列，处理每个 MutationRecord，然后让它们超出作用域并被垃圾回收。

有时候可能需要保存某个观察者的完整变化记录。

保存这些 MutationRecord 实例，也就会保存它们引用的节点，因而会妨碍这些节点被回收。

如果需要尽快地释放内存，建议从每个 MutationRecord 中抽取出最有用的信息，然后保存到一个新对象中，最后抛弃 MutationRecord。

let observer = new MutationObserver( 
 (mutationRecords) => console.log(mutationRecords)); 
observer.observe(document.body, { attributes: true }); 
document.body.className = 'foo'; 
document.body.className = 'bar'; 
document.body.className = 'baz'; 
let a = observer.takeRecords()[0].attributeName

编程

JS - 观察DOM元素变化接口