Beheben von Arbeitsspeicherproblemen

Verwenden Sie die folgenden Tools, um Speicherprobleme zu finden, die sich auf die Seitenleistung auswirken, einschließlich Speicherverlusten, Speicheraufblähungen und häufigen Garbage Collections:

  • Task-Manager des Microsoft Edge-Browsers.
  • Das Kontrollkästchen"Arbeitsspeicher" des Leistungstools.
  • Die verschiedenen Profilerstellungstypen des Speichertools.

Tools zum Untersuchen der Speicherauslastung

Anwendungsfall Tool Artikel
Überwachen Sie in Echtzeit, wie viel Arbeitsspeicher eine Webseite verwendet. Task-Manager des Microsoft Edge-Browsers Überwachen der Speicherauslastung in Echtzeit (Browser-Task-Manager)
Visualisieren Sie die Speicherauslastung einer Webseite über einen bestimmten Zeitraum. Kontrollkästchen"Arbeitsspeicher" des Leistungstools > Visualisieren von Arbeitsspeicherverlusten (Leistungstool: Kontrollkästchen Arbeitsspeicher) in Referenz zu Leistungsfeatures.
Erkennen Sie häufige Müllabfuhren. Microsoft Edge-Browser, Task-Manager oder Leistungstool> Kontrollkästchen "Arbeitsspeicher" Erkennen Sie häufige Garbage Collections (Microsoft Edge Browser Task Manager, Arbeitsspeicher-Kontrollkästchen des Leistungstools), unten.
Untersuchen Sie den Inhalt des von einer Webseite verwendeten Speichers. Speichertool>Heap-Momentaufnahme Aufzeichnen von Heap-Momentaufnahmen mithilfe des Speichertools (Profilerstellungstyp "Heap-Momentaufnahme")
Finden Sie heraus, welche JavaScript-Objekte über einen bestimmten Zeitraum erstellt werden, um Speicherverluste zu isolieren. Speichertool>Zuordnungen auf der Zeitleiste Verwenden der Zuordnungsinstrumentation auf der Zeitleiste ("Zuordnungen auf der Zeitleiste" – Profilerstellungstyp)
Finden Sie heraus, welche JavaScript-Funktionen über einen bestimmten Zeitraum Speicher belegen. Dieser Profiltyp hat einen minimalen Leistungsaufwand und kann für zeitintensive Vorgänge verwendet werden. Speichertool>Zuordnungsstichproben Beschleunigen der JavaScript-Laufzeit (Profilerstellungstyp "Zuordnungsstichprobe")
Suchen Sie Speicherverluste in DOM-Strukturen. Speichertool>Getrennte Elemente Debuggen von DOM-Arbeitsspeicherverlusten ("Profilerstellungstyp für getrennte Elemente")

Das Speichertool

Das wichtigste Tool zum Untersuchen von Speicherproblemen ist das Speichertool :

Das Speichertool

Ein Profil "Getrennte Elemente" im Speichertool :

Ein Profil für getrennte Elemente

Um zur Liste der Optionsschaltflächen für Profilerstellungstypen zurückzukehren, klicken Sie oben links im Speichertool auf Profile (das Symbol Profile).

Übersicht über das Beheben von Arbeitsspeicherproblemen

Im Sinne des RAIL-Leistungsmodells sollten Ihre Benutzer im Mittelpunkt Ihrer Leistungsbemühungen stehen.

Speicherprobleme sind wichtig, da sie für Benutzer häufig wahrnehmbar sind. Benutzer können Arbeitsspeicherprobleme auf folgende Weise wahrnehmen:

  • Die Leistung einer Seite wird im Laufe der Zeit zunehmend schlechter. Dies ist möglicherweise ein Symptom für ein Speicherleck. Ein Speicherverlust liegt vor, wenn ein Fehler auf der Seite dazu führt, dass die Seite im Laufe der Zeit immer mehr Arbeitsspeicher verwendet.

  • Die Leistung einer Seite ist durchweg schlecht. Dies ist möglicherweise ein Symptom einer Gedächtnisblähung. Aufblähung des Arbeitsspeichers liegt vor, wenn eine Seite mehr Arbeitsspeicher verwendet, als für eine optimale Seitengeschwindigkeit erforderlich ist.

  • Die Leistung einer Seite ist verzögert oder scheint häufig angehalten zu werden. Dies ist möglicherweise ein Symptom für häufige Garbage Collections. Garbage Collection ist, wenn der Browser Arbeitsspeicher freigibt. Der Browser entscheidet, wann dies geschieht. Während der Sammlung werden alle ausgeführten Skripts angehalten. Wenn der Browser also viel Müll sammelt, wird die Skriptlaufzeit stark angehalten.

Aufgeblähtes Gedächtnis: Wie viel ist "zu viel"?

Ein Speicherleck ist einfach zu definieren. Wenn eine Website nach und nach immer mehr Arbeitsspeicher verwendet, liegt ein Leck vor. Aber die Aufblähung des Gedächtnisses ist etwas schwieriger zu bestimmen. Was gilt als "zu viel Arbeitsspeicher verbrauchen"?

Hier gibt es keine harten Zahlen, da verschiedene Geräte und Browser unterschiedliche Funktionen haben. Dieselbe Seite, die auf einem High-End-Smartphone reibungslos läuft, kann auf einem Low-End-Smartphone abstürzen.

Der Schlüssel hier ist, das RAIL-Modell zu verwenden und sich auf Ihre Benutzer zu konzentrieren. Finden Sie heraus, welche Geräte bei Ihren Benutzern beliebt sind, und testen Sie Ihre Seite dann auf diesen Geräten. Wenn die Erfahrung durchweg schlecht ist, überschreitet die Seite möglicherweise die Speicherkapazitäten dieser Geräte.

Erkennen Sie häufige Garbage Collections (Microsoft Edge Browser-Task-Manager, Kontrollkästchen Speicher des Leistungstools)

Wenn Ihre Seite häufig angehalten wird, haben Sie möglicherweise Probleme mit der Garbage Collection. Um häufige Garbage Collection zu erkennen, können Sie eine der folgenden Methoden verwenden:

  • Task-Manager des Microsoft Edge-Browsers. Häufig ansteigender und fallender Arbeitsspeicher oder JavaScript Speicherwerte stellen eine häufige Garbage Collection dar. Weitere Informationen finden Sie unter Überwachen der Speichernutzung in Echtzeit (Browser-Task-Manager).

  • Das Kontrollkästchen"Arbeitsspeicher" des Leistungstools. In Aufzeichnungen des Leistungsgedächtnisses deuten häufige Änderungen (steigend und fallend) an den JS-Heap- oder Knotenanzahldiagrammen auf eine häufige Garbage Collection hin. Weitere Informationen finden Sie unter Anzeigen von Arbeitsspeichermetriken in der Referenz zu Leistungsfeatures.

Nachdem Sie das Problem mithilfe eines dieser Tools identifiziert haben, können Sie den Profilerstellungstyp "Zuordnungen auf der Zeitleiste" des Speichertools verwenden, um herauszufinden, wo Speicher belegt wird und welche Funktionen die Zuordnungen verursachen. Weitere Informationen finden Sie unter Verwenden der Zuordnungsinstrumentation auf der Zeitleiste ("Zuordnungen auf der Zeitleiste" Profilerstellungstyp).

Suchen Sie nach Speicherlecks in DOM-Strukturen von getrennten Elementen.

Ein DOM-Knoten wird vom Browser nur dann als Garbage Collection erfasst, wenn keine Verweise auf den Knoten aus der DOM-Struktur oder dem auf der Seite ausgeführten JavaScript-Code vorhanden sind. Ein Knoten wird als "getrennt" bezeichnet, wenn er aus der DOM-Struktur entfernt wird, aber einige JavaScript-Codes verweisen weiterhin darauf. Getrennte DOM-Knoten sind eine häufige Ursache für Arbeitsspeicherverluste.

Tools für die Untersuchung getrennter Elemente

Anwendungsfall Tool Artikel
Nur getrennte Elemente als DOM-Strukturknoten anzeigen. Speichertool> Profilerstellungstyp für getrennte Elemente Debuggen von DOM-Arbeitsspeicherverlusten ("Profilerstellungstyp für getrennte Elemente")
Alle Objekte im Arbeitsspeicher anzeigen, gefiltert, um getrennte Elemente anzuzeigen, mit Links zum JavaScript-Quellcode. Speichertool> Profilerstellungstyp >für Heap-MomentaufnahmeGetrennt Suchen Sie Speicherverluste in DOM-Strukturen ("Heap-Momentaufnahme", Profilerstellungstyp > "Getrennt") in Aufzeichnen von Heap-Momentaufnahmen mithilfe des Speichertools (Profiltyp "Heap-Momentaufnahme")).

Weitere Informationen

Extern:

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die Originalseite findet sich hier und wurde von Kayce Basques verfasst.

Creative Commons License Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.

  • Zuletzt aktualisiert um