Freigeben über

Beheben von Arbeitsspeicherproblemen

  • Artikel

Verwenden Sie die folgenden Tools, um Speicherprobleme zu finden, die sich auf die Seitenleistung auswirken, z. B. Speicherverluste, Arbeitsspeicherauslastungen und häufige 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 (Task-Manager des Microsoft Edge-Browsers)
Visualisieren sie die Speicherauslastung einer Webseite über einen bestimmten Zeitraum. Kontrollkästchen "Arbeitsspeicher" des Leistungstools> Visualisieren von Speicherverlusten (Leistungstool: Kontrollkästchen Arbeitsspeicher) in der Referenz zu Leistungsfeatures.
Häufige Garbage Collections erkennen. Microsoft Edge-Browser-Task-Manager oder Leistungstool> Kontrollkästchen Arbeitsspeicher Häufige Garbage Collections (Microsoft Edge-Browsertask-Manager, Kontrollkästchen Arbeitsspeicher des Leistungstools) unten.
Überprüfen Sie den Inhalt des von einer Webseite verwendeten Arbeitsspeichers. Speichertool>heap Momentaufnahme Aufzeichnen von Heapmomentaufnahmen mithilfe des Speichertools ("Profilerstellungstyp "Heap Momentaufnahme")
Finden Sie heraus, welche JavaScript-Objekte über einen bestimmten Zeitraum erstellt werden, um Speicherverluste zu isolieren. Speichertoolzuordnungen>auf Zeitleiste Verwenden der Zuordnungsinstrumentation für Zeitleiste ("Zuordnungen auf Zeitleiste"-Profilerstellungstyp)
Finden Sie heraus, welche JavaScript-Funktionen Speicher über einen bestimmten Zeitraum zuordnen. Dieser Profiltyp hat einen minimalen Leistungsaufwand und kann für zeitintensive Vorgänge verwendet werden. Speichertoolzuordnungsstichproben> Beschleunigen der JavaScript-Laufzeit ("Profilerstellungstyp "Allocation Sampling")
Ermitteln von Speicherverlusten in der DOM-Struktur. Speichertool>Getrennte Elemente Debuggen von DOM-Speicherverlusten ("Profilerstellungstyp "Getrennte Elemente")

Das Speichertool

Das Standard Tool zum Untersuchen von Speicherproblemen ist das Speichertool:

Das Speichertool

Profil "Getrennte Elemente" im Speichertool :

Profil

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

Übersicht über die Behebung von Speicherproblemen

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

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

  • Die Leistung einer Seite verschlechtert sich im Laufe der Zeit zunehmend. Dies ist möglicherweise ein Symptom für einen Speicherverlust. Ein Speicherverlust tritt auf, wenn ein Fehler auf der Seite dazu führt, dass die Seite im Laufe der Zeit immer mehr Arbeitsspeicher belegt.

  • Die Leistung einer Seite ist konsistent schlecht. Dies ist möglicherweise ein Symptom der Speicherüberlässigkeit. Arbeitsspeicherüberfrachtung tritt auf, wenn eine Seite mehr Arbeitsspeicher benötigt, als für eine optimale Seitengeschwindigkeit erforderlich ist.

  • Die Leistung einer Seite wird verzögert oder scheint häufig anzuhalten. Dies ist möglicherweise ein Symptom für häufige Garbage Collections. Die Garbage Collection ist, wenn der Browser Arbeitsspeicher zurückerobert. Der Browser entscheidet, wann dies geschieht. Während der Auflistungen wird das gesamte ausgeführte Skript angehalten. Wenn der Browser also viel Garbage Collection verwendet, wird die Skriptlaufzeit viel angehalten.

Speicherüberlastung: Wie viel ist "zu viel"?

Ein Speicherverlust ist einfach zu definieren. Wenn eine Website nach und nach immer mehr Arbeitsspeicher verwendet, kommt es zu einem Verlust. Aber Speicherüberblässigkeit ist etwas schwieriger anheften. Was gilt als "zu viel Arbeitsspeicher verwenden"?

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

Der Schlüssel besteht hier darin, 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 dann Ihre Seite auf diesen Geräten. Wenn die Erfahrung konsistent schlecht ist, überschreitet die Seite möglicherweise die Speicherfunktionen dieser Geräte.

Häufige Garbage Collections erkennen (Task-Manager des Microsoft Edge-Browsers, Kontrollkästchen Arbeitsspeicher 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 Optionen verwenden:

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

Ermitteln von Speicherverlusten der DOM-Struktur durch getrennte Elemente

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

Tools zum Untersuchen getrennter Elemente

Anwendungsfall Tool Artikel
Zeigen Sie nur getrennte Elemente als DOM-Strukturknoten an. SpeichertoolProfilerstellungstyp "Getrennte Elemente"> Debuggen von DOM-Speicherverlusten ("Profilerstellungstyp "Getrennte Elemente")
Zeigen Sie alle Objekte im Arbeitsspeicher an, gefiltert, um getrennte Elemente anzuzeigen, mit Links zum JavaScript-Quellcode. Speichertool>Heap Momentaufnahme Profilerstellungstyp >Getrennt Suchen Sie unter Aufzeichnen von Heapmomentaufnahmen mithilfe des Speichertools ("Profilerstellungstyp Heap Momentaufnahme" nach SPEICHER-Speicherverlusten ("Heap Momentaufnahme"-Profilerstellungstyp > getrennt).
Zeigen Sie nur getrennte Elemente als DOM-Strukturknoten mit Links zum JavaScript-Quellcode an. Tool "Getrennte Elemente" Debuggen von DOM-Speicherverlusten mit dem Tool "Getrennte Elemente"

Weitere Informationen

Äußerlich:

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 originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.