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

Das Tool "Getrennte Elemente " ist eine Möglichkeit, alle getrennten Elemente auf einer Webseite zu finden und anzuzeigen. Weitere Möglichkeiten zum Bewerten von Arbeitsspeicherverlusten finden Sie unter Tools for investigating detached elements in Fix memory problems (Tools zum Untersuchen getrennter Elemente ) in Beheben von Speicherproblemen.

Wichtig

Das Tool "Getrennte Elemente " ist veraltet. Ab Microsoft Edge 130 enthält das Tool "Getrennte Elemente " eine Meldung, die besagt, dass das Tool veraltet ist. Wählen Sie stattdessen im Speichertool auf dem anfänglichen Bildschirm Profilerstellungstyp auswählen die Optionsschaltfläche Getrennte Elemente aus. Die Nur-Edge-Funktion EdgeDOMMemory.getDetachedNodesIds Chrome DevTools Protocol (CDP) funktioniert weiterhin, aber verwenden Sie DOM.getDetachedDomNodes stattdessen.

In Microsoft Edge 133 wird das Tool "Getrennte Elemente " entfernt. Wählen Sie stattdessen im Speichertool auf dem anfänglichen Bildschirm Profilerstellungstyp auswählen die Optionsschaltfläche Getrennte Elemente aus. Die CDP-Funktion EdgeDOMMemory.getDetachedNodesIds wird entfernt. Verwenden Sie DOM.getDetachedDomNodes stattdessen .

Um die Leistung Ihrer Webseite zu erhöhen, suchen Sie die Elemente, die von der DOM-Struktur getrennt sind und von denen Sie nicht erwartet haben, dass sie weiterhin von JavaScript-Code referenziert werden. Suchen Sie die getrennten Elemente, die der Browser nicht garbage-collect kann, da Ihr Code weiterhin auf sie verweist, und geben Sie dann die JavaScript-Codeverweise auf die getrennten Elemente frei.

Das Tool "Getrennte Elemente ", das Aufbewahrungen im Speichertool anzeigt, mit Links zum Öffnen des JavaScript-Codes im Quellentool :

Video: Debuggen von Speicherverlusten mit dem Microsoft Edge-Tool "Getrennte Elemente"

Strategie zum Beheben von Speicherverlusten mithilfe des Tools "Getrennte Elemente"

1. Öffnen Sie eine Webseite, um sie zu analysieren.
2. Öffnen Sie das Tool "Getrennte Elemente ".
3. Führen Sie die Garbage Collection aus, und entfernen Sie alle Knoten, auf die nicht mehr von einem JavaScript-Objekt verwiesen wird.
4. Ruft alle getrennten Elemente ab, die nicht durch die Garbage Collection erfasst werden konnten.
5. Analysieren Sie ein bestimmtes getrenntes Element und dessen JavaScript, um den verantwortlichen Knoten in einer getrennten Struktur zu identifizieren, der dazu führt, dass die gesamte Struktur beibehalten wird.

Abrufen getrennter Elemente und Analysieren des JavaScript eines getrennten Elements

So analysieren Sie ein getrenntes Element mithilfe der Demowebseite für getrennte Elemente :

1. Öffnen Sie die Demowebseite für getrennte Elemente in einem neuen Fenster oder einer neuen Registerkarte.

   Die Schaltfläche Raum 1 ist zunächst ausgewählt. Im JavaScript-Code der Demowebseite wird ein instance der Room -Klasse verwendet, um die Nachrichten in Raum 1 zu verwalten.

2. Klicken Sie 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 (), oder machen Sie DevTools breiter. Das Tool "Getrennte Elemente " wird geöffnet:

   

   Generieren Sie Nachrichten, die vom JavaScript-instance der Room-Klasse gespeichert werden:

4. Klicken Sie auf der Demo-Webseite auf die Schaltfläche Schneller Datenverkehr .

   Die Demo-Webseite beginnt mit dem Generieren von Nachrichten und deren Anzeige auf der Webseite:

   

5. Nachdem einige Meldungen angezeigt wurden, klicken Sie auf der Demo-Webseite auf die Schaltfläche Beenden .

   Jede Nachricht ist ein <div class="message"> Element, auf das vom raum 1 instance der Room Klasse verwiesen wird. Es gibt keine getrennten Elemente in der DOM-Struktur der Webseite, da alle Nachrichtenelemente an die aktuelle, Raum 1 instance der Room-Klasse angefügt sind.

   Wechseln Sie zu einer anderen instance der Room-Klasse, damit Elemente getrennt werden:

6. Klicken Sie auf der Demo-Webseite auf die Schaltfläche Raum 2, die einer anderen instance der Room Klasse entspricht.

   Auf der Webseite werden die Meldungen nicht mehr angezeigt:

   

   Die Nachrichten, die für den instance Raum 1 der Room-Klasse (<div class="message">Elemente) generiert wurden, sind nicht mehr an das DOM angefügt, aber sie werden weiterhin vom instance Raum 1 der Room-Klasse referenziert. Dabei handelt es sich um getrennte Elemente, die zu Speicherverlusten führen können, es sei denn, sie werden von der Webseite erneut verwendet.

   Rufen Sie die Liste der getrennten Elemente ab:

7. Klicken Sie in DevTools im Tool "Getrennte Elemente" auf das Symbol Garbage sammeln (

   Der Browser führt die Garbage Collection aus und entfernt alle Knoten, auf die von einem JavaScript-Objekt nicht mehr verwiesen wird.

8. Klicken Sie im Tool Getrennte Elemente auf die Schaltfläche Get Detached Elements ().

   Die getrennten DOM-Elemente, die nicht vom Garbage Collection erfasst werden können, werden angezeigt:

   

   Diese getrennten Elemente sind Speicherverluste, wenn sie nicht von der Anwendung wiederverwendet werden.

   Identifizieren Sie den JavaScript-Code, der auf ein bestimmtes getrenntes Element verweist:

9. Klicken Sie im Tool "Getrennte Elemente " auf die Schaltfläche Analysieren (").

   Am unteren Rand des Tools "Getrennte Elemente" wird kurz eine Meldung angezeigt, und es wird ein Speicherheap Momentaufnahme... und dann die Meldung Alle erledigt angezeigt. Das Speichertool wird im Bereich Schnellansicht am unteren Rand von DevTools geöffnet:

   

   Wenn optionsschaltflächen profilerstellungstyp im Speichertool anstelle einer Benutzeroberfläche für Zusammenfassung und Aufbewahrung angezeigt werden, klicken Sie erneut auf die Schaltfläche Analysieren ().

10. Doppelklicken Sie im Tool Getrennte Elemente in der Spalte ID auf eine ID, z. B. @21299 oder @21783.

    Dies ist der eindeutige Bezeichner eines der <div class="message"> Elemente im Speicherheap Momentaufnahme. Das Speichertool zeigt Aufbewahrungen auf der Registerkarte Aufbewahrungen an :

    

    Das Speichertool wählt automatisch das Objekt im Heap aus, das auf das getrennte Element verweist. Ein solches Objekt wird als Aufbewahrung bezeichnet.

11. Klicken Sie auf der Registerkarte Aufbewahrungen in einem Aufbewahrungsuntereintrag über das unmounted Element( z. B. in Raum @54011 aufgehoben) auf den Link room.js:13.

    Das Tool Quellen wird in der Aktivitätsleiste geöffnet und zeigt Zeile 13 der Dateiroom.js (der Konstruktor) an Room :

    

    unmounted ist ein Arraymember der Room -Klasse, definiert in Zeile 19 im Konstruktor: this.unmounted = [];.

12. Scrollen Sie in der hide -Methode der Room -Klasse nach unten zu Zeile 49this.unmounted.push(el);:

    

    Der Code fügt jede Nachricht im Raum dem unmounted Array hinzu. Das unmounted Array ist das Objekt, das auf das getrennte Element verweist.

Im JavaScript-Code haben Sie nun das Aufbewahrungsobjekt (das unmounted Array) identifiziert, das verhindert, dass das getrennte Element vom Browser per Garbage Collection erfasst wird.

Sie haben getrennte Elemente gefunden, die vom Browser nicht vom Garbage Collect erfasst werden können, und das JavaScript-Objekt gefunden, das immer noch auf das getrennte Element verweist. Anschließend können Sie den JavaScript-Code so ändern, dass das Element freigegeben wird, um die Anzahl der getrennten Elemente auf der Webseite zu reduzieren und die Leistung und Reaktionsfähigkeit der Webseite zu erhöhen.

Identifizieren des DOM-Knotens, der dazu führt, dass andere DOM-Knoten beibehalten werden

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, und das verbleibende Element ist der DOM-Knoten, der dazu geführt hat, dass andere DOM-Knoten beibehalten wurden:

   

Ändern des ausgewählten Ziels in einen anderen Ursprung

So suchen Sie mithilfe der Dropdownliste Ausgewähltes Ziel nach getrennten Elementen aus verschiedenen Ursprüngen oder Frames:

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.

Informationen zu getrennten Elementen und Speicherverlusten

Getrennte Elemente sind nicht immer ein Hinweis auf einen Speicherverlust, und Speicherverluste werden nicht immer durch getrennte Elemente verursacht. Speicherverluste hängen vom Kontext Ihrer Anwendung ab.

In Ihrer Anwendung kann ein Speicherverlust auftreten, wenn ein Element nicht mehr an die DOM-Struktur (Document Object Model, Dokumentobjektmodell) angefügt ist, aber weiterhin von JavaScript referenziert wird, das auf der Webseite 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.

Speicherprobleme wirken sich auf die Webseitenleistung aus, einschließlich Speicherverlusten, Arbeitsspeicherauslastung und häufigen Garbage Collections. Zu den Symptomen für Ihre Benutzer gehören:

• Die Leistung einer Webseite wird im Laufe der Zeit immer schlechter.
• Die Leistung einer Webseite ist durchweg schlecht.
• Die Leistung einer Webseite wird verzögert oder scheint häufig anzuhalten.

Führen Sie GC aus, bevor Sie getrennte Elemente erhalten, um nur Elemente anzuzeigen, die nicht gc'd sein können.

Um nur die Elemente anzuzeigen, die von der DOM-Struktur getrennt sind und nicht per Garbage Collection erfasst werden können, klicken Sie immer zuerst auf Garbage sammeln und dann auf Getrennte Elemente abrufen.

Auch wenn einige Elemente zu einem bestimmten Zeitpunkt als getrennt erscheinen, wissen Sie nicht, ob sie tatsächlich noch von JavaScript-Code auf der Webseite referenziert werden, bis Sie GC ausführen. Beim Wechseln zwischen Chatrooms in der Demo-App entfernt die Webseite die Elemente, die zum Anzeigen von Nachrichten aus dem DOM verwendet werden. Wenn Sie jedoch zu einem anderen instance der Room Klasse wechseln, werden diese Elemente nicht vollständig gelöscht, und Verweise auf diese Elemente sind weiterhin vorhanden, sodass diese Elemente im Arbeitsspeicher verbleiben.

Erneutes Anfügen von Elementen

Für die Demowebseite für getrennte Elemente ist es sinnvoll, die Liste der Chatnachrichten beizubehalten, damit das Nachrichtenprotokoll beibehalten wird, wenn ein Benutzer zurück zu Raum 1 wechselt. 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.

Wenn das Tool Getrennte Elemente getrennte Elemente meldet, handelt es sich nicht unbedingt um einen Speicherverlust. Es liegt an Ihnen, zu entscheiden, was ein Speicherverlust ist und was nicht. Möglicherweise fügt Ihre App diese Elemente später erneut an (anstatt sie neu erstellen zu müssen, was möglicherweise langsamer sein könnte).

Das Trennen von DOM-Knoten ist ein nützlicher Ansatz, solange Sie diese getrennten Elemente schließlich wiederverwenden (oder löschen). Der Wert des Tools "Getrennte Elemente " lautet: Wenn Sie einen Speicherverlust vermuten, können Sie überprüfen, ob vom Tool eine zunehmende Anzahl unerwartet getrennter DOM-Elemente gemeldet wird.

Apps mit langer Ausführungszeit und Aufheben der Bereitstellung von Komponenten

Stellen Sie sicher, dass Sie die Bereitstellung von Komponenten aufheben. Bei Apps mit langer Ausführungsdauer können kleine Speicherverluste von nur wenigen Kilobytes die Leistung im Laufe der Zeit spürbar beeinträchtigen. Für Webseiten, die das React Framework verwenden, verwaltet React eine virtualisierte Kopie des DOM. 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.

Probleme melden

Wenn Sie Probleme mit der Funktionsweise des Features "Getrennte Elemente " feststellen, wenden Sie sich an das Microsoft Edge DevTools-Team , um Feedback zum Feature "Getrennte Elemente" und zum Debuggen von Speicherverlusten zu senden.

Siehe auch

• Tools zum Untersuchen getrennter Elemente unter Beheben von Speicherproblemen : Vergleich von Tools zum Anzeigen getrennter Elemente.

Demo:

• Demowebseite für getrennte Elemente
• Repositoryordner "MicrosoftEdge/Demos > detached-elements ": Quellcode.