監聽Dom節點變化 - Mutation Observer

elvisxiao發表於2019-01-31

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 有以下特點。

它等待所有指令碼任務完成後,才會執行(即非同步觸發方式)。

它把 DOM 變動記錄封裝成一個陣列進行處理,而不是一條條個別處理 DOM 變動。

它既可以觀察 DOM 的所有型別變動,也可以指定只觀察某一類變動。

相關文章