Debuggen von DOM-Speicherverlusten ("Profilerstellungstyp "Getrennte Elemente")
Verwenden Sie den Profilerstellungstyp "Getrennte Elemente" des Speichertools, um alle getrennten Elemente auf einer Webseite zu suchen und anzuzeigen. Einen Vergleich der Tools zum Anzeigen getrennter Elemente finden Sie unter Tools zum Untersuchen getrennter Elemente in Beheben von Speicherproblemen.
Mit dem Profilerstellungstyp Getrennte Elemente können Sie Speicherverluste aufgrund getrennter DOM-Elemente beheben. Das resultierende Profil listet die getrennten Objekte auf, die von Verweisen in Ihrem JavaScript-Code beibehalten werden. Dieser Profilerstellungstyp zeigt eine Ansicht der getrennten Knoten an, um mögliche Speicherverluste auf Ihrer Webseite zu identifizieren.
Analysieren der getrennten Elemente einer Webseite
So verwenden Sie den Profilerstellungstyp "Getrennte Elemente ", um die getrennten Elemente einer Webseite zu analysieren:
Öffnen Sie eine Webseite, z. B. die Demowebseite für getrennte Elemente, in einem neuen Fenster oder einer neuen Registerkarte.
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.
Wählen Sie in DevTools in der Aktivitätsleiste das Tool Arbeitsspeicher (
) aus.Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (
), und wählen Sie dann Arbeitsspeicher aus. Das Speichertool wird geöffnet:
Wenn die Optionsschaltfläche Getrennte Elemente nicht angezeigt wird, da bereits ein Profil angezeigt wird, klicken Sie oben links auf Profile (
).Sie müssen an diesem Punkt nicht die Optionsschaltfläche Getrennte Elemente auswählen, da die Webseite noch keine getrennten Elemente generiert hat.
Generieren Sie Nachrichten, die vom JavaScript-instance der Room-Klasse gespeichert werden:
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.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:
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 derRoomKlasse 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:
Klicken Sie auf der Demo-Webseite auf die Schaltfläche Raum 2, die einer anderen instance der
RoomKlasse 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:
Wählen Sie in DevTools im Speichertool die Optionsschaltfläche Getrennte Elemente aus, und klicken Sie dann auf die Schaltfläche Start .
Die Liste der getrennten Knoten wird in der Spalte Getrennte Knoten des generierten Profils "Getrennte Elemente " angezeigt:
Die getrennten Elemente werden als DOM-Knoten wie in der DOM-Struktur im Tool Elemente angezeigt. In der Liste Profile im Abschnitt Getrennte Elemente wird das Profil aufgeführt.
Erweitern Sie einen DOM-Knoten, um seine untergeordneten Elemente (DOM-Knoten) anzuzeigen:
Diese getrennten Elemente (DOM-Knoten) sind Speicherverluste, wenn sie nicht von der Anwendung wiederverwendet werden.
Wenn Sie zur Liste der Optionsschaltflächen für Profilerstellungstypen zurückkehren möchten, klicken Sie oben links im Speichertool auf Profile ().
Weitere Möglichkeiten zum Bewerten von Arbeitsspeicherverlusten finden Sie unter Tools zum Untersuchen getrennter Elemente in Beheben von Speicherproblemen.
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.
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.
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.
Siehe auch
- Tools zum Untersuchen getrennter Elemente unter Beheben von Speicherproblemen.
- Demowebseite für getrennte Elemente