避免 DOM 過大

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

  • 網路效率和載入效能

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

  • 執行階段效能

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

  • 記憶體效能

    如果 JavaScript 使用 document.querySelectorAll('li') 等一般查詢選取器，您可能會不知不覺地儲存大量節點的參照，這可能會超出使用者裝置的記憶體能力。

Lighthouse DOM 大小稽核失敗的原因

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

避免對 DOM 大小的 Ligthhouse 稽核進行過多的 DOM 元素 (顯示 DOM 元素總數、DOM 深度和子項元素上限)。
Lighthouse 會標示 DOM 大小過大的詳細資料

Lighthouse 會標記含有下列 DOM 樹狀結構的網頁：

  • 當 body 元素超過 800 個節點時顯示警告。
  • 當 body 元素包含超過 1,400 個節點時發生錯誤。

如何最佳化 DOM 大小

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

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

如果您在執行階段建立 DOM 節點，子樹修改 DOM 變更中斷點可協助您找出節點建立的時間。

如果無法避免大型 DOM 樹狀結構，另一種改善算繪效能的做法是簡化 CSS 選取器。詳情請參閱 Google 的縮減樣式計算的範圍和複雜度。

詳情請參閱「DOM 大小對互動性造成的影響，以及您可以採取的行動」一文。

堆疊專屬指南

Angular

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

回應

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

資源