總經理/帝王引擎 Vince Wu
2022-10-12內容大綱
問題： 【Google-pagespeed】 如何避免 DOM 過大
大型 DOM 會增加記憶體用量、延長樣式運算的時間，並產生費工的版面配置重排。
圖片：
解答：
- 版面：降低div包覆的語法。
- 載入：延遲載入，一開始不需看到的div，可以延遲載入(如懸浮按鈕/最下方的圖片)。
- 虛擬DOM：Virtual DOM (虛擬DOM) Virtual DOM 是透過物件來模擬 DOM 產生的樹狀結構。優點是透過操作這些 Virtual DOM 物件之後，再將這些改動更新到真實的 DOM 上，以期提升效能。因此目前也有一些第三方套件是透過這樣的概念，來解決過大的 DOM 顯示畫面上造成的效能問題，例如 React 生態的 react-virtual 以及 Vue 生態的 vue-virtual-scroller。
- 簡化 CSS：Selector 當我們無法避免巨大的 DOM，又會透過 Javascript 來對 DOM 進行操作時，我們應該避免使用會選取大量 DOM 的 css selector 來操作，否則會消耗大量的記憶體。可以透過降低 css selector 的複雜性的方法，例如 BEM，優化效能。