Diagnostizieren von Arbeitsspeicherproblemen in Verbindung mit Webseiten

Verwenden Sie das Tool "Arbeitsspeicher", um Arbeitsspeicherprobleme zu diagnostizieren, die die Geschwindigkeit und Stabilität von Webseiten beeinträchtigen können.

Arbeitsspeicher ist wichtig

Wenn Ihre Seite beim Laden zunächst gut funktioniert, dann aber nach und nach langsamer wird und gelegentlich abstürzt, kann die Arbeitsspeicherverwendung der Seite das Problem sein. Das Tool "Arbeitsspeicher" ist ein neues F12-Entwicklungstool in Internet Explorer 11.

Wenn Sie schnell überprüfen möchten, wie viel Arbeitsspeicher Ihre Webseite verwendet, öffnen Sie das neue Leistungsdashboard über das Menü Extras in IE11, oder drücken Sie STRG+UMSCHALTTASTE+U. Klicken Sie auf die Zahl für die Arbeitsspeicherverwendung, um ein dynamisches Diagramm anzuzeigen. Um zum Dashboard zurückzukehren, klicken Sie auf das Diagramm.

Wenn Sie wissen möchten, weshalb Sie die im Leistungsdashboard angezeigten Zahlen sehen, benötigen Sie das Tool Arbeitsspeicher. Das Tool untersucht die Arbeitsspeicherverwendung Ihrer Webseite sowie deren Zunahme im Detail und identifiziert Verbesserungsmöglichkeiten.

Diagnostizieren eines Arbeitsspeicherproblems

Nachdem Sie Ihre Webseite in den Browser geladen haben, öffnen Sie die F12-Entwicklungstools und dann das Tool Arbeitsspeicher (verwenden Sie das Kamerasymbol oder STRG+7). Sie können die Profilerstellung auf diesem Bildschirm starten und während der Profilerstellungssitzung Heapmomentaufnahmen erstellen.

Falls Ihr Problem eine von Anfang an hohe Arbeitsspeicherverwendung ist (und nicht eine zunehmende Verwendung), erstellen Sie eine Momentaufnahme, die Sie anschließend untersuchen, um größere Bereiche der Arbeitsspeicherverwendung zu ermitteln. Nimmt die Arbeitsspeicherverwendung im Laufe der Zeit zu, können Sie Momentaufnahmen vergleichen, um die Bereiche zu untersuchen, in denen die Arbeitsspeicherverwendung zunimmt.

Zusammenfassungsansicht

Nachdem Sie die Profilerstellung gestartet und einige Momentaufnahmen erstellt haben, wird wie unten dargestellt eine Zusammenfassung der Sitzung angezeigt:

Zusammenfassungsansicht des Tools "Arbeitsspeicher" mit zwei Heapmomentaufnahmen

Wenn Sie mit der Aufzeichnung einer Sitzung beginnen, zeigt die Zeitskala Gesamtspeicher die Arbeitsspeicherverwendung der Prozesse der aktuellen Browserregisterkarte als ein Diagramm im Zeitverlauf an.

Sie können der Zeitskala mit der performance.mark()-Methode in Ihrem JavaScript eigene Benutzermarkierungen hinzufügen (mit einer Beschriftung für die Markierung als Argument). Auf diese Weise können Sie spezifische Ereignisse hinzufügen. Die Beschriftung wird als QuickInfo angezeigt, wenn Sie mit dem Mauszeiger auf die Markierung auf der Zeitskala zeigen.

Unter der Zeitskala werden Zusammenfassungen der Heapmomentaufnahmen angezeigt.

Informationen, die Sie den Zusammenfassungen der Momentaufnahmen entnehmen können

Jede Momentaufnahme zeigt eine Miniaturansicht der Webseite zum Zeitpunkt der Momentaufnahme und Details zur Speicherauslastung Ihres Codes. Ab der zweiten Momentaufnahme ist außerdem eine Zusammenfassung der Änderungen der Arbeitsspeicherverwendung und der Objektanzahl verfügbar.

Die Anzahl erstellter neuer Objekte und die Anzahl entfernter alter Objekte werden ab der zweiten Momentaufnahme unter der Objektanzahl angezeigt. Sind diese Zahlen hoch, liegt möglicherweise ein Leistungsproblem vor. Wenn die verwendete Arbeitsspeichermenge in Ordnung ist, aber viele Objekte erstellt und entfernt werden, bedeutet dies viel Arbeit für den Garbage Collector-Prozess, der Arbeitsspeicher freigibt. Da die Garbage Collection Prozessorleistung verbraucht, empfiehlt es sich, nach Möglichkeiten zur Wiederverwendung dieser Objekte zu suchen und dem Garbage Collector eine Pause zu gönnen.

Tipp  Um die Arbeit des Garbage Collectors zu überprüfen, erstellen Sie mit dem Tool Reaktionsfähigkeit der Benutzeroberfläche ein Profil für Ihre Webseite.

Wenn Sie auf die Zahlen für die Speicherauslastung klicken, wird eine detaillierte Ansicht der Momentaufnahme angezeigt. Klicken Sie auf die Zahlen für die Veränderung, sehen Sie einen Vergleich, in dem die hinzugefügten oder geänderten Objekte hervorgehoben sind. In der obigen Abbildung enthält Momentaufnahme 2 ein Symbol für weitere Informationen (ein Kreis mit einem "i" darin), neben dem die Zahl 30 angezeigt wird. Diese Zahl stellt die Anzahl von Objekten dar, die das Tool Arbeitsspeicher als potenzielle Arbeitsspeicherprobleme identifiziert hat.

Aufgepasst

Ein weiterer wichtiger Unterschied ist die Anzahl der Objekte, die hinzugefügt oder entfernt werden. Dies wird in Ihrer zweiten Momentaufnahme sowie oben rechts im Format „+x/-y“ ersichtlich.

In den oben angezeigten Momentaufnahmen wird folgendes deutlich, sobald wir einen Prozess mit dem Verdacht auf Arbeitsspeicherproblemen ausgeführt haben, haben wir die Anzahl an Objekten um 90 erhöht, jedoch nur 9 entfernt. Dies ist ein wichtiger Hinweis auf einen Arbeitsspeicherverlust im Prozess. Arbeitsspeicherverluste führen bei Benutzersitzungen mit Ihrer Webseite zu einer höheren Arbeitsspeicherauslastung. Wird die Arbeitsspeicherauslastung zu hoch, kann dies zu Trägheit oder sogar Instabilität führen.

Detailansicht einer Momentaufnahme

Klicken Sie auf eine der Messungszahlen in einer Momentaufnahme, um Details zur Messung anzuzeigen. Die unten stehende Abbildung zeigt die Ansicht, die angezeigt wird, wenn Sie in einer Momentaufnahme auf die Anzahl von Arbeitsspeicherproblemen klicken.

Momentaufnahme-Detailansicht des Tools "Arbeitsspeicher" mit einer Liste potenzieller Arbeitsspeicherprobleme

In der obigen Abbildung ist die Ansicht Dominatoren der Momentaufnahmedetails so sortiert, dass die Probleme zuerst angezeigt werden.

Wenn Sie mit dem Mauszeiger auf das Symbol für weitere Informationen zeigen, wird eine QuickInfo angezeigt, der Sie entnehmen können, weshalb dieses Element ein potenzielles Problem ist. Im obigen Beispiel ist der DOM-Knoten nicht mit dem DOM verbunden. Dies kann passieren, wenn der Knoten aus dem DOM entfernt wurde, an anderer Stelle aber auf ihn verwiesen wird.

Wenn Sie auf das Objekt klicken, werden im unteren Bildschirmbereich die Objekte angezeigt, die auf das Objekt verweisen. In diesem Fall enthält ein Array mit dem Namen nodeholder einen Verweis, durch den der Knoten im Arbeitsspeicher gehalten wird. Falls dies nicht das ist, was Sie erwartet haben, können Sie das Problem weiter untersuchen.

Die drei Ansichtstypen

  • Die Ansicht Dominatoren schlüsselt alle individuellen HTML-Elemente, DOM-Knoten und JavaScript-Objekte auf, die Ihr Code erstellt. Dies ist detaillierteste Ansicht.
  • Die Ansicht Typen gruppiert Objekte nach ihrer Konstruktorfunktion und zeigt für jeden Typ die Anzahl an. So können Sie leichter feststellen, wie viele Arrays, Zeichenfolgen usw. vorhanden sind. Die Gruppen können zum Anzeigen einzelner Objekte erweitert werden.
  • Die Ansicht Stammelemente enthält die wichtigsten Stammobjekte, die zum Anzeigen der zugehörigen untergeordneten Objekte erweitert werden können.

In allen drei Ansichten sind Spaltenüberschriften für die Größe und die beibehaltene Größe eines Objekts verfügbar. In der Spalte Größe wird die vom Objekt selbst verwendete Speichermenge dokumentiert. Die Spalte Beibehaltene Größe enthält die vom Objekt und seinen untergeordneten Knoten verwendete Speichermenge. Ein HTMLDivElement kann z. B. selbst nur ein paar Bytes verbrauchen, aber eine beibehaltene Größe von mehreren Megabytes haben, weil eines seiner untergeordneten Elemente ein großes Bild oder Video ist.

Bei großen, komplexen Seiten werden nur die ersten 2000 Objekte geladen (sortiert nach der beibehaltenen Größe). In diesem Fall ist eine Filteroption verfügbar, mit der Sie die angezeigten Objekte eingrenzen können.

Weitere Optionen

Sie können über das Dropdownmenü in der oberen rechte Ecke der Momentaufnahmedetails Einstellungen für die detaillierte Ansicht ändern.

  • Integrierte anzeigen zeigt interne Objekte an, die vom Browser für eine Webseite und nicht von der Seite selbst erstellt wurden. Diese Objekte werden standardmäßig nicht angezeigt, damit Sie nicht von Ihrem eigenen Code abgelenkt werden. Mitunter kann ein Blick auf die internen Objekte aber hilfreich sein.
  • Objekt-IDs anzeigen erleichtert das Identifizieren von Objekten mit mehreren Verweisen. Beispielsweise verwendet das jQuery-Objekt oft sowohl jQuery als auch $ als Verweise. Beide Verweise werden mit der gleichen Menge für die Speicherauslastung angezeigt, verwenden aber den gleichen Arbeitsspeicher und die gleiche Objekt-ID. Anhand von Objekt-IDs lassen sich eindeutige Objekte von Objekten mit mehreren Verweisen trennen.
  • Zirkelverweise anzeigen:In seiner einfachsten Form tritt ein Zirkelverweis auf, wenn ein Objekt auf ein anderes Objekt verweist, das auf das erste Objekt zurückverweist, sodass eine Schleife entsteht. In komplexeren Fällen kann der Pfad des Zirkelverweises viele Objekte umfassen. Zirkelverweise werden nicht angezeigt, damit der Stamm eine Objekts leichter zu finden ist. Wenn Sie die Pfade von Zirkelverweisen nachverfolgen müssen, können Sie sie mit dieser Option anzeigen:
    • Wenn Zirkelverweise angezeigt werden und Sie nicht aufpassen, kann es vorkommen, dass Sie ein und dasselbe Objekt immer und immer wieder untersuchen. Sie können solche Verwechslungen vermeiden, indem Sie Objekt-IDs anzeigen aktivieren.

Wird das Objekt, das eine Funktion repräsentiert, im Arbeitsspeichertool angezeigt, wird es mit seiner Position im Quellcode verknüpft und seine Farbe in Blau geändert. Dies ist neu in Windows 8.1 Update. Wenn Sie auf den Namen einer Funktion oder ihre Zeile klicken und die EINGABETASTE betätigen, wird der Debugger geöffnet und konzentriert sich auf die Position der Funktion im zugehörigen Skript.

Hinweis   Das Arbeitsspeichertool zeigt Funktionsnamen so an, wie sie im Arbeitsspeicher vorkommen. Wenn Sie JavaScript verwenden, das in einer anderen Sprache komprimiert oder kompiliert wurde, und eine Quellzuordnung haben, kann es passieren, dass Sie im Arbeitsspeichertool auf eine Funktion mit dem Namen t klicken und feststellen, dass der Fokus des Debugger auf einer Funktion mit dem Namen setOrigination liegt. Wenn dieses Problem auftritt und Sie stört, versuchen Sie, die Unterstützung für die Quellzuordnung im Debugger für diese Datei zu deaktivieren.

Vergleichsansicht

Klicken Sie in Momentaufnahmen, bei denen eine Änderung der Arbeitsspeicherverwendung oder Objektanzahl angezeigt wird, auf die Menge bzw. die Anzahl, um einen Vergleich zwischen dieser Momentaufnahme und der davor anzuzeigen.

Vergleich zweier Heapmomentaufnahmen im F12-Entwicklungstool "Arbeitsspeicher"

Mit Ausnahme der folgenden drei Unterschiede funktioniert die Vergleichsansicht wie die Detailansicht einer Momentaufnahme:

  • Sie können die Spalte Vorgang nach den Elementen, die sich geändert haben, und der Art der Änderung sortieren.
  • Die Zeilen sind entsprechend den Änderungen farbkodiert:
    • Bau: Objekte, die in beiden Momentaufnahmen vorhanden sind, zwischen den Momentaufnahmen aber verändert wurden.
    • Grün: Objekte, die zwischen den beiden Momentaufnahmen hinzugefügt wurden.
    • Schwarz: Keine Änderung.
  • Spalten werden hinzugefügt, die Unterschiede bezüglich Größe und Beibehaltene Größe anzeigen.

In Windows 8.1 Update wurden die Spalte Vorgang und die Farbkodierung entfernt und das Menü Umfang hinzugefügt. Umfang bietet Ihnen verschiedene Vergleichsansichten und ist vor allem in Verbindung mit einer Drei-Momentaufnahmen-Methode für die Arbeitsspeicheranalyse hilfreich.

So funktioniert die Drei-Momentaufnahmen-Methode

  • Laden Sie die Seite, und verwenden Sie sie einige Minuten lang ganz normal.
  • Beginnen Sie, die Sitzung aufzuzeichnen, und erstellen Sie die erste Momentaufnahme als Basiszeile.
  • Durchlaufen Sie das Szenario, das im Verdacht steht, ein Arbeitsspeicherproblem zu verursachen. Erstellen Sie die zweite Momentaufnahme.
  • Durchlaufen Sie das Szenario erneut. Erstellen Sie die dritte Momentaufnahme, und beenden Sie die Aufzeichnung.

Klicken Sie auf die Zahlen, die einen Anstieg der Arbeitsspeicherauslastung oder einen Anstieg/Rückgang von Objekten in Momentaufnahme 3 darstellen, um einen Vergleich mit Momentaufnahme 2 anzustellen. In dieser Vergleichsansicht bietet das Menü Umfang drei Möglichkeiten:

  • Übrig gebliebene Objekte aus Momentaufnahme 2.
  • Im Vergleich von Momentaufnahme 2 und 3 hinzugefügte Objekte.
  • Alle Objekte in Momentaufnahme 3.

Wenn Sie Momentaufnahme 1 mit Momentaufnahme 2 vergleichen, beinhaltet die Option Übrige Objekte der Momentaufnahme 1 alle Objekte auf der Seite, die sich in der Basiszeile befanden. Die meisten dieser Objekte sind Elemente, die zum Erstellen der Seite verwendet werden und einfach nur ein Wirrwarr erzeugen. Sie sind Bestandteil der Arbeitsspeicherauslastung der Webseite, sind aber nicht die Quelle des Anstiegs der Arbeitsspeicherauslastung.

Wenn Sie Momentaufnahme 2 mit Momentaufnahme 3 vergleichen, beinhaltet die Option Übrige Objekte der Momentaufnahme 2 nur die Objekte, die in Momentaufnahme 2 hinzugefügt wurden und in Momentaufnahme 3 noch vorhanden sind. Nun sehen Sie die Objekte, die sowohl nach der Basiszeile hinzugefügt wurden als auch nach dem erneuten Ausführen Szenarios bestehen bleiben. Es lohnt sich, diese Objekte genauer zu untersuchen, wenn Sie die Ursache für das Problem mit der Arbeitsspeicherauslastung der Webseite suchen.

ECMAScript 6-Container

Windows 8.1 Update unterstützt nun die Containerobjekte Set, Map und WeakMap im Arbeitsspeichertool. Dies vereinfacht die genaue Untersuchung ihrer Arbeitsspeicherauslastung. Diese Unterstützung ist nur verfügbar, wenn IE11 nicht in einem niedrigeren Browsermodus ausgeführt wird.

Verwandte Themen

Verständnis und Behebung von Arbeitsspeicherverlustmustern in Internet Explorer
Verwenden der F12-Entwicklungstools

 

 

Anzeigen:
© 2014 Microsoft