大型 DOM 樹狀結構可能會透過多種方式降低網頁效能:
網路效率和負載效能
大型 DOM 樹狀結構通常包含許多使用者初次載入網頁時看不到的節點,這會增加使用者的資料費用並拖慢載入時間。
執行階段效能
當使用者和指令碼與您的網頁互動時,瀏覽器必須持續重新計算節點的位置和樣式。大型 DOM 樹狀結構搭配複雜的樣式規則時,可能會大幅減慢顯示速度。
記憶體效能
如果 JavaScript 使用一般查詢選取器 (例如
document.querySelectorAll('li')
),您可能在不知情的情況下儲存對大量節點的參照,這可能會導致使用者裝置的記憶體功能過大。
Lighthouse DOM 大小稽核失敗方式
Lighthouse 會回報網頁的 DOM 元素總數、頁面的最大 DOM 深度,以及其子項元素上限:
![避免進行 DOM 大小的 Ligthhouse 稽核,以便顯示 DOM 元素總量、DOM 深度和子項元素上限。](https://developer.chrome.google.cn/static/docs/lighthouse/performance/dom-size/image/lighthouse-excessive-dom-size-audit.png?authuser=3&hl=zh-tw)
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
掛鉤來改善執行階段效能時,才略過效果,直到某些依附元件變更為止。