大型 DOM 樹狀結構,有多種方式會拖慢網頁效能:
網路效率和負載效能
大型 DOM 樹狀結構通常包含許多在使用者首次載入網頁時看不到的節點,因此會增加使用者的數據用量費用,並拖慢載入時間。
執行階段效能
使用者和指令碼與網頁互動時,瀏覽器必須持續重新計算節點的位置和樣式。搭配使用大型 DOM 樹狀結構與複雜的樣式規則,可能會大幅降低顯示速度。
記憶體效能
如果您的 JavaScript 使用
document.querySelectorAll('li')
等一般查詢選取器,您可能在不知情的情況下儲存對大量節點的參照,這可能會大幅影響使用者裝置的記憶體功能。
Lighthouse DOM 大小稽核失敗原因
Lighthouse 會回報網頁的 DOM 元素總數、頁面的 DOM 深度上限以及子項元素上限:
具有 DOM 樹狀結構的 Lighthouse 旗標頁面,如下所示:
- 當 body 元素包含超過 800 個節點時發出警告。
- 當 body 元素包含超過 1,400 個節點時的錯誤。
如何最佳化 DOM 大小
一般來說,請只在必要時尋找建立 DOM 節點的方法,並刪除不再需要的節點。
如果您目前出貨的大型 DOM 樹狀結構,請嘗試載入網頁,然後手動記下會顯示哪些節點。也許您可以從最初載入的文件中移除未顯示的節點,只能在與使用者相關的使用者互動後 (例如捲動或點選按鈕) 建立節點。
如果在執行階段建立 DOM 節點,子樹狀結構修改 DOM 變更中斷點可協助您找出節點建立時的定位。
如果無法避免大型 DOM 樹狀結構,另一個改善算繪效能的方法就是簡化 CSS 選取器。詳情請參閱 Google 的減少樣式計算的範圍和複雜度。
堆疊專屬指南
Angular
如要轉譯大型清單,請搭配元件開發套件 (CDK) 使用虛擬捲動功能。
回應
- 如要在網頁上轉譯許多重複的元素,請使用「視窗化」程式庫 (例如
react-window
),盡可能減少系統建立的 DOM 節點數量。 - 使用
shouldComponentUpdate
、PureComponent
或React.memo
盡量減少不必要的重新轉譯。 - 只有在使用
Effect
掛鉤改善執行階段效能時,才需要略過特定依附元件,直到特定依附元件變更為止。