html5 mutation observer 不能監聽元素尺寸變化，還有何用？

現在dom樹都是mvvm生成了，最需要的元素尺寸變動監聽為什麼反而沒有支持呢？

MutationObserver 是一個獨立於前端開發者技術棧的介面。因為是以「結果」為導向的，所以可以幫助同一網頁上的多項技術協同工作。不管你是 React 還是 jQuery，最終都會修改 DOM。這對一些第三方擴展還是非常有用的。

另外，你要的 ResizeObserver 在此：https://github.com/WICG/ResizeObserver

可以多關注 https://github.com/WICG 了解 web 新科技。

你大概需要的是這個吧 WICG/ResizeObserver。（原來軼靈大大已經提到了啊，沒有注意到）

在 2016 年 10 月（一年前）Google WebFundamentals 就寫過一篇文章介紹這個 API：ResizeObserver: It"s Like document.onresize for Elements。

從 Chrome 55 Canary 版本開始可以通過開啟實驗性功能開啟對 ResizeObserver 的支持，通過地址欄輸入 chrome://flags/#enable-experimental-web-platform-features，或者搜索「Experimental Web Platform features」都可以開啟。

There is no component counterpart to window.resize event either. ResizeObserver wants to be that counterpart.

你可以在這兒找到各種不同的 Polyfill 實現：Polyfill · Issue #3 · WICG/ResizeObserver，各種庫良莠不齊，我比較喜歡的是 que-etc/resize-observer-polyfill，在代碼質量上比其他庫都優秀，但是對規範的實現還有差了點，算是是對規範和性能上的取捨吧。

通過 que-etc/resize-observer-polyfill 庫我們還可以學到不少知識。

其它的庫都是使用 setTimeout 或者 requestAnimationFrame，在每一幀(60fps)對原始尺寸進行藏檢查。

而 resize-observer-polyfill 首先使用 MutationsObserver API 監聽 DOM 樹的改變，如果不支持 MutationsObserver 則通過監聽 DOMSubtreeModified 事件來監聽某個 DOM 的子節點的改變。當元素的 style 發生變化時，MutationObserver 會監聽到 DOM 的 attributes 改變，當元素的內容發生變化時，MutationObserver 會監聽到 characterData 改變，……

還通過監聽 TransitionEvent 事件實現了對 CSS3 transition 的支持。