使用 Detached Elements 工具偵錯 DOM 記憶體流失

[中斷連結的元素] 工具是一種在網頁上尋找和顯示所有中斷鏈接元素的方法。 如需評估記憶體流失的其他方式，請參閱修正記憶體問題中用於調查中斷鏈接元素的工具。

重要事項

Detached Elements 工具已被取代。 從 Microsoft Edge 130 開始， Detached Elements 工具有一則訊息，指出工具已被取代;相反地，在 記憶體 工具的初始 [選取分析類型 ] 畫面中，選取 [ 中斷鏈接的元素 ] 選項按鈕。 僅限 Edge 的 Chrome DevTools 通訊協定 (CDP) 函 EdgeDOMMemory.getDetachedNodesIds 式會繼續運作，但請改用 DOM.getDetachedDomNodes 。

在 Microsoft Edge 133 中，將會移除 [中斷鏈接的元素 ] 工具;相反地，在 記憶體 工具的初始 [選取分析類型 ] 畫面中，選取 [ 中斷鏈接的元素 ] 選項按鈕。 移除 CDP 函 EdgeDOMMemory.getDetachedNodesIds 式;請改用 DOM.getDetachedDomNodes 。

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

[中斷連結的元素] 工具會在記憶體工具中顯示保留器，其中包含在 [來源] 工具中開啟 JavaScript 程式代碼的連結：

影片：使用 Microsoft Edge 中斷連結元素工具偵錯記憶體流失

使用 Detached Elements 工具修正記憶體流失的策略

1. 開啟要分析的網頁。
2. 開啟 [中斷連結的元素] 工具。
3. 執行垃圾收集，移除 JavaScript 物件不再參考的所有節點。
4. 取得所有無法進行垃圾收集的中斷鏈接專案。
5. 分析特定的中斷鏈接專案及其 JavaScript，以識別導致整個樹狀結構被保留之中斷連結樹狀結構中的錯誤節點。

取得中斷連結的專案並分析中斷連結專案的 JavaScript

若要使用 [ 中斷 連結的元素] 示範網頁來分析中斷連結的專案：

1. 在新的視窗或索引標籤中開啟 [中斷連結的元素] 示範網頁 。

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

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

   DevTools 隨即開啟。

3. 在 DevTools 的 [ 活動列] 中，選取 [中斷 連結的元素 ([ ) 索引卷標。如果看不到該索引標籤，請按兩下 [ 其他工具 ] ([ ) 按鈕，或讓DevTools變得更寬。 [ 中斷連結的元素] 工具隨即開啟：

   

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

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 的 [卸離專案 ] 工具中，按兩下 [ 收集垃圾 ] ([ ) 圖示。

   瀏覽器會執行垃圾收集，移除 JavaScript 物件不再參考的任何節點。

8. 在 [ 中斷連結的元素 ] 工具中，按兩下 [ 取得中斷連結的元素 ] ([ ) 按鈕。

   系統會顯示無法進行垃圾收集的中斷連結 DOM 元素：

   

   如果應用程式不會重複使用這些中斷連結的元素，則會造成記憶體流失。

   識別參考特定中斷連結專案的 JavaScript 程式代碼：

9. 在 [ 中斷鏈接的元素 ] 工具中，按兩下 [ 分析 () ] 按鈕。

   訊息會短暫顯示在 [ 中斷鏈接的元素 ] 工具的底部、 [擷取記憶體堆積快照集...]，然後顯示 [ 全部完成] 訊息。 記憶體工具會在 DevTools 底部的 [快速檢視] 面板中開啟：

   

   如果 [記憶體] 工具中顯示 [分析類型] 選項按鈕，而不是 [摘要] 和 [保留器] UI，請再次按兩下 [分析 () 按鈕。

10. 在 [中斷鏈接的元素 ] 工具的 [ 標識 符] 數據行中，按兩下標識碼，例如 @21299 或 @21783。

    這是記憶體堆積快照集內其中 <div class="message"> 一個專案的唯一標識符。 記憶體工具會在 [保留器] 索引標籤中顯示保留器：

    

    記憶體工具會自動選取堆積中參考中斷連結項目的物件。 這類對象稱為 保留器。

11. 在 [保留器] 索引卷標中，於成員的unmounted保留子專案中，例如在會議室 @54011 中取消掛接，按兩下連結 room.js：13。

    來源工具會在活動列中開啟，並顯示建構函式 (Roomroom.js檔案的第 13 行) ：

    

    unmounted 是 類別的 Room 陣列成員，定義於建構函式中的第19行： this.unmounted = [];。

12. 在 類別的 hideRoom 方法內向this.unmounted.push(el);下卷動至第 49 行：

    

    程式代碼會將會議室中的每個訊息新增至陣 unmounted 列。 數位 unmounted 是參考中斷連結項目的物件。

在 JavaScript 程式代碼中，您現在已在數位) (unmounted 識別保留器物件，以防止瀏覽器垃圾收集中斷連結的專案。

您已找到瀏覽器無法垃圾收集的中斷連結元素，並找到仍在參考已中斷鏈接專案的 JavaScript 物件。 然後，您可以變更 JavaScript 程式代碼來釋放元素，以減少網頁上中斷連結的元素數目，以提高網頁效能和回應性。

識別導致其他 DOM 節點保留的 DOM 節點

因為 DOM 是完全連線的圖形，所以當 JavaScript 將一個 DOM 節點保留在記憶體中時，可能會導致其他 DOM 節點與它一起保留。

若要識別導致保留整個樹狀結構之中斷連結樹狀結構中是否有問題節點：

1. 按兩下 [ 卸離專案 ] ([ ) 圖示，以終結中斷連結樹狀結構內的父子式連結。

2. 按兩下 [ 收集垃圾 ([ ) 圖示。

   父子式連結會在中斷連結的樹狀結構內移除，而其餘專案是導致其他 DOM 節點保留的 DOM 節點：

   

將選取的目標變更為不同的來源

若要使用 [ 選取的目標 ] 下拉式清單來檢查來自不同來源或畫面的中斷鏈接專案：

1. 按下 [ 選取的目標 ] 下拉式清單：

   

2. 選取不同的來源。

新的原點會顯示在 [中斷連結的元素 ] 工具中。

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

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

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

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

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

在取得中斷連結的元素之前執行 GC，只顯示不能是 GC'd 的專案

若只要顯示與 DOM 樹狀結構中斷連結且無法進行垃圾收集的專案，請一律先按兩下 [ 收集垃圾 ]，然後按兩下 [ 取得中斷連結的專案]。

雖然某些元素可能會在某個時間點顯示為已中斷連結，但您在執行 GC 之前，並不知道這些元素是否真的仍由網頁中的 JavaScript 程式代碼參考。 在示範應用程式的聊天室之間切換時，網頁會移除用來顯示 DOM 訊息的元素。 但是，切換至類別的 Room 不同實例並不會完全刪除這些元素，而且這些元素的參考仍然存在，因此，這些元素會保留在記憶體中。

重新附加元素

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

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

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

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

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

報告問題

如果您發現 Detached Elements 功能的運作方式有問題，請 連絡 Microsoft Edge DevTools 小組 ，以傳送有關 中斷鏈接元素 功能和記憶體流失偵錯的意見反應。

另請參閱

• 修正記憶體問題中用於調查中斷連結元素的工具 - 用來檢視中斷連結元素的工具比較。

演示：

• 中斷連結的元素示範網頁
• MicrosoftEdge/Demos > detached-elements 存放庫資料夾 - 原始程式碼。