MutationObserver的基本使用与实际应用场景

MutationObserver说白了就是一个可以监听DOM树改变的东西，它的前身是Mutation Events

var observer = new MutationObserver(callback);

callback，即回调函数接收两个参数，第一个参数是一个包含了所有 MutationRecord 对象的数组，第二个参数则是这个MutationObserver 实例本身。

调用构造函数new MutationObserver(opt)会返回一个观察者（observer），然后他有三个方法：

• disconnect()
  阻止 MutationObserver 实例继续接收的通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会再被调用。
• observe(Node target, optional MutationObserverInit options)
  配置MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接收通知。
• takeRecords()
  从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到MutationRecord对象的新Array中。

具体使用可以参考
深入 MutationObserver
聊聊JS DOM变化的监听检测与应用

实际应用场景

客户端图片优化
如果是在一个瀑布流图片的网页里，可以用MutationObserver观察者，在图片插入到dom之前把图片资源给优化一下。

具体可以参考：传送门