大型 DOM 大小對互動性的影響，遠比您想的大。本指南將說明原因和建議做法。
如此一來，當您建立網頁時，該網頁就會提供文件物件模型 (DOM)，DOM 代表網頁 HTML 的結構，並且可讓 JavaScript 和 CSS 存取網頁結構和內容。
但問題在於 DOM 的 size 會影響瀏覽器能否快速且有效率地轉譯網頁。一般來說，DOM 越大，一開始轉譯該頁面並後來頁面生命週期更新算繪，費用就越昂貴。
在含有大型 DOM 的網頁上，當互動修改或更新 DOM 會觸發耗用大量資源的版面配置工作，導致網頁快速回應時，就會發生問題。昂貴的版面配置工作可能會影響網頁的「與下一個顯示的內容互動 (INP)」。如果您希望網頁能快速回應使用者互動，請務必確保 DOM 大小只夠大。
網頁的 DOM 什麼時候「過大」？
根據 Lighthouse 的統計，網頁的 DOM 大小超過 1,400 個節點時，即會超出上限。當網頁的 DOM 超過 800 個節點時，Lighthouse 會開始擲回警告。以以下 HTML 為例：
<ul>
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
</ul>
上述程式碼中有四個 DOM 元素：<ul> 元素和其三個 <li> 子元素。您的網頁幾乎肯定會多出許多節點，所以在將網頁的 DOM 縮小成較小範圍後，瞭解該如何保持 DOM 大小檢查，就必須瞭解其他最佳化轉譯工作的策略。
大型 DOM 對網頁效能有何影響？
大型 DOM 對網頁效能造成下列幾種影響：
- 網頁初始轉譯期間。將 CSS 套用至網頁時，系統會建立與 DOM 類似的結構，也就是 CSS 物件模型 (CSSOM)。隨著 CSS 選取器的精確性增加，CSSOM 會變得更加複雜，而需要更多時間來執行必要的版面配置、樣式、合成和繪製工作，以將網頁繪製到畫面上。這新增的工作會增加網頁載入期間早期互動的互動延遲時間。
- 如果互動藉由插入或刪除元素或修改 DOM 內容與樣式而修改 DOM，轉譯更新所需的工作可能會導致版面配置、樣式、合成和繪製工作所費不貲。如同網頁的初始轉譯，當 HTML 元素因互動而插入 DOM 時，CSS 選取器的特性會增加以轉譯工作。
- 當 JavaScript 查詢 DOM 時，DOM 元素的參照會儲存在記憶體中。舉例來說，如果您呼叫
document.querySelectorAll來選取頁面上的所有<div>元素，如果結果傳回大量 DOM 元素，就可以將記憶體成本納入考量。
以上所有項目都會影響互動性，但上述清單中的第二個項目特別重要。如果互動導致 DOM 改變，它可能會啟動許多會造成網頁上 INP 不佳的工作。
如何測量 DOM 大小？
您可以透過幾種方式測量 DOM 大小。第一種方式是使用 Lighthouse。執行稽核時，目前網頁 DOM 的統計資料，會在「診斷」標題下方顯示「避免過多 DOM 大小」稽核。這個部分會顯示 DOM 元素總數、包含最多子元素的 DOM 元素，以及最深的 DOM 元素。
另一個更簡單的方法，就是透過任何主要瀏覽器在開發人員工具中使用 JavaScript 控制台。如要取得 DOM 中的 HTML 元素總數，您可以在頁面載入後，在控制台中使用下列程式碼：
document.querySelectorAll('*').length;
如要查看即時更新 DOM 大小，也可以使用效能監控工具。您可以使用這項工具，將版面配置、樣式作業 (和其他效能層面) 與目前的 DOM 大小建立關聯。
如果 DOM 大小即將達到 Lighthouse DOM 大小的警告門檻 (或完全失效)，下一步就是瞭解如何縮減 DOM 大小，改善網頁回應使用者互動的能力，進而改善網站的 INP。
如何評估受互動影響的 DOM 元素數量？
如果分析研究室中的互動速度緩慢，而您認為這可能需要與網頁 DOM 的大小有關，您可以在分析器中選取「重新計算樣式」這個分析器中的任一活動，然後觀察底部面板中的內容相關資料，瞭解有多少 DOM 元素受到影響。
在上方螢幕截圖中，您會發現系統重新計算工作的樣式 (選取時) 顯示了受影響元素的數量。雖然以上螢幕截圖顯示了在具有許多 DOM 元素的網頁上， DOM 大小對轉譯工作的影響極大，但不論何種情況，此診斷資訊都非常實用，有助您判斷 DOM 大小是否為限制因素，用來判斷回應互動時要繪製下一個影格所需的時間。
如何縮減 DOM 大小？
除了稽核網站的 HTML 是否包含不必要的標記之外，縮減 DOM 大小的主要方法也是縮減 DOM 深度。您可能會在瀏覽器開發人員工具的「Elements」分頁中看到類似以下的標記，這表示 DOM 可能不需要太深了：
<div>
<div>
<div>
<div>
<!-- Contents -->
</div>
</div>
</div>
</div>
看到這類模式時，您可以簡化 DOM 結構來簡化這些模式。這樣會減少 DOM 元素的數量，讓您有機會簡化網頁樣式。
DOM 深度也可能是您所用架構的徵兆。具體來說，元件式架構 (例如依賴 JSX 的架構) 需要在上層容器中嵌入多個元件。
不過，許多架構都可讓您使用所謂的片段，避免建立巢狀結構的元件。以元件為基礎的架構提供片段做為功能，包括但不限於：
在您選擇的架構中使用片段，可減少 DOM 深度。如果您擔心 DOM 結構對樣式的影響，建議使用較新 (且速度更快) 的版面配置模式，例如 flexbox 或 grid。
其他建議策略
即使您想簡化 DOM 樹狀結構並移除不必要的 HTML 元素，盡可能縮減 DOM 規模，仍可能會變得相當龐大，而且會隨著使用者互動而改變，啟動大量轉譯工作。如果您發現自己這個位置，可以考慮其他策略限制轉譯工作。
考慮採取累加性做法
您可能位於某個位置，一開始載入網頁時，使用者一開始就看不到其中的許多部分。這時，您可能會在啟動時省略 DOM 的這些部分，藉此延遲載入 HTML；但如果使用者與網頁初始隱藏部分的互動，則應該加入這些元素。
此方法在初始載入期間，甚至之後可能都很有用。針對初次載入頁面，您減少了前置的算繪工作，這表示初始 HTML 酬載會較快，顯示速度也會更快。這樣一來，重要期間的互動就會增加，爭取主要執行緒注意力的機會。
如果網頁上有許多部分在載入時一開始隱藏，也可能導致其他互動速度加快重新轉譯工作的速度。不過，隨著其他互動在 DOM 中新增更多互動，隨著 DOM 在整個網頁生命週期中逐漸成長，算繪工作也會不斷增加。
隨著時間推移而新增至 DOM 可能不太容易，也各有優缺點。如果您決定執行此路徑，可能會提出網路要求，以便取得資料來填入您要新增至網頁中的 HTML，藉此回應使用者互動。雖然傳輸中的網路要求不會計入 INP，但可能會增加感知延遲時間。如果可以，請顯示載入旋轉圖示或其他表示正在擷取資料的指標，讓使用者瞭解發生了什麼事。
限制 CSS 選取器複雜度
瀏覽器剖析 CSS 中的選取器時，必須週遊 DOM 樹狀結構，瞭解這些選取器會如何套用至目前的版面配置，以及是否符合條件。這些選取器越複雜，瀏覽器為了執行網頁初始轉譯作業需要花費更多心力。此外，如果頁面因互動而改變，樣式重新計算和版面配置也會運作。
使用 content-visibility 屬性
CSS 提供 content-visibility 屬性，可有效地延遲轉譯畫面外的 DOM 元素。元素接近可視區域時，會以隨選方式呈現。content-visibility 的優點不僅可減少初始頁面轉譯作業的大量轉譯工作，而且當網頁 DOM 因使用者互動而變更時，會略過螢幕外元素的轉譯工作。
結語
若要最佳化網站的 INP，建議您只在必要時縮減 DOM 大小。這樣可以減少 DOM 更新時，瀏覽器執行版面配置和轉譯工作所需的時間。即使您無法有效縮減 DOM 大小，您也可以使用一些技巧，將轉譯工作隔離於 DOM 子樹狀結構，例如 CSS 隔離和 content-visibility CSS 屬性。
無論如何，建立能盡量減少轉譯工作的環境，以及減少網頁回應互動的轉譯工作量，您的網站在使用者與這些互動時，會得到更多回應。也就是說，網站的 INP 數量會較低，且可帶來更優質的使用者體驗。
主頁橫幅由 Louis Reed 製作，內容為「Unsplash」。