Mutation Observers

原文： https://developers.google.com/web/updates/2012/02/Detect-DOM-changes-with-Mutation-Observers

在过去， Mutation Events API 能让开发者更容易的去检测DOM元素是否有改变，可以根据DOM的增删改所触发的事件来做一些业务逻辑的处理（DOMNodeRemoved, DOMAttrModified）

但是这个特性并没有被开发者在普通的web场景下广泛的使用，而是被广泛使用在了Chrome插件的开发上面。

虽然 Mutation Events API 非常有用，但是它很多时候会引起一些性能问题。这一系列的事件响应较慢，同时它被频繁的同步调用会引起意想不到的浏览器bug。

DOM Mutation Observers 将会取代 Mutation Events。Mutation Observers将使用异步回调的方式加快响应DOM发生的改变。

我们来看下面的例子，比如你想收集页面渲染完成之后，被插入的DOM节点，在用 Mutation Events 的时候你会这么写

var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
  insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);

从上面代码中可以看到，如果出发DOM insert 很频繁，那么事件将会频繁响应。如果使用 Mutation Observers 可以这么写

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {
   for (var i = 0; i < mutation.addedNodes.length; i++)
     insertedNodes.push(mutation.addedNodes[i]);
 })
});
observer.observe(document, { childList: true });
console.log(insertedNodes);

通过观察者API，可以批量的处理DOM insert的响应，在一个周期内只会调用一次回调，回调中包含该周期内所有的DOM insert。