Analysieren von Speicherauslastungsdaten (JavaScript)

in diesem Thema wird der JavaScript-Arbeitsspeicheranalyzer beschrieben. Dieses Tool ist für Windows Store-Apps verfügbar, die mit JavaScript in Visual Studio 2012 Update 1 erstellt wurden. Ein Lernprogramm zur Verwendung dieses Tools, finden Sie unter Lernprogramm: Suchen eines Speicherverlusts (JavaScript).

Ansicht von Speicherauslastungsdaten

Sie können den JavaScript-Arbeitsspeicheranalyzer mit einer in Visual Studio geöffneten, funktionierenden Windows Store-App verwenden.

So führen Sie den JavaScript-Arbeitsspeicheranalyzer aus

1. Wenn Sie die App aus Visual Studio heraus ausführen, klicken Sie auf Lokaler Computer, Simulator oder auf der Symbolleiste Debuggen in der Dropdownliste Debugging starten auf den Eintrag Remotecomputer ausführen.

   Weitere Informationen über diese Optionen finden Sie unter Ausführen von Windows Sore-Apps aus Visual Studio.

2. Zeigen Sie im Menü Debuggen auf das Element JavaScript-Speicheranalyse und anschließend auf eine der folgenden Optionen:

   • Startprojekt starten. Klicken Sie auf diese Option, um das aktuelle Startprojekt zu starten. Verwenden Sie diese Option, wenn Sie die App auf einem Remotecomputer ausführen.

   • Installiertes App-Paket starten Verwenden Sie diese Option, um eine installierte App auszuwählen, die Sie analysieren möchten. Diese Option wird nicht unterstützt, wenn die App auf einem Remotecomputer ausgeführt wird.

     Sie können diese Option zum Analysieren der Speicherauslastung von Apps auf Ihrem Computer verwenden, 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.

   • Anfügen an eine ausgeführte App Klicken Sie auf diese Option, um eine App aus einer Liste von ausgeführten Apps auszuwählen. This option is not supported when running the app on a remote machine.

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

   Bei Start des Arbeitsspeicheranalyzers, wird möglicherweise eine Benutzerkontensteuerung die Berechtigung zum Ausführen der Datei "VsEtwCollector.exe" abfragen. Klicken Sie auf Ja.

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

   Die Zusammenfassungsansicht für den JavaScript-Arbeitsspeicheranalyzer wird auf der Registerkarte "Diagnosehub" angezeigt.

Ansichten der Speicherauslastung

Wenn Sie den JavaScript-Arbeitsspeicheranalyzer ausführen, stehen die folgenden Ansichten für Speicherauslastungsdaten zur Verfügung:

• Zusammenfassungsansicht. Stellt ein Speicherauslastungsdiagramm für die ausgeführte App und eine Auflistung aller Kacheln der Momentaufnahmen-Zusammenfassung bereit. Diese Ansicht wird auf der Registerkarte "Diagnosehub" angezeigt.

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

• Anzeigen eines Momentaufnahmeunterschieds. Sie zeigt detaillierte Speicherauslastungsdaten als differenzielle Werte zwischen zwei ausgewählten Momentaufnahmen.

Zusammenfassungsansicht

Die Zusammenfassungsansicht 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, wie das Erstellen von Momentaufnahmen, Analysieren von Informationen der Zusammenfassung und das Navigieren zu anderen Ansichten, ausführen.

Das Arbeitsspeicherdiagramm zeigt eine aktive Ansicht des Prozessarbeitsspeichers der App, die private Bytes, systemeigenen Speicher und den JavaScript-Heap umfasst. So wird das Diagramm dargestellt:

Das Arbeitsspeicherdiagramm ist eine bildlauffähige Ansicht des Prozessspeichers.

Sofern dem App-Code Profilmarken hinzugefügt wurden, wird im Speicherauslastungsdiagramm ein Dreieck als Benutzermarkierung dargestellt, sobald dieser Codeabschnitt erreicht wird. Weitere Informationen finden Sie unter JavaScript-Konsolenbefehle.

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 etwas weniger für jede weitere Momentaufnahme.

Anzeigen einer Momentaufnahmen-Zusammenfassung

Sie können eine Momentaufnahme aufnehmen, die den aktuellen Status der Speicherauslastung der App zeigt, indem Sie in der Zusammenfassungsansicht auf Heap-Momentaufnahme erstellen klicken. Eine Kachel der Momentaufnahmen-Zusammenfassung, die auch in der Zusammenfassungsansicht angezeigt wird, stellt Informationen zum JavaScript-Heap sowie Links zu ausführlicheren Informationen bereit. Bei mindestens zwei erstellten Momentaufnahmen, stellt eine Momentaufnahme zusätzliche Informationen zum Vergleich der aktuellen Daten mit denen der vorherigen Momentaufnahme bereit.

Hinweis

Der JavaScript-Arbeitsspeicheranalyzer erzwingt vor jeder Momentaufnahme die Durchführung einer Garbage Collection. Damit werden konsistentere Ergebnisse zwischen den Ausführungen sichergestellt.

Diese Abbildung zeigt das Beispiel einer Momentaufnahme, bei der bereits zuvor eine Momentaufnahme erstellt wurde.

Dies sind die auf den Momentaufnahmen für die Zusammenfassung enthaltenen Informationen:

• Titel der Momentaufnahme und Zeitstempel

• Heapgröße (blauer Text, linke Seite) Diese Zahl umfasst DOM-Elemente und Objekte, die dem JavaScript-Heap vom JavaScript-Laufzeitmodul hinzugefügt werden. Die Heapgröße ist ein Link zur Ansicht "Dominatoren" der Momentaufnahme.

• Differenzielle Heapgröße (roter oder grüner Text, linke Seite). Dieser Wert stellt den Unterschied zwischen der Heapgröße der aktuellen Momentaufnahme und der Heapgröße der vorherigen Momentaufnahme dar. Der Wert wird bei einem Anstieg im Arbeitsspeicher in rot angezeigt; andernfalls in grün. Wenn die Heapgröße identisch ist, wird der Wert Kein Unterschied angezeigt. Bei der ersten Momentaufnahme ist der Wert einfach Basislinie (grauer Text). Dieser Wert ist ein Link zur Ansicht "Dominatoren" des Momentaufnahmevergleichs.

• Objektanzahl (blauer Text, rechte Seite) Diese Zahl gibt nur die in der App erstellten Objekte an. Integrierte, von der JavaScript-Laufzeit erstellte Objekte werden ausgefiltert. Die Objektanzahl ist ein Link zur Typansicht der Momentaufnahmedetails.

• Anzahl von differenziellen Objekten (roter oder grüner Text, rechte Seite) Dieser Wert zeigt den Unterschied zwischen der Objektanzahl der aktuellen Momentaufnahme und der Objektanzahl der vorherigen Momentaufnahme an. Bei einer Zunahme der Objektanzahl wird der Wert in rot dargestellt; andernfalls in grün. Wenn die Objektanzahl identisch ist, wird der Wert Kein Unterschied angezeigt. For the first snapshot, the value is simply Baseline (gray text). Dieser Wert ist ein Link zur Ansicht "Typen" des Momentaufnahmevergleichs.

• Screenshot des Bildschirms zum Zeitpunkt der Momentaufnahme.

Tipp

Es ist möglich, dass die Momentaufnahmen-Zusammenfassung keine oder eine negative Zunahme im Größen- bzw. Anzahlunterschied anzeigen, ein Speicherverlust aber dennoch verborgen bleibt. Das kann auftreten, wenn Anzahl und Größe neu erstellter Objekte kleiner ist als die Anzahl und Größe gelöschter Objekte. Beispielsweise könnte dies durch eine Garbage Collection verursacht werden.

Anzeigen von Momentaufnahmedetails

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

Aus der Zusammenfassungsansicht können Sie Momentaufnahmedetails anzeigen, indem Sie auf einen Link in einer Momentaufnahmen-Zusammenfassung klicken. Beispielsweise werden über den Heapgrößenlink in einer Momentaufnahmen-Zusammenfassung die Momentaufnahmedetails standardmäßig mit geöffneter Ansicht "Dominatoren" angezeigt.

Diese Abbildung zeigt die Typansicht in einem Momentaufnahmedetail.

In der Ansicht "Momentaufnahmedetail" sind die folgenden zusätzlichen Ansichten zu den Speicherauslastungsdaten verfügbar:

• Dominatoren Zeigt eine Liste aller Objekte im Heap, sortiert nach Größe des belegten Speichers, an.

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

• Stammelemente. Zeigt eine Struktur 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.

• DOM Zeigt Objekte, die Elemente von Markup (DOM) sind, und ihre beibehaltene Größe an. Standardmäßig werden diese nach beibehaltener Größe sortiert.

• WinRT Zeigt von Windows verwaltete und nicht verwaltete Objekte, die von der JavaScript-App verwiesen werden, an. By default, these are sorted by retained size.

Die meisten Ansichten, beispielsweise die Ansicht "Dominatoren", zeigen ähnliche Werttypen an. Diese werten schließen Folgende Angaben ein:

• Bezeichner Der Name, der das Objekt am besten identifiziert. Beispielsweise der ID-Attributwert eines HTML-Elements, sofern einer verwendet wird.

• Typ. Typname des Objekts.

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

• Beibehaltene Größe Summe der Objektgröße sowie 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 Die Anzahl von Instanzen des Objekts. Dieser Wert wird nur in der Typansicht angezeigt.

Anzeigen eines Momentaufnahmeunterschieds

Im JavaScript-Arbeitsspeicheranalyzer können Sie in der Ansicht "Momentaufnahmevergleich" eine Momentaufnahme mit einer vorherigen vergleichen.

In der Zusammenfassungsansicht können Sie die differenziellen Momentaufnahmedetails anzeigen, indem Sie in der rechten oberen Ecke einer Kachel der Momentaufnahmen-Zusammenfassung auf eine andere Momentaufnahme in der Dropdownliste klicken.

Mit dem Momentaufnahmevergleich können Sie differenzielle Informationen über Dominatoren, Typen, Stammelemente, DOM-Objekte und Objekte der Windows-Runtime anzeigen.

Der Momentaufnahmevergleich zeigt alle Objekte, die dem Heap in der Zeit zwischen den beiden Momentaufnahmen hinzugefügt wurden. In der Ansicht "Differenzielle Stammelemente" (und im Bezugsdiagramm), gibt eine hellgraue Textfarbe an, dass das Objekt selbst in der vorherigen Momentaufnahme vorhanden war, jetzt aber ein zuvor nicht existentes untergeordnetes Element enthält.

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

In den Ansichten "Momentaufnahmevergleich" werden Ansichten wie die Ansicht "Dominatoren" genauso dargestellt, wie in der Ansicht Anzeigen von Momentaufnahmedetails. Die Ansichten "Momentaufnahmevergleich" zeigen die gleichen Werttypen wie die Ansichten "Momentaufnahmedetails", und zusätzlich folgende Werte, an:

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

• Unterschied der einbehaltenen Größe Der Unterschied zwischen der beibehaltenen Größe des Objekts in der aktuellen Momentaufnahme und seiner beibehaltenen Größe in der Vergleichsmomentaufnahme (die ältere 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.

• Anzahlunterschied Unterschied zwischen der Anzahl von Objektinstanzen in der aktuellen Momentaufnahme und der Anzahl von Instanzen in der Vergleichsmomentaufnahme. This value appears only in the Types view.

Anzeigen in der Stammansicht

In den Ansichten "Dominatoren", "Typen", "DOM" und "WinRT" ist die Beziehung eines bestimmten Objekts zum Global-Objekt ersichtlich. Mit dieser Funktion können Sie ein bekanntes Objekt leicht in der Stammansicht finden, ohne die Objektstruktur Global zu durchsuchen.

Um die Funktion zu verwenden, klicken Sie mit der rechten Maustaste auf einen Bezeichner in der Ansicht "Dominatoren", "Typ", "DOM" oder "WinRT", und klicken Sie auf In Stammansicht anzeigen.

Filtern von Daten

In den Ansichten "Dominatoren", "Typen", "DOM" und "WinRT" können Sie Daten filtern, indem Sie nach bestimmten Bezeichnern suchen. Um nach einem Bezeichner zu suchen, geben Sie den Wert einfach im Textfeld Bezeichnerfilter ein. Wenn Sie mit der Eingabe von Zeichen beginnen, werden Bezeichner ohne die eingegebenen Zeichen ausgefiltert.

Jede Ansicht verfügt über einen eigenen Filter, damit die gefilterten Informationen nicht zu anderen Ansichten übertragen werden.

Anzeigen von Verweisen

Die unteren Bereiche der Ansichten "Dominatoren", "Typen", "DOM" und "WinRT" enthalten ein Bezugsdiagramm, das Sie zum Anzeigen freigegebener Verweise verwenden können. Wenn Sie ein Objekt im oberen Bereich auswählen, zeigt das Bezugsdiagramm eine Liste von Verweisen zum ausgewählten Objekt an.

Wenn Sie bei der Identifizierung entsprechende Objekte allgemeine Hilfe benötigen, können Sie in der Dropdownliste "Einstellung" in der rechten oberen Ecke des oberen Bereichs auf das Element Objekt-IDs anzeigen klicken. Sobald Sie auf diese Option klicken, werden die Objekt-IDs in der Liste Bezeichner neben den Objekten angezeigt. Objekte mit der gleichen ID sind freigegebene Verweise.

Anzeigen integrierter Werte

In den Ansichten "Dominatoren", "Typen", "DOM" und "WinRT" können Sie integrierte Objekte anzeigen. Standardmäßig zeigen diese Ansichten nur die Objekte an, 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. Sie können diese Objekte im JavaScript-Arbeitsspeicheranalyzer anzeigen.

Zum Anzeigen dieser Objekte klicken Sie in der Dropdownliste "Einstellung" in der rechten oberen Ecke des Bereichs auf die Option Integrierte anzeigen.

Diagnosesitzungsdateien

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

JavaScript-Konsolenbefehle

Der JavaScript-Arbeitsspeicheranalyzer unterstützt die folgenden zwei JavaScript-Konsolenbefehle. Damit kann der Codeabschnitt im Code isoliert werden, in dem ein Arbeitsspeicherproblem auftritt. Diese Befehle lösen eine Ausnahme aus, wenn sie der App hinzugefügt werden und die App dann nicht im Arbeitsspeicheranalyzer ausgeführt wird (Obwohl Sie vor deren Verwendung testen können, ob die Befehle vorhanden sind. (Die Befehle sind früh in der Anlaufphase der Sitzung nicht vorhanden.)

• console.takeHeapSnapshot akzeptiert eine im JavaScript-Arbeitsspeicheranalyzer angezeigte Heapmomentaufnahme.

• console.profileMark legt eine Profilmarke fest (das Dreieck der Benutzermarkierung), die in der Zusammenfassungsansicht in der Zeitachse des Arbeitsspeicherdiagramms angezeigt wird. Dieser Befehl akzeptiert ein Zeichenfolgenargument, das eine Beschreibung des Ereignisses darstellt, und als QuickInfo im Arbeitsspeicherdiagramm angezeigt wird. Diese Beschreibung darf 100 Zeichen nicht übersteigen.

Das folgende Codebeispiel zeigt, wie Sie takeHeapSnapshot sicher aufrufen können.

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

Das folgende Codebeispiel zeigt, wie Sie profileMark sicher aufrufen können.

    if (console && console.profileMark) { console.profileMark("Initialized"); }

Tipps zum Identifizieren von Arbeitsspeicherproblemen

Diese Tipps sind möglicherweise zum Bestimmen von Speicherauslastungsproblemen hilfreich:

• Verwenden Sie die Ansicht "Dominatoren" eines Momentaufnahmevergleichs, um wichtige Arbeitsspeicherprobleme nach Möglichkeit schnell zu identifizieren.

• Verwenden Sie die Anzeigen in der Stammansicht, um zu bestimmen, wo ein Objekt in der gesamten Speicherhierarchie verwiesen wird.

• Wenn die Ursache eines Arbeitsspeicherproblems schwer zu erkennen ist, verwenden Sie die verschiedenen Ansichten (z. B. "Dominatoren" und "Typen"), um nach Gemeinsamkeiten, wie verknüpften Objekten und Typen, zu suchen.

• Überlegen Sie, ob eine vorübergehend Codeänderung dabei helfen würde, die Probleme zu finden. Auf diese Weise können Sie z. B. folgende Vorgänge durchführen:

  • Verwenden Sie die JavaScript-Konsolenbefehle für den Arbeitsspeicheranalyzer, console.takeSnapshot und console.profileMark.

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

  • Erstellen Sie ein Testobjekt, das in den Ansichten des JavaScript-Arbeitsspeicheranalyzers (wie die Ansicht "Dominatoren") leicht gefunden werden kann. 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.

• Suchen Sie nach Objekten, die nach Navigation zu einer neuen Seite versehentlich im Arbeitsspeicher beibehalten werden. Das ist eine häufige Ursache von Arbeitsspeicherproblemen. So kann beispielsweise die falsche Verwendung der URL.CreateObjectUrl-Funktion dieses Problem verursachen.

Siehe auch

Aufgaben

Lernprogramm: Suchen eines Speicherverlusts (JavaScript)