避免 DOM 過大

大型 DOM 樹狀結構會透過多種方式降低網頁效能：

  • 網路效率和負載效能

    大型 DOM 樹狀結構通常包含許多節點，使用者首次載入網頁時不會看到這些節點，但這會不必要地增加使用者的資料費用，並減緩載入時間。

  • 執行階段效能

    當使用者和指令碼與網頁互動時，瀏覽器必須不斷重新計算節點的位置和樣式。大型 DOM 樹狀結構搭配複雜的樣式規則，可能會嚴重拖慢算繪和互動速度。

  • 記憶體效能

    如果 JavaScript 使用一般查詢選取器 (例如 document.querySelectorAll('li'))，您可能會在不知不覺中儲存大量節點的參照，導致使用者裝置的記憶體容量不足。

Lighthouse DOM 大小稽核失敗的原因

Lighthouse 會回報網頁的 DOM 元素總數、網頁的最大 DOM 深度，以及最大子項元素：

避免 DOM 過大。Lighthouse 稽核會顯示 DOM 元素總數、DOM 深度上限和子項元素上限。
Lighthouse 會顯示 DOM 過大的詳細資料

如果網頁的 DOM 樹狀結構符合下列條件，Lighthouse 就會標記該網頁：

  • 當主體元素超過約 800 個節點時，系統會發出警告。
  • 如果主體元素超過約 1,400 個節點，就會發生錯誤。

如何最佳化 DOM 大小

一般來說，請只在必要時建立 DOM 節點，不再需要時則應銷毀節點。

如果傳送的 DOM 樹狀結構很大，請嘗試載入網頁，並手動記下顯示的節點。或許您可以從一開始載入的文件中移除未顯示的節點，並在使用者進行相關互動 (例如捲動或點選按鈕) 後再建立這些節點。

如果您在執行階段建立 DOM 節點，可以利用子樹狀結構修改 DOM 變更中斷點，找出節點的建立時間。

如果無法避免大型 DOM 樹狀結構，簡化 CSS 選擇器也是提升算繪效能的方法。詳情請參閱 Google 的「減少樣式計算的範圍和複雜度」。

詳情請參閱「DOM 大小對互動性的影響，以及解決方法」一文。

堆疊專屬指南

Angular

如果要轉譯大型清單，請使用元件開發套件 (CDK) 進行虛擬捲動。

回應

  • 如要在網頁上轉譯許多重複的元素，建議使用「視窗化」程式庫 (例如 react-window)，盡可能減少系統建立的 DOM 節點數量。
  • 使用 shouldComponentUpdate、PureComponent 或 React.memo，盡量減少不必要的重新轉譯。
  • 如果你使用 Effect Hook 改善執行階段的效能，請略過效果，但某些相依性已變更時除外。

資源