偵錯 DOM 記憶體流失 (「已中斷連結的專案」分析類型)

使用 記憶體 工具的 卸離專案 分析類型，在網頁上尋找並顯示所有中斷連結的專案。 如需檢視中斷連結專案的工具比較，請參閱修正記憶體問題中用於調查中斷連結元素的工具。

中斷連結的元素分析類型可協助您修正因中斷連結的 DOM 元素而造成的記憶體流失。 產生的配置檔會列出 JavaScript 程式代碼中參考所保留的中斷連結物件。 此分析類型會顯示中斷連結節點的檢視，以協助您識別網頁上可能的記憶體流失。

分析網頁的中斷連結元素

若要使用 Detached 專案 分析類型來分析網頁的中斷連結元素：

1. 在新的視窗或索引標籤中開啟網頁，例如 [卸離的元素] 示範網頁。

2. 以滑鼠右鍵按兩下網頁，然後選取 [ 檢查]。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。

   DevTools 隨即開啟。

3. 在 DevTools 的 [活動列] 中，選取 [ 記憶體 () 工具。

   如果看不到該索引標籤，請按兩下 [ 其他工具 ] ([ ) 按鈕，然後選取 [ 記憶體]。 記憶體工具隨即開啟：

   

   如果未顯示 [ 中斷連結的元素 ] 選項按鈕，因為已顯示配置檔，請按下左上方的 [ 配置檔 () 。

   您此時不需要選取 [ 中斷連結的元素 ] 選項按鈕，因為網頁尚未產生任何中斷連結的元素。

   產生訊息，這會由 Room 類別的 JavaScript 實例儲存：

   一開始會選取 [會議室 1 ] 按鈕。 在示範網頁的 JavaScript 程式代碼中，會使用 類別的 Room 實例來管理會議室 1 中的訊息。

4. 在示範網頁中，按兩下 [ 快速流量] 按鈕。

   示範網頁會開始產生訊息，並在網頁中顯示：

   

5. 顯示某些訊息之後，按兩下示範網頁中的 [ 停止 ] 按鈕。

   每個訊息都是 <div class="message"> 類別的 Room 1 實例所參考的專案 Room 。 網頁 DOM 樹狀結構中沒有中斷連結的元素，因為所有訊息元素都會附加至 Room 類別的目前 Room 1 實例。

   變更為 Room 類別的不同實例，因此元素會中斷連結：

6. 在示範網頁中，按兩下 [ 會議室 2 ] 按鈕，其對應至類別的另一個實 Room 例。

   在網頁中，訊息會消失：

   

   針對 Room 類別的 Room 1 實例產生的訊息 (<div class="message">) 元素不再附加至 DOM，但 Room 類別的 Room 1 實例仍會參考這些訊息。 它們是中斷連結的元素，除非網頁再次使用它們，否則可能會造成記憶體流失。

   取得中斷連結元素的清單：

7. 在 DevTools 的 [ 記憶體 ] 工具中，選取 [ 中斷鏈接的元素 ] 選項按鈕，然後按兩下 [ 開始] 按鈕。

   已中斷連結的節點清單會顯示在所產生中斷連結元素設定檔的 [中斷連結的節點] 資料列中：

   

   卸離的元素會顯示為 DOM 節點，就像在 Elements 工具的 DOM 樹狀結構中一樣。 在 [ 配置檔] 清單的 [ 中斷連結的元素 ] 區段中，會列出配置檔。

8. 展開 DOM 節點，以在 DOM 節點 (顯示其子元素) ：

   

   如果應用程式不會重複使用這些中斷連結的元素 (DOM 節點) 記憶體流失。

如果您想要返回分析類型的單選按鈕清單，請按兩下 [記憶體 ] 工具左上方的 [ 設定檔 ] ([ ) 。

如需評估記憶體流失的其他方式，請參閱修正記憶體問題中用於調查中斷鏈接元素的工具。

關於中斷連結的專案和記憶體流失

中斷連結的專案不一定是記憶體流失的指示，而且記憶體流失不一定是由中斷連結的專案所造成。 記憶體流失取決於應用程式的內容。

當專案不再附加至檔物件模型 (DOM) 樹狀結構，但仍由網頁上執行的某些 JavaScript 參考時，您的應用程式中可能會發生記憶體流失。 這些元素稱為 中斷連結的專案。 若要讓瀏覽器進行垃圾收集 (GC) 卸離元素，則不得從 DOM 樹狀結構或 JavaScript 程式代碼參考元素。

記憶體問題會影響網頁效能，包括記憶體流失、記憶體 Bloat 和頻繁的垃圾收集。 使用者的徵兆包括：

• 網頁的效能會隨著時間逐漸變差。
• 網頁的效能一直不佳。
• 網頁的效能會延遲或顯示為經常暫停。

若要提高網頁的效能，請尋找與 DOM 樹狀結構中斷連結且未預期仍會被 JavaScript 程式代碼參考的專案。 尋找瀏覽器無法垃圾收集的中斷鏈接元素，因為您的程式代碼仍然會參考它們，然後將 JavaScript 程式代碼參考釋出至中斷連結的專案。

重新附加元素

針對 [中斷連結的元素] 示範網頁，保留聊天訊息清單是合理的，因此，如果使用者切換回 會議室 1，就會保留訊息記錄檔。 同樣地，社交媒體中的摘要可能會在使用者捲動超過元素時中斷連結，並在使用者向上捲動時將其重新附加至 DOM。

當 卸離的元素 工具報告中斷連結的專案時，不一定是記憶體流失。 您必須決定什麼是記憶體流失，哪些不是。 或許您的應用程式稍後會重新附加這些元素 (，而不需要重新建立它們，這可能會) 較慢。

中斷連結 DOM 節點是很實用的方法，只要您最終會重複使用這些中斷連結的元素， (或將其刪除) 。 [中斷連結的元素] 工具的值是，當您懷疑記憶體流失時，您可以檢查工具是否報告的非預期中斷連結 DOM 元素數目是否增加。

長時間執行的應用程式和卸載元件

請務必卸除元件。 對於長時間執行的應用程式，只有數 KB 的小型記憶體流失可能會隨著時間明顯降低效能。 對於使用 React 架構的網頁，React 維護 DOM 的虛擬化複本。 無法正確卸除元件可能會導致應用程式洩漏虛擬 DOM 的大量部分。

另請參閱

• 修正記憶體問題中用於調查中斷連結元素的工具。
• 中斷連結的元素示範網頁
  • MicrosoftEdge/Demos > detached-elements 存放庫資料夾 - 原始程式碼。