避免 DOM 過大

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

  • 網路效率和負載效能

    大型 DOM 樹狀結構通常包含許多使用者初次載入網頁時看不到的節點，這會增加使用者的資料費用並拖慢載入時間。

  • 執行階段效能

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

  • 記憶體效能

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

Lighthouse DOM 大小稽核失敗方式

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

避免進行 DOM 大小的 Ligthhouse 稽核，以便顯示 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 掛鉤來改善執行階段效能時，才略過效果，直到某些依附元件變更為止。

資源