大型 DOM 樹狀結構可能會透過多種方式降低網頁效能：
網路效率和負載效能
大型 DOM 樹狀結構通常包含許多使用者初次載入網頁時看不到的節點，這會增加使用者的資料費用並拖慢載入時間。
執行階段效能
當使用者和指令碼與您的網頁互動時，瀏覽器必須持續重新計算節點的位置和樣式。大型 DOM 樹狀結構搭配複雜的樣式規則時，可能會大幅減慢顯示速度。
記憶體效能
如果 JavaScript 使用一般查詢選取器 (例如
document.querySelectorAll('li'))，您可能在不知情的情況下儲存對大量節點的參照，這可能會導致使用者裝置的記憶體功能過大。
Lighthouse DOM 大小稽核失敗方式
Lighthouse 會回報網頁的 DOM 元素總數、頁面的最大 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掛鉤來改善執行階段效能時，才略過效果，直到某些依附元件變更為止。