Debuggen von DOM-Speicherverlusten mit dem Tool "Getrennte Elemente"

Verwenden Sie das Tool "Getrennte Elemente ", um nach getrennten Elementen zu suchen, die vom Browser nicht garbage collect erfasst werden können, und suchen Sie das JavaScript-Objekt, das immer noch auf das getrennte Element verweist. Indem Sie Ihr JavaScript so ändern, dass das Element freigegeben wird, reduzieren Sie die Anzahl der getrennten Elemente auf Ihrer Seite.

In Ihrer Anwendung kann ein Speicherverlust auftreten, wenn ein Element nicht mehr an die DOM-Struktur (Document Object Model) angefügt ist, aber trotzdem von javaScript referenziert wird, das auf der Seite ausgeführt wird. Diese Elemente werden als getrennte Elemente bezeichnet. Damit der Browser garbage-collect (GC) für das getrennte Element verwendet, darf nicht von der DOM-Struktur oder von JavaScript-Code auf das Element verwiesen werden.

Weitere Informationen zu Heapmomentaufnahmen und getrennten Elementen finden Sie unter Ermitteln getrennter DOM-Strukturspeicherverluste mit Heapmomentaufnahmen.

Wie unter Beheben von Speicherproblemen erläutert, wirken sich Speicherprobleme auf die Seitenleistung aus, einschließlich Speicherverlusten, Arbeitsspeicherauslastung und häufigen Garbage Collections. Zu den Symptomen für Ihre Benutzer gehören:

• Die Leistung einer Seite verschlechtert sich im Laufe der Zeit zunehmend.
• Die Leistung einer Seite ist konsistent schlecht.
• Die Leistung einer Seite wird verzögert oder scheint häufig anzuhalten.

Öffnen des Tools "Getrennte Elemente"

So öffnen Sie das Tool "Getrennte Elemente " und laden die Demoseite:

1. Öffnen Sie die Demoanwendung "Getrennte Elemente " in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

3. Wählen Sie in DevTools in der Aktivitätsleiste die Registerkarte Getrennte Elemente aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools ():

   

Abrufen getrennter Elemente

Die Schaltfläche Get Detached Elements () (Getrennte Elemente abrufen) im Tool "Getrennte Elemente" sucht alle getrennten Elemente auf einer Webseite und zeigt sie an.

So finden Sie getrennte Elemente:

1. Stellen Sie in der Demoanwendung sicher, dass die Schaltfläche Raum 1 ausgewählt ist.

2. Klicken Sie in der Demoanwendung auf die Schaltfläche Schneller Datenverkehr .

3. Nachdem einige Meldungen generiert und in der Demoanwendung angezeigt wurden, klicken Sie auf die Schaltfläche Beenden der Demo:

   

4. Klicken Sie auf die Schaltfläche Raum 2 :

5. Klicken Sie im Tool Getrennte Elemente auf das Symbol Get Detached Elements ().

   Das Tool "Getrennte Elemente " zeigt alle getrennten Elemente der Seite an. Wenn Sie in der Demoanwendung zu Raum 2 wechseln, werden die in Raum 1 generierten Nachrichten nicht mehr an das DOM angefügt, aber von JavaScript wird weiterhin darauf verwiesen:

   

Auslösen der Garbage Collection

Lösen Sie als Nächstes die Garbage Collection (GC) im Browser aus:

1. Klicken Sie im Tool "Getrennte Elemente" auf das Symbol Garbage Sammeln (

2. Klicken Sie auf das Symbol Get Detached Elements ().

Wenn Sie Müll sammeln auswählen, führt der Browser die Garbage Collection aus. Wenn Sie Getrennte Elemente abrufen auswählen, zeigt das Tool Getrennte Elemente alle getrennten Elemente an, die nicht vom Garbage Collection erfasst werden können. Diese getrennten Elemente können Speicherverluste sein, wenn sie nicht von der Anwendung wiederverwendet werden.

Identifizieren des JavaScript-Codes, der getrennte Elemente beibehält

Nachdem Sie ein getrenntes Element gefunden haben, das nicht per Garbage Collection erfasst werden kann, können Sie die Schaltfläche Analysieren (") im Tool "Getrennte Elemente " verwenden, um den JavaScript-Code zu identifizieren, der auf der Seite ausgeführt wird, die immer noch auf das getrennte Element verweist. Die Schaltfläche Analysieren verwendet einen Heap Momentaufnahme und füllt die ID des getrennten Elements mit seiner Position im Heap auf.

Weitere Informationen zu Heapmomentaufnahmen finden Sie unter Aufzeichnen von Heapmomentaufnahmen mit dem Speichertool.

So identifizieren Sie den JavaScript-Code, der auf ein getrenntes Element verweist:

1. Klicken Sie im Tool "Getrennte Elemente " auf das Symbol Analysieren (").

   Das Speichertool wird in der Symbolleiste Schnellansicht unten in DevTools geöffnet:

   

2. Wählen Sie im Tool Getrennte Elemente das Feld Id eines getrennten Elements aus.

   Das Speichertool wählt automatisch das Objekt im Heap aus, das auf das getrennte Element verweist. Wir nennen diese Objekte Retainers:

   

3. Wählen Sie im Speichertool den Link room.js:13 aus.

   Das Tool Quellen wird in der Aktivitätsleiste geöffnet und zeigt Zeile 13 der Datei room.jsan.

4. In der hide() Funktion vonroom.jsfügt der JavaScript-Code der Demoanwendung jede Nachricht im Raum einem unmounted Array hinzu. Das unmounted Array ist das Objekt, das auf das getrennte Element verweist:

   

Sie haben nun die Aufbewahrung identifiziert, die verhindert, dass das getrennte Element vom Browser garbage-collection wird!

Ermitteln des DOM-Knotens, der die Beibehaltung anderer Elemente verursacht

Da es sich beim DOM um einen vollständig verbundenen Graphen handelt, kann es dazu führen, dass andere DOM-Knoten beibehalten werden, wenn ein DOM-Knoten von JavaScript im Arbeitsspeicher beibehalten wird.

So identifizieren Sie den schuldigen Knoten in einer getrennten Struktur, der dazu führt, dass die gesamte Struktur beibehalten wird:

1. Klicken Sie auf das Symbol Elemente trennen (), um die Über-/Unterordnungsverknüpfung innerhalb der getrennten Struktur zu zerstören.

2. Klicken Sie auf das Symbol Garbage Sammeln (

   Über-/untergeordnete Verknüpfungen werden innerhalb der getrennten Struktur entfernt:

   

Ändern des ausgewählten Ziels in einen anderen Ursprung

Sie können mithilfe der Dropdownliste Ausgewähltes Ziel nach getrennten Elementen aus verschiedenen Ursprüngen oder Frames suchen.

1. Klicken Sie auf die Dropdownliste Ausgewähltes Ziel :

   

2. Wählen Sie einen anderen Ursprung aus.

Der neue Ursprung wird im Tool "Getrennte Elemente " angezeigt.

Zusätzliche Überlegungen

Denken Sie bei der Suche nach Speicherverlusten daran, dass Lecks vom Kontext Ihrer Anwendung abhängen können. Für die Demoanwendung haben Sie getrennte Elemente gefunden, die vom Browser nicht per Garbage Collection erfasst werden konnten, und Sie haben das JavaScript identifiziert, das die getrennten Elemente beibehält. Im Kontext der Demoanwendung ist es jedoch sinnvoll, die Liste der Chatnachrichten beizubehalten, sodass das Nachrichtenprotokoll beibehalten wird, wenn ein Benutzer zurück zu Raum 1 wechselt.

Die folgende Abbildung zeigt getrennte Elemente in Form von Nachrichten, die erneut angefügt werden, wenn ein Benutzer von Raum 2 zurück zu Raum 1 navigiert:

Auf ähnliche Weise kann ein Feed in sozialen Medien Elemente trennen, wenn Benutzer an ihnen scrollen, und sie wieder an das DOM anfügen, wenn Benutzer zurück scrollen. Getrennte Elemente sind nicht immer ein Hinweis auf einen Speicherverlust, und Speicherverluste werden nicht immer durch getrennte Elemente verursacht.

Bei Apps mit langer Ausführungsdauer können kleine Speicherverluste von nur wenigen Kilobytes die Leistung im Laufe der Zeit spürbar beeinträchtigen. Webentwickler, die das React-Framework verwenden, wissen, dass React eine virtualisierte Kopie des DOM verwaltet. Wenn die Bereitstellung von Komponenten nicht ordnungsgemäß aufgehoben wird, kann dies möglicherweise dazu führen, dass eine Anwendung große Teile des virtuellen DOM ausläuft.

Diese Demo-App und ihre Lecks sind künstlich. Testen Sie das Tool "Getrennte Elemente" auf Ihrer Produktionswebsite oder -app. Wenn Sie potenzielle Probleme mit dem Tool "Getrennte Elemente" finden, wenden Sie sich an das Microsoft Edge DevTools-Team , um Feedback zum Tool "Getrennte Elemente" und zum Debuggen von Speicherverlusten zu senden.