MutationObserver 是什么

本接口是监视对DOM树所做的更改的能力，它被设计为替换旧的Mutation Events功能的迭代品

使用方式

// 初始化监控函数
var observer = new MutationOberver(function(mutations){
   for(mutation of mutations) {
    // 监听到dom结构变化了  
  }
})  
//  配置监控的 [`MutationObserverInit`]
observer.observe(document.body, {
    attributeFilter: [], // 要监控的特定属性名称的数组，如果没有属性，则监控对象的所有属性发生变动，都会通知
  attributeOldValue:  Boolean, // 当监控节点的属性改动时，将此属性设为true将记录有改动的属性的上一个值
 attribute: Boolean, // 监听元素属性值发生变动时，触发
 characterData: Boolean，监听目标节点或子节点树中，节点所包含的字符数据的变化
 characterDataOldValue: Boolean,  以文本在受监视节点上发生更改时记录节点文本的先前值
 childlist: Boolean, // 监视目标节点添加删除新的子节点
 subtree: Boolean // 扩展监视范围到目标节点下的整个子树的所有节点
})
// 去掉监控
observer.disconnect()

优化点

此接口与事件的差异是，此接口是全异步的方式，不会阻塞js的执行