HTML5新特性之Mutation Observer
Mutation Observer API 用來監視 DOM 變動。DOM 的任何變動,比如節點的增減、屬性的變動、文字內容的變動,這個 API 都可以得到通知。
概念上,它很接近事件,可以理解為 DOM 發生變動就會觸發 Mutation Observer 事件。但是,它與事件有一個本質不同:事件是同步觸發,也就是說,DOM 的變動立刻會觸發相應的事件;Mutation Observer 則是非同步觸發,DOM 的變動並不會馬上觸發,而是要等到當前所有 DOM 操作都結束才觸發。
這樣設計是為了應付 DOM變動頻繁的特點。舉例來說,如果文件中連續插入1000個p元素,就會連續觸發1000個插入事件,執行每個事件的回撥函式,這很可能造成瀏覽器的卡頓;而 Mutation Observer完全不同,只在1000個段落都插入結束後才會觸發,而且只觸發一次。
Mutation Observer 有以下特點。