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。