Mutation Observer

DOM Level 4 裡面提出了一個新的 DOM Mutation 的對應機制,叫做 Mutation Observer,顧名思義,它是 observer pattern 的一種,和以前的 Mutation Event 比起來有不少優點,現在大家也都建議使用 Mutation Obeserver 而不要用 Mutation Events 了。主要的差異是:

  1. Observer 是非同步的,效能比較好
  2. DOM change 整理成 mutation record 給你
  3. 可以察看所有的 DOM 變動,也可以只注意想要的變動

這邊要先解釋第一點,可能會有人覺得 Mutation Event 也是非同步的,不過實際上,在 event callback 的 function call 內,整個算是一個同步的執行 process,也就是說一個 mutation event 發生後,一定會執行對應的 event callback,而且開始執行後中間不會插入其他的東西,這樣的行為有個缺點就是,如果我要在一個 function process 中一口氣砍掉 100 個節點,然後又有綁 mutation event 來作對應的處理,不過如果這個對應的處理動作可以等到最後在執行就好的話,用 Mutation Event 就會被迫多執行 99 次。但是 Mutation Observer 則是非同步的機制,就是不會你的 DOM 有一點變動就會引發它去執行 callback,而是等你的 function process 結束,timer 空出來時才會去檢查,然後一口氣把所有變動整理好丟到 callback 裡面。

目前支援的程度也還不錯,Mutation Observer 用起來也不難,只是它就真的是一個獨立的觀察者物件,剛開始看到可能會不太習慣,可以參考 Dev.Opera 的 Getting to know mutation observers 這篇文章,講的蠻詳細,包括怎樣偵測瀏覽器有沒有支援,如果是沒有支援的瀏覽器,一是可以 fallback 到 Mutation Event 做事,另一個則是可以用 Polymer 的 Mutation Observer polyfill,底層也是用 Mutation Event 來達成的就是。