Mutation Observer優點

利用Mutation Observer可以監聽DOM屬性節點或者子節點的增加或者刪除等變化。

Mutation Observer是DOM4增加，也就是HTML5新增的API。

與之類似，DOM3增加的Mutation Events也可以完成類似功能。

由於存在一系列問題，W3C已經將Mutation Events廢棄，不過當前依然得到部分瀏覽器支援。

更多關於HTML5內容可以參閱HTML5 API版塊。

一.Mutation Events：

首先簡單介紹一下Mutation Events，它能夠監聽DOM樹結構的變化。

程式碼片段如下：

[JavaScript] 純文字檢視 複製程式碼
document.getElementById("ant").addEventListener("DOMSubtreeModified", function () {
  console.log("螞蟻部落");
}, false);

子節點被修改，那麼就會在控制檯輸出"螞蟻部落"。

當然Mutation Events還包括其他不少事件，這裡就不介紹了。

主要缺點如下：

（1）.瀏覽器相容性問題很大，並且W3C已經將其廢棄。

（2）.效能較差，Mutation Events是同步操作，節點的每次變動，都會觸發事件，如果節點連續進行一萬次變動，那麼事件會連續觸發一萬次，執行一萬次回撥函式，很有可能導致瀏覽器卡頓的現象。

（3）.Mutation Events是真正的事件，存在冒泡現象，可能會觸父級Mutation Events事件，導致一些問題。

二.Mutation Observer：

它被用來替代Mutation Events，所有的監視操作會在其他指令碼執行完畢後非同步執行。

所有的變化都記錄在陣列中，最後統一使用回撥函式處理，例如一個dom元素進行了若干變化，每一次變化都會暫時儲存在一個陣列中，等所有指令碼執行完成，通過回撥函式來統一執行每一次變化對應的動作。

特別說明：Mutation Observer在功能上類似於事件，但是並不是真正的事件。

瀏覽器相容性：

從上圖看，Mutation Observer的瀏覽器支援度還是非常不錯的。

主要優點如下：

（1）.瀏覽器相容性更好。

（2）.因為是非同步操作，所以效能會更好。