大型 DOM 樹狀結構，有多種方式會拖慢網頁效能：
網路效率和負載效能
大型 DOM 樹狀結構通常包含許多在使用者首次載入網頁時看不到的節點，因此會增加使用者的數據用量費用，並拖慢載入時間。
執行階段效能
使用者和指令碼與網頁互動時，瀏覽器必須持續重新計算節點的位置和樣式。搭配使用大型 DOM 樹狀結構與複雜的樣式規則，可能會大幅降低顯示速度。
記憶體效能
如果您的 JavaScript 使用
document.querySelectorAll('li')等一般查詢選取器，您可能在不知情的情況下儲存對大量節點的參照，這可能會大幅影響使用者裝置的記憶體功能。
Lighthouse DOM 大小稽核失敗原因
Lighthouse 會回報網頁的 DOM 元素總數、頁面的 DOM 深度上限以及子項元素上限：
具有 DOM 樹狀結構的 Lighthouse 旗標頁面，如下所示：
- 當 body 元素包含超過 800 個節點時發出警告。
- 當 body 元素包含超過 1,400 個節點時的錯誤。
如何最佳化 DOM 大小
一般來說，請只在必要時尋找建立 DOM 節點的方法，並刪除不再需要的節點。
如果您目前出貨的大型 DOM 樹狀結構，請嘗試載入網頁，然後手動記下會顯示哪些節點。也許您可以從最初載入的文件中移除未顯示的節點，只能在與使用者相關的使用者互動後 (例如捲動或點選按鈕) 建立節點。
如果在執行階段建立 DOM 節點，子樹狀結構修改 DOM 變更中斷點可協助您找出節點建立時的定位。
如果無法避免大型 DOM 樹狀結構，另一個改善算繪效能的方法就是簡化 CSS 選取器。詳情請參閱 Google 的減少樣式計算的範圍和複雜度。
堆疊專屬指南
Angular
如要轉譯大型清單，請搭配元件開發套件 (CDK) 使用虛擬捲動功能。
回應
- 如要在網頁上轉譯許多重複的元素，請使用「視窗化」程式庫 (例如
react-window)，盡可能減少系統建立的 DOM 節點數量。 - 使用
shouldComponentUpdate、PureComponent或React.memo盡量減少不必要的重新轉譯。 - 只有在使用
Effect掛鉤改善執行階段效能時，才需要略過特定依附元件，直到特定依附元件變更為止。