Connor Clark
發布日期：2025 年 10 月 8 日
大型 DOM 可能會增加樣式運算和版面配置的時間，影響網頁的回應速度。大型 DOM 也會增加記憶體用量。
深層 DOM 樹狀結構本身不會造成效能問題，但這是使用不必要元素巢狀結構的設計模式徵兆。
這項洞察資訊會考量整個 DOM，包括陰影根目錄中的 DOM。並忽略並非元素的 DOM 節點。也會忽略 <iframe> 內容。
報告重點：
- 元素總數：網頁 DOM 中的元素總數。
- DOM 深度：DOM 樹狀結構的最大深度。
- 最多子項：子項元素最多的元素。
如何通過這項深入分析
只有在大型版面配置或樣式重新計算超過 40 毫秒時，這項洞察資訊才會失敗。
- 大型版面配置更新包含超過 100 個版面配置物件 (大致上是元素)。
- 大型樣式重新計算會影響超過 300 個元素。
如果失敗，這項洞察資訊會在「效能」面板的火焰圖中，醒目顯示這些事件。
如要降低這些活動的費用，請採取下列做法：
- 瞭解如何評估 CSS 選取器的成本，並降低樣式複雜度。
- 減少不必要的巢狀結構，盡量縮減 DOM 的深度。
- 建議採用 Web Components 使用 Shadow DOM，雖然這不會縮減 DOM 大小，但可減少樣式重新計算的成本。
堆疊專屬指南
這項洞察資料也會針對使用下列技術的網頁，提供堆疊專屬的指引：
Angular
如果要轉譯大型清單，請使用元件開發套件 (CDK) 進行虛擬捲動。
回應
- 如要在網頁上轉譯許多重複的元素，建議使用「視窗化」程式庫 (例如
react-window)，盡可能減少系統建立的 DOM 節點數量。 - 使用
shouldComponentUpdate、PureComponent或React.memo，盡量減少不必要的重新轉譯。 - 如果你使用
EffectHook 改善執行階段的效能，請略過效果，但某些相依性已變更時除外。