Analysieren der Speicherauslastung (JavaScript)

Die JavaScript-Speicheranalyse ist in Visual Studio verfügbar und soll Ihnen dabei helfen, die Speicherauslastung zu verstehen und Speicherverluste in Windows Store-Apps zu finden, die mit JavaScript für Windows erstellt wurden. Unterstützt werden Apps für den Windows Phone Store und Windows Store.

Der JavaScript-Arbeitsspeicheranalyse bietet folgende Möglichkeiten:

• Unterstützung bei der Suche nach Problemen mit der Speicherauslastung in der App, indem die wichtigsten Daten hervorgehoben werden.

  Sie erhalten diese Daten als Momentaufnahmen-Zusammenfassung, bei denen die Unterschiede zwischen zwei Momentaufnahmen dargestellt und Links zu detaillierteren Ansichten bereitgestellt werden.

• Bereitstellen von Ansichten von Dominatoren, Typen und Stämmen, um Unterstützung bei der Problemisolierung zu bieten.

• Verringerung nicht ausführbarer Informationen in den JavaScript-Heapdaten.

  Automatische Filterung von Objekten, die nicht direkt im App-Code erstellt werden. Sie können Daten auch nach Objektnamen filtern.

Ein Lernprogramm, das Sie durch den Prozess zum Identifizieren eines Speicherverlusts in einer funktionierenden App führt, finden Sie unter Exemplarische Vorgehensweise: Suchen eines Speicherverlusts (JavaScript).

In diesem Thema:

Ausführen der JavaScript-Speicheranalyse
Überprüfen der Speicherauslastung
Isolieren eines Speicherverlusts
Anzeigen der Zusammenfassung der Live-Speicherauslastung
Anzeigen einer Momentaufnahmen-Zusammenfassung
Anzeigen von Momentaufnahmedetails
Anzeigen eines Momentaufnahmevergleichs
Anzeigen von Objekten nach Dominator
Daten nach Bezeichner filtern
Suchen eines Objekts in der Objektstruktur
Anzeigen von freigegebenen Objektverweisen
Anzeigen integrierter Objekte
Speichern von Diagnosesitzungsdateien
Zuordnen von Quellcode zu Speicherauslastungsdaten
Tipps zum Identifizieren von Arbeitsspeicherproblemen

Ausführen der JavaScript-Speicheranalyse

Sie können die Speicheranalyse verwenden, wenn Sie über eine funktionierende Windows Store-App verfügen, die in Visual Studio geöffnet oder auf einem Computer installiert ist, auf dem Windows 8 oder Windows 8.1 ausgeführt wird.

So führen Sie die Speicheranalyse aus

1. Öffnen Sie Visual Studio.

2. Wenn Sie die App aus Visual Studio heraus ausführen, wählen Sie auf der Symbolleiste Standard in der Liste Debugging starten ein Debugziel für Ihr Projekt aus, entweder einen Windows Phone-Emulator oder für eine Windows Store-App Lokaler Computer, Simulator oder Remotecomputer.

   Weitere Informationen zu diesen Optionen finden Sie unter Ausführen von Store-Apps aus Visual Studio.

3. Wählen Sie im Menü Debuggen, Leistung und Diagnose aus.

   Standardmäßig wird das aktuelle Startprojekt analysiert. Wenn Sie das Analyseziel ändern möchten, wählen Sie Ziel ändern aus.

   

   Folgende Optionen sind für das Analyseziel verfügbar:

   • Startprojekt. Analysiert das aktuelle Startprojekt. Wenn Sie die Anwendung auf einem Remotecomputer ausführen, müssen Sie diese Option aktivieren. Dies ist die Standardauswahl.

   • Ausgeführte App. Ermöglicht die Auswahl einer Windows Store-App aus einer Liste laufender Apps. Diese Option können Sie nicht verwenden, wenn Sie die App auf einem Remotecomputer ausführen.

     Verwenden Sie diese Option zum Analysieren der Speicherauslastung von auf Ihrem Computer ausgeführten Apps, wenn Sie keinen Zugriff auf den Quellcode haben.

   • Installierte App. Ermöglicht die Auswahl einer installierten Windows Store-App zur Analyse. Diese Option können Sie nicht verwenden, wenn Sie die App auf einem Remotecomputer ausführen.

     Verwenden Sie diese Option zum Analysieren der Speicherauslastung von auf Ihrem Computer installierten Apps, wenn Sie keinen Zugriff auf den Quellcode haben. Diese Option kann auch nützlich sein, um die Speicherauslastung einer App außerhalb der eigenen App-Entwicklung zu analysieren.

4. Aktivieren Sie unter Verfügbare Tools das Kontrollkästchen JavaScript-Memory, und wählen Sie dann Start aus.

5. Wenn Sie die Speicheranalyse starten, werden Sie im Fenster "Benutzerkontensteuerung" eventuell aufgefordert, die Berechtigung zur Ausführung von Visual Studio ETW Collector.exe anzugeben. Klicken Sie auf Ja.

   Interagieren Sie mit der App, um die relevanten Speicherauslastungsszenarien zu testen und das Arbeitsspeicherdiagramm anzuzeigen, wie in den folgenden Abschnitten erläutert.

6. Wechseln Sie mittels der Tastenkombination ALT+TAB zu Visual Studio.

7. Um von der Arbeitsspeicheranalyse erfasste Daten anzuzeigen, wählen Sie Heap-Momentaufnahme erstellen aus. Siehe Anzeigen einer Momentaufnahmen-Zusammenfassung weiter unten in diesem Thema.

Überprüfen der Speicherauslastung

Sie können versuchen, Speicherverluste zu identifizieren, indem Sie unterschiedliche Ansichten in der JavaScript-Arbeitsspeicheranalyse verwenden. Wenn Sie bereits Speicherverlust bei der App vermuten, finden Sie unter Isolieren eines Speicherverlusts einen vorgeschlagenen Workflow.

Verwenden Sie die folgenden Ansichten, um Speicherverluste in einer App zu identifizieren:

• Zusammenfassung der Live-Speicherauslastung. Verwenden Sie das Speicherauslastungsdiagramm, um nach abrupten Zunahmen bei der Speicherauslastung oder bei sich kontinuierlich erhöhender Speicherauslastung zu suchen, die durch bestimmte Aktionen entsteht. Verwenden Sie die Zusammenfassungsansicht der Speicherauslastung in Liveansicht, um Momentaufnahmen des Heaps zu erstellen. Die Momentaufnahmen werden als Auflistung unter dem Speicherauslastungsdiagramm angezeigt.

  Tipp

  Sie erkennen eine Spitze in der Speicherauslastung, wenn Sie eine Momentaufnahme erstellen.Verwenden Sie die Momentaufnahmezusammenfassungen, um Genaueres über die Zunahme zu erfahren.

• Momentaufnahmen-Zusammenfassung. Sie können Kurzinformationen der Momentaufnahmen während oder nach einer Sitzung zur Arbeitsspeicherprofilerstellung anzeigen. Verwenden Sie die Zusammenfassungen der Momentaufnahmen, um zu den Ansichten der Momentaufnahmedetails und des Momentaufnahmevergleichs zu verknüpfen.

  Tipp

  In der Regel bieten die Ansichten des Momentaufnahmevergleichs die nützlichsten Informationen zu Speicherverlusten.

• Momentaufnahmedetails. Sie zeigt detaillierte Speicherauslastungsdaten für eine einzelne Momentaufnahme.

• Momentaufnahmevergleich. Es werden differenzielle Werte zwischen Momentaufnahmen angezeigt. Diese Ansichten zeigen Unterschiede in der Objektgröße und -anzahl an.

Isolieren eines Speicherverlusts

In den folgenden Schritten wird ein Workflow vorgeschlagen, mit dem Sie die JavaScript-Speicheranalyse effektiver verwenden können. Diese Schritte können hilfreich sein, wenn Sie Speicherverlust bei der App vermuten. Ein Lernprogramm, das Sie durch den Prozess zum Identifizieren eines Speicherverlusts in einer funktionierenden App führt, finden Sie unter Exemplarische Vorgehensweise: Suchen eines Speicherverlusts (JavaScript).

1. Öffnen Sie die App in Visual Studio.

2. Ausführen der JavaScript-Speicheranalyse Weitere Informationen finden Sie unter Ausführen der JavaScript-Speicheranalyse.

3. Führen Sie Ihre App für das Szenario aus, das Sie testen möchten. Dies kann z. B. eine große DOM-Veränderung sein, wenn eine bestimmte Seite geladen oder die App gestartet wird.

4. Wiederholen Sie das Szenario noch ein- bis viermal.

   Tipp

   Indem Sie das Testszenario mehrmals wiederholen, können Sie sicherstellen, dass die Initialisierungsarbeit aus den Ergebnissen herausgefiltert werden kann.

5. Wechseln Sie zu Visual Studio (drücken Sie ALT+TAB).

6. Nehmen Sie eine Momentaufnahme des Baselineheaps auf, indem Sie Heap-Momentaufnahme erstellen auswählen.

   In der folgenden Abbildung ist ein Beispiel für eine Momentaufnahme eines Baselineheaps dargestellt:

   

   Tipp

   Zur genaueren zeitlichen Steuerung bei Momentaufnahmen verwenden Sie den Befehl console.takeHeapSnapshot im Code.

7. Wechseln Sie zu Ihrer App, und wiederholen Sie das Szenario, das Sie testen (nur einmal).

8. Wechseln Sie zu Visual Studio, und nehmen Sie eine zweite Momentaufnahme auf.

9. Wechseln Sie zu Ihrer App, und wiederholen Sie das Szenario, das Sie testen (nur einmal).

10. Wechseln Sie zu Visual Studio, und nehmen Sie eine dritte Momentaufnahme auf.

    In der folgenden Abbildung wird ein Beispiel einer zweiten und dritten Momentaufnahme dargestellt.

    

    Indem Sie in diesem Workflow eine grundlegende Momentaufnahme und dann eine zweite und dritte Momentaufnahme machen, können Sie die Änderungen einfacher herausfiltern, die nichts mit Speicherverlusten zu tun haben. Es gibt z. B. möglicherweise erwartete Änderungen, wie das Aktualisieren von Kopf- und Fußzeilen auf einer Seite, die zu einige Änderungen bei der Speicherauslastung führen, aber nicht mit Speicherverlusten zusammenhängen.

11. Wählen Sie in der dritten Momentaufnahme einen Link zu einer der Differenzansichten:

    • Differenzielle Heapgröße (Link links unter der Heapgröße). Der Linktext gibt die Differenz zwischen der Heapgröße der aktuellen Momentaufnahme und der Heapgröße der vorherigen Momentaufnahme an.

    • Differenzielle Objektanzahl (Link rechts unter der Objektanzahl). Der Linktext gibt zwei Werte an (z. B. +1858/-1765): Der erste Wert ist die Anzahl neuer Objekte, die seit der vorherigen Momentaufnahme hinzugefügt wurden. Der zweite Wert ist die Anzahl der Objekte, die seit der vorherigen Momentaufnahme entfernt wurden.

    Über diese Links wird eine Detailansicht der Differenzen zwischen den Momentaufnahmen für die Heaptypen geöffnet, die entweder nach beibehaltener Größe oder nach Objektanzahl sortiert ist, abhängig davon, auf welchen Link Sie geklickt haben.

12. Wählen Sie eine der folgenden Filteroptionen für den Bereich, damit Sie Probleme bei der Speichernutzung einfacher finden können:

    • Übrige Objekte der Momentaufnahme #2.

    • Objekte zwischen Momentaufnahme #2 und #3 eingefügt

    Tipp

    Verwenden Sie die gefilterte Ansicht der Objekte, die von der vorherigen Momentaufnahme übrig sind, um Speicherverluste genauer zu untersuchen.Wenn die differenzielle Objektanzahl zum Beispiel +205/-195 beträgt, zeigt diese Ansicht die zehn übrig gebliebenen Objekte an, die wahrscheinlich für die Speicherverluste verantwortlich sind.

    Die folgende Abbildung zeigt eine Differenzansicht der Objekte, die aus der Momentaufnahme 2 übrig geblieben sind.

    

    In der vorhergehenden Abbildung können wir sehen, dass aus der vorherigen Momentaufnahme zwei Objekte übrig geblieben sind. Untersuchen Sie, ob es sich hierbei um ein erwartetes Verhalten dieser speziellen App handelt. Wenn nicht, kann dies auf einen Speicherverlusts hinweisen.

13. Um zu sehen, woher Objekte in den Vergleichsansichten im globalen Objekt, das die Durchführung einer Garbage Collection verhindert, entstammen, öffnen Sie das Kontextmenü für ein Objekt, und wählen Sie dann In Stammansicht anzeigen aus. Es kann sein, dass eine große Anzahl von Objekten im Speicher beibehalten wird, da sie von einem einzelnen Objekt bzw. einigen wenigen Objekten referenziert werden, die dem globalen Objekt als Stamm zugewiesen sind.

14. Wenn in der Ansicht der übrig gebliebenen Objekte zu viele Objekte angezeigt werden, versuchen Sie, den Zeitraum noch genauer einzugrenzen, in dem der Speicherverlust auftritt. Erstellen Sie anschließend die drei Momentaufnahmen noch einmal. Um den Speicherverlust weiter zu isolieren, verwenden Sie console.takeHeapSnapshot, Benutzermarkierungenund andere Daten zur Speicherauslastung, die in der Arbeitsspeicheranalyse verfügbar sind.

Anzeigen der Zusammenfassung der Live-Speicherauslastung

Die Zusammenfassungsansicht der Live-Speicherauslastung stellt ein Speicherauslastungsdiagramm für die ausgeführte App und eine Auflistung aller Kacheln der Momentaufnahmen-Zusammenfassung bereit. In dieser Ansicht können Sie grundlegende Aufgaben ausführen, wie das Erstellen von Momentaufnahmen, die Analyse von Informationen der Zusammenfassung und das Navigieren zu anderen Ansichten. Wenn Sie die Datenerfassung beendet haben, verschwindet das Arbeitsspeicherdiagramm, und Sie sehen nur die Ansicht der Momentaufnahmen-Zusammenfassung..

Das Arbeitsspeicherdiagramm zeigt eine aktive Ansicht des Prozessarbeitsspeichers der App, die private Bytes, systemeigenen Speicher und den JavaScript-Heap umfasst. Das Arbeitsspeicherdiagramm ist eine bildlauffähige Ansicht des Prozessspeichers. Hier sehen Sie, wie es aussieht:

Wenn Sie Ihrem Code Benutzermarkierungen hinzugefügt haben (siehe Zuordnen von Quellcode zu Speicherauslastungsdaten), wird ein umgekehrtes Dreieck im Speicherauslastungsdiagramm angezeigt, um anzugeben, wann dieser Codeabschnitt erreicht ist.

Ein Teil des im Arbeitsspeicherdiagramm dargestellten Arbeitsspeichers wird von der JavaScript-Laufzeit zugeordnet. Sie können diese Speicherauslastung in der App nicht steuern. Die im Diagramm dargestellte Speicherauslastung erhöht sich bei Erstellen der ersten Momentaufnahme und erhöht sich geringfügig bei jeder weiteren Momentaufnahme.

Anzeigen einer Momentaufnahmen-Zusammenfassung

Um eine Momentaufnahme des aktuellen Zustands der Speicherauslastung der App zu erstellen, wählen Sie im Arbeitsspeicherdiagramm Heap-Momentaufnahme erstellen aus. Eine Kachel zur Momentaufnahmen-Zusammenfassung wird in der Zusammenfassung der Live-Speicherauslastung (bei laufender App) und in der Momentaufnahmenzusammenfassung (bei beendeter App) angezeigt und enthält Informationen zum JavaScript-Heap sowie Links zu ausführlicheren Informationen. Bei mindestens zwei erstellten Momentaufnahmen stellt eine Momentaufnahme zusätzliche Informationen zum Vergleich der aktuellen Daten mit denen der vorherigen Momentaufnahme bereit.

Im Folgenden finden Sie ein Beispiel einer Momentaufnahmenzusammenfassung bei Erstellung mehrerer Momentaufnahmen.

Die Momentaufnahmenzusammenfassung enthält:

• Titel der Momentaufnahme und Zeitstempel

• Anzahl der potenziellen Probleme (gekennzeichnet durch ein blaues Informationssymbol). Diese Zahl, sofern vorhanden, identifiziert alle potenziellen Arbeitsspeicherprobleme, wie z. B. Knoten, die nicht am DOM angefügt sind. Die Zahl ist mit der Typenansicht der Momentaufnahme verknüpft. Diese ist nach Problemtyp sortiert, um die potenziellen Probleme hervorzuheben. Es wird eine QuickInfo mit einer Beschreibung des Problems angezeigt.

• Heapgröße. Diese Zahl umfasst DOM-Elemente und Objekte, die dem JavaScript-Heap vom JavaScript-Laufzeitmodul hinzugefügt werden. Die Heapgröße ist mit der Typenansicht der Momentaufnahme verknüpft.

• Differenzielle Heapgröße. Dieser Wert stellt den Unterschied zwischen der Heapgröße der aktuellen Momentaufnahme und der Heapgröße der vorherigen Momentaufnahme dar. Hinter dem Wert sehen Sie einen roten Pfeil nach oben, falls der Arbeitsspeicher angestiegen ist, bzw. einen grünen Pfeil nach unten, wenn der Arbeitsspeicher gesunken ist. Wenn die Heapgröße sich zwischen den Momentaufnahmen nicht geändert hat, wird der Text Keine Änderung anstelle einer Zahl angezeigt. Für die erste Momentaufnahme sehen Sie den Text Basislinie. Die differenzielle Heapgröße ist mit der Ansicht "Typen" des Momentaufnahmevergleichs verknüpft.

• Objektanzahl. Diese Zahl gibt nur die in der App erstellten Objekte an. Integrierte, von der JavaScript-Laufzeit erstellte Objekte werden herausgefiltert. Die Objektanzahl ist ein Link zur Typansicht der Momentaufnahmedetails.

• Differenzielle Objektanzahl. Dadurch werden zwei Werte angezeigt: Der erste Wert ist die Anzahl neuer Objekte, die seit der vorherigen Momentaufnahme hinzugefügt wurden. Der zweite Wert ist die Anzahl der Objekte, die seit der vorherigen Momentaufnahme entfernt wurden. Die Abbildung zeigt zum Beispiel, dass 1.859 Objekte hinzugefügt wurden und 1.733 Objekte seit Momentaufnahme Nr. 1 entfernt wurden. Hinter dieser Information sehen Sie einen roten Pfeil nach oben, falls die Objektgesamtanzahl angestiegen ist, bzw. einen grünen Pfeil nach unten, wenn sie gesunken ist. Wenn sich die Objektanzahl nicht geändert hat, wird der Text Keine Änderung anstelle einer Zahl angezeigt. Für die erste Momentaufnahme sehen Sie den Text Basislinie. Die differenzielle Objektanzahl ist mit der Ansicht "Typen" des Momentaufnahmenvergleichs verknüpft.

• Screenshot des Bildschirms zum Zeitpunkt der Momentaufnahme.

Anzeigen von Momentaufnahmedetails

Sie können ausführliche Informationen zur Speicherauslastung für jede Momentaufnahme in den Ansichten "Momentaufnahmedetails" anzeigen.

Wählen Sie in der Ansicht der Momentaufnahme-Zusammenfassung einen Link aus, um die Momentaufnahmedetails anzuzeigen. Beispielsweise werden durch Klicken auf den Link der Heapgröße standardmäßig die Momentaufnahmedetails mit der Typenansicht angezeigt.

Diese Abbildung zeigt die Typenansicht in einem Momentaufnahmedetail, wobei die Speicherauslastungsdaten nach beibehaltener Größe sortiert sind.

In der Ansicht der Momentaufnahmedetails können Sie Daten zur Speicherauslastung nach Typ, Stamm oder Dominator überprüfen, indem Sie eine Option aus der Symbolleiste auswählen:

• Typen Zeigt die Instanzenanzahl und die Gesamtgröße der Objekte im Heap, gruppiert nach Objekttyp. Standardmäßig werden diese nach Instanzenanzahl sortiert.

  Tipp

  In der Regel sind die Differenzansichten der Typen im Objektheap am nützlichsten, um einen Speicherverlust zu identifizieren. Diese Ansichten verfügen über einen Bereichsfilter, mit dem übrig gebliebene Objekte ermittelt werden können.

• Stammelemente. Zeigt eine hierarchische Ansicht von Objekten von den Stammobjekten bis zu den untergeordneten Verweisen an. Standardmäßig werden die untergeordneten Knoten nach der Spalte "Beibehaltene Größe" sortiert, beginnend mit dem größten Knoten.

• Dominatoren Zeigt eine Liste von Objekten im Heap an, die exklusive Verweise auf andere Objekte haben. Dominatoren werden nach beibehaltener Größe sortiert.

  Tipp

  Wenn Sie einen Dominator aus dem Arbeitsspeicher entfernen, geben Sie den gesamten Speicherplatz frei, den das Objekt besetzt.Bei einigen Apps kann die Dominatorenansicht dabei helfen, die Größe von beibehaltenem Speicher zu ermitteln, da Sie hiermit die vollständige Objektbezugskette untersuchen können.

Alle drei Ansichten zeigen ähnliche Werttypen an, darunter:

• Bezeichner Der Name, der das Objekt am besten identifiziert. Zum Beispiel zeigen bei HTML-Elementen die Momentaufnahmendetails den ID-Attributwert an, sofern einer verwendet wird.

• Typ. Objekttyp (z. B. HTML-Linkelement oder div-Element).

• Größe Größe des Objekts, ohne die Größe aller referenzierten Objekte.

• Beibehaltene Größe. Objektgröße plus die Größe aller untergeordneten Objekte, die über keine weiteren übergeordneten Objekte verfügen. Aus praktischen Gründen handelt es sich bei dieser Summe um die Menge an Arbeitsspeicher, die vom Objekt beibehalten wird, sodass dieser Arbeitsspeicher wieder freigegeben wird, sobald Sie das Objekt löschen.

• Anzahl Zahl Objektinstanzen. Dieser Wert wird nur in der Typansicht angezeigt.

Anzeigen eines Momentaufnahmevergleichs

In der JavaScript-Speicheranalyse können Sie in den Ansichten "Momentaufnahmevergleich" eine Momentaufnahme mit einer vorherigen vergleichen.

In der Ansicht der Momentaufnahmezusammenfassung können Sie die differenziellen Momentaufnahmedetails anzeigen, indem Sie die differenzielle Heapgröße oder die Links der differenziellen Objektanzahl auswählen, nachdem mindestens zwei Momentaufnahmen ausgeführt wurden.

Sie können Differenzinformationen über Typen, Stammelemente und Dominatoren anzeigen. Der Momentaufnahmevergleich zeigt alle Informationen, wie z. B. Objekte, die dem Heap in der Zeit zwischen den beiden Momentaufnahmen hinzugefügt wurden, an.

Diese Abbildung zeigt die Ansicht "Typen" in einem Momentaufnahmevergleich.

Im Fenster mit der Momentaufnahmendifferenz werden Ansichten von Dominatoren, Typen und Stämme genau so dargestellt wie im Fenster Momentaufnahmedetails. Die Ansicht "Momentaufnahmevergleich" zeigen die gleichen Informationen wie die Momentaufnahmedetails an, und zusätzlich folgende Werte:

• Größenunterschied. Der Unterschied zwischen der Größe des Objekts in der aktuellen Momentaufnahme und seiner Größe in der vorherigen Momentaufnahme, ohne die Größe aller referenzierten Objekte.

• Unterschied beibehaltene Größe. Der Unterschied zwischen der beibehaltenen Größe des Objekts in der aktuellen Momentaufnahme und seiner beibehaltenen Größe in der vorherigen Momentaufnahme. Die beibehaltene Größe umfasst die Objektgröße sowie die Größe aller untergeordneten Objekte, die über keine anderen übergeordneten Objekte verfügen. Aus praktischen Gründen handelt es sich bei der beibehaltenen Größe um die Menge an Arbeitsspeicher, der vom Objekt beibehalten wird, sodass dieser Arbeitsspeicher wieder freigegeben wird, sobald Sie das Objekt löschen.

Um die Differenzinformationen zwischen den Momentaufnahmen zu filtern, wählen Sie einen der Bereichsfilter oben in den Differenzansichten aus.

• Übrige Objekte der Momentaufnahme #<Zahl>. Dieser Filter gibt die Differenz zwischen den Objekten, die dem Heap hinzugefügt wurden und die aus dem Heap entfernt wurden, im Vergleich zur Basis-Momentaufnahme und zur vorherigen Momentaufnahme an. Wenn die Momentaufnahmenzusammenfassung als Objektanzahl z. B. „+205/-195“ angibt, zeigt dieser Filter die zehn Objekte an, die hinzugefügt, jedoch nicht entfernt wurden.

  Tipp

  Um mit diesem Filter die nützlichsten Informationen anzuzeigen, befolgen Sie die unter Isolieren eines Speicherverlusts beschriebenen Schritte.

• Objekte zwischen Momentaufnahme #<Zahl> und #<Zahl> eingefügt. Dieser Filter zeigt alle Objekte an, die nach der vorherigen Momentaufnahme dem Heap hinzugefügt wurden.

• Alle Objekte in Momentaufnahme #<Zahl>. Bei dieser Filtereinstellung werden keine Objekte im Heap herausgefiltert.

Zum Anzeigen von Objektverweisen, die nicht dem aktuellen Bereichsfilter entsprechen, wählen Sie in der Einstellungsliste  in der rechten oberen Ecke des Bereichs die Option Nicht übereinstimmende Verweise anzeigen aus. Wenn Sie diese Einstellung aktivieren, werden nicht übereinstimmende Verweise mit grauem Text dargestellt.

Anzeigen von Objekten nach Dominator

In den Ansichten "Typen" und "Dominatoren" können Sie auswählen, ob Objekte in ihre Dominatoren gefaltet angezeigt werden (dies ist die Standardansicht auf der Registerkarte "Dominatoren"). Wenn diese Ansicht ausgewählt ist, werden Dominatoren nur in der Ansicht der obersten Ebene von Objekten angezeigt. (Objekte, die untergeordnete Elemente von nicht globalen Objekten sind, werden in der Ansicht der obersten Ebene ausgeblendet.) Bei einigen Apps kann dies klären, welche Objekte einen Speicherverlust verursachen, indem Störungen in den Daten reduziert werden.

Um die Anzeige von Objekten nach Dominator umzuschalten, wählen Sie die Schaltfläche Objekte nach Dominator reduzieren.

Weitere Informationen zu Dominatoren finden Sie unter Anzeigen von Momentaufnahmedetails.

Daten nach Bezeichner filtern

In den Ansichten "Dominatoren" und "Typen" können Sie Daten filtern, indem Sie nach bestimmten Bezeichnern suchen. Um nach einem Bezeichner zu suchen, geben Sie seinen Namen einfach oben rechts in das Textfeld Bezeichnerfilter ein. Wenn Sie mit der Eingabe beginnen, werden Bezeichner ohne die eingegebenen Zeichen herausgefiltert.

Jede Ansicht hat ihren eigenen Filter, sodass der Filter nicht beibehalten wird, wenn Sie zu einer anderen Ansicht wechseln.

Suchen eines Objekts in der Objektstruktur

In den Typen- und Dominatorenansichten wird die Beziehung eines bestimmten Objekts zum Global-Objekt sichtbar. Für Objekte, die mit dem Global-Objekt als Stamm verknüpft sind, wird keine Garbage Collection durchgeführt. Sie können ein bekanntes Objekt leicht in der Stammansicht finden, ohne die Objektstruktur Global zu durchsuchen. Öffnen Sie hierzu das Kontextmenü für ein Objekt in der Ansicht "Dominatoren" oder "Typen", und wählen Sie dann In Stammansicht anzeigen aus.

Anzeigen von freigegebenen Objektverweisen

In den Typen- und Dominatorenansichten enthält der untere Bereich eine Objektverweisliste, in der die freigegebenen Verweise angezeigt werden. Wenn Sie ein Objekt im oberen Bereich auswählen, werden in der Objektverweisliste alle Objekte angezeigt, die auf dieses Objekt verweisen.

Wenn Sie zusätzliche Hilfe bei der Identifizierung der entsprechenden Objekte benötigen, wählen Sie in der Einstellungsliste  in der rechten oberen Ecke des oberen Bereichs die Option Objekt-IDs anzeigen aus. Durch diese Option werden Objekt-IDs neben den Objektnamen in der Liste Bezeichner angezeigt (die IDs werden in allen Ansichten, nicht nur in der Objektverweisliste, angezeigt). Objekte mit der gleichen ID sind freigegebene Verweise.

Die folgende Abbildung zeigt die Objektverweisliste für ein ausgewähltes Element mit den angezeigten IDs an.

Anzeigen integrierter Objekte

Standardmäßig werden in den Ansichten "Dominatoren" und "Typen" nur die Objekte angezeigt, die in der App erstellt werden. Damit werden nicht benötigte Informationen herausgefiltert und auf die App bezogene Probleme isoliert. Manchmal ist es aber hilfreich, alle Objekte anzuzeigen, die von der JavaScript-Laufzeit für die App generiert werden.

Zum Anzeigen dieser Objekte wählen Sie in der Einstellungsliste  in der rechten oberen Ecke des Bereichs die Option Integrierte anzeigen aus.

Speichern von Diagnosesitzungsdateien

Momentaufnahmen-Zusammenfassungen zu Diagnosezwecken sowie die zugeordneten Detailansichten werden als .diagsessions-Dateien gespeichert. Der Projektmappen-Explorer zeigt vorherige Diagnosesitzungen im Ordner "Diagnosesitzungen" an. Im Projektmappen-Explorer können Sie vorherige Sitzungen öffnen oder Dateien entfernen bzw. umbenennen.

Zuordnen von Quellcode zu Speicherauslastungsdaten

Zur Isolierung des Codeabschnitts, bei dem ein Arbeitsspeicherproblem vorliegt, verwenden Sie die folgenden Methoden:

• Suchen Sie nach Klassennamen und IDs für DOM-Elemente in den Details und den differenziellen Ansichten.

• Suchen Sie nach Zeichenfolgewerten in den Details und den Differenzansichten, die eventuell dem Quellcode zugeordnet sind.

• Verwenden Sie den Befehl Anzeigen in der Stammansicht, um die Objektstruktur zu durchlaufen. Dies hilft Ihnen möglicherweise dabei, den entsprechenden Quellcode zu identifizieren.

• Fügen Sie Speicheranalysebefehle zum Quellcode hinzu.

Sie können die folgenden Befehle im Quellcode verwenden:

• console.takeHeapSnapshot akzeptiert eine in der JavaScript-Arbeitsspeicheranalyse angezeigte Heapmomentaufnahme. Dieser Befehl ist einer der JavaScript-Konsolenbefehle.

• performance.mark legt eine Benutzermarkierung fest (das umgekehrte Dreieck), die in der Zusammenfassungsansicht in der Zeitachse des Arbeitsspeicherdiagramms angezeigt wird, während die App ausgeführt wird. Dieser Befehl akzeptiert ein Zeichenfolgenargument, mit dem das Ereignis beschrieben und als QuickInfo im Arbeitsspeicherdiagramm angezeigt wird. Diese Beschreibung darf 100 Zeichen nicht übersteigen.

Diese Befehle lösen eine Ausnahme aus, wenn Sie sie der App hinzufügen und die App außerhalb der JavaScript-Speicheranalyse ausführen. Vor deren Verwendung jedoch können Sie testen, ob die Befehle vorhanden sind. (Die Befehle sind nicht früh in der Anlaufphase der Sitzung vorhanden.) Um sicherzustellen, dass Sie takeHeapSnapshot sicher aufrufen können, verwenden Sie den folgenden Code:

if (console && console.takeHeapSnapshot) {
    console.takeHeapSnapshot();
}

Um sicherzustellen, dass Sie performance.mark sicher aufrufen können, verwenden Sie den folgenden Code:

if (performance && performance.mark) {
    performance.mark("message_string");
}

Hier sehen Sie ein Arbeitsspeicherdiagramm mit einigen Benutzermarkierungen und der QuickInfo für die aktuell ausgewählte Benutzermarkierung, für die das performance.mark-Zeichenfolgeargument auf "Daten generiert" festgelegt wird:

Tipps zum Identifizieren von Arbeitsspeicherproblemen

• Führen Sie den unter Isolieren eines Speicherverlusts beschriebenen Workflow aus, und verwenden Sie den Filter Übrige Objekte der Momentaufnahme #<Nummer> in einer Differenzansicht, um Kandidaten zu identifizieren, die wahrscheinlich für die Speicherverluste verantwortlich sind.

• Mit der Option Anzeigen in der Stammansicht können Sie anzeigen, an welcher Stelle in der Speicherhierarchie auf ein Objekt verwiesen wird. Die Stammansicht zeigt, wie ein Objekt mit dem globalen Objekt als Stamm verknüpft ist, was die Garbage Collection für dieses Objekt verhindern würde.

• Wenn die Ursache eines Arbeitsspeicherproblems schwer zu erkennen ist, verwenden Sie die verschiedenen Ansichten (z. B. Dominatoren und Typen), um nach Gemeinsamkeiten zu suchen. Dies kann insbesondere dazu nützlich sein, ein Objekt (oder einige wenige Objekte) zu identifizieren, die Verweise auf viele andere Objekte in der Ansicht enthalten.

• Suchen Sie nach Objekten, die versehentlich im Arbeitsspeicher beibehalten werden, nachdem der Benutzer zu einer neuen Seite navigiert ist. Dies ist eine häufige Ursache von Arbeitsspeicherproblemen. Beispiel:

  • Die falsche Verwendung der Funktion URL.CreateObjectUrl kann dieses Problem verursachen.

  • Einige Objekte stellen möglicherweise eine dispose-Methode und Verwendungsempfehlungen bereit. So sollten Sie zum Beispiel dispose für ein WinJS.Binding.List aufrufen, wenn Sie die createFiltered-Methode der Liste aufrufen und dann von einer Seite weg navigieren.

  • Sie müssen unter Umständen einen oder mehrere Eventlistener entfernen. Weitere Informationen finden Sie unter Anzeigen von DOM-Ereignislistenern.

• Sehen Sie sich den letzten Teil dieses Video von der Build 2013-Konferenz über die JavaScript-Speicheranalyse an.

• Lesen Sie Verwalten des Arbeitsspeichers in Windows Store-Apps.

• Erwägen Sie, vorübergehend Code zu ändern, um Probleme zu isolieren. Auf diese Weise können Sie z. B. folgende Vorgänge durchführen:

  • Verwenden Sie die Befehle für die Speicheranalyse, console.takeSnapshot und performance.mark. (Siehe Zuordnen von Quellcode zu Speicherauslastungsdaten.)

    Sie können diese Befehle zum Isolieren von Problemen verwenden, die Sie nicht isolieren können, indem Sie manuell eine Heap-Momentaufnahme erstellen.

  • Erstellen Sie ein Testobjekt, und verfolgen Sie es in den Ansichten der JavaScript-Speicheranalyse, z. B. in der Typenansicht. Beispielsweise können Sie einem anderen Objekt ein sehr großes Objekt anfügen, um festzustellen, ob für ein bestimmtes Objekt oder Element eine Garbage Collection durchgeführt wurde.

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Suchen eines Speicherverlusts (JavaScript)