Lernprogramm: Suchen eines Speicherverlusts (JavaScript)

Artikel
02/23/2013

Dieses Thema führt Sie durch den Prozess zum Identifizieren und Beheben eines einfachen Arbeitsspeicherproblems mithilfe des JavaScript-Arbeitsspeicheranalyzers. In diesem Lernprogramm erstellen Sie eine App zum Generieren eines großen Datenarrays. Die App sollte die Daten löschen, wenn zu einer neuen Seite navigiert wird.

Hinweis

Der JavaScript-Arbeitsspeicheranalyzer ist für Windows 8 in Visual Studio 2012 Update 1 verfügbar.

Ausführen der Test-App zum JavaScript-Arbeitsspeicheranalyzer

Klicken Sie in Visual Studio auf Datei > Neu > Projekt.
Klicken Sie im linken Bereich auf JavaScript, und klicken Sie dann im mittleren Bereich auf Navigations-App.
Geben Sie im Feld Name einen Namen wie JS_Mem Tester ein, und klicken Sie dann auf OK.

Öffnen Sie im Projektmappen-Explorer im Ordner "pages\home" die Datei "home.html", und fügen Sie diesen Code zwischen den <body>-Tags ein:

    <div class="fragment homepage"> <header aria-label="Header content" role="banner"> <button class="win-backbutton" aria-label="Back" disabled type="button"></button> <h1 class="titlearea win-type-ellipsis"> <span class="pagetitle">Welcome to JSMemTester!</span> </h1> </header> <section aria-label="Main content" role="main"> <p>Start generating data...</p> <button class="startButton" title="start" >Start</button> <p class="statusMsg1">""</p> <p>Navigate to page... (reload)</p> <button class="navButton" title="navigate" >Navigate</button> </section> </div>

Öffnen Sie "home.js", und ersetzen Sie den gesamten Code mit dem folgenden Code:

(function () { "use strict"; var data; WinJS.UI.Pages.define("/pages/home/home.html", { // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { // TODO: Initialize the page here. var firstElem = document.querySelector('.startButton'); firstElem.addEventListener('click', sButtonClicked.bind(this)); var secondElem = document.querySelector('.navButton'); secondElem.addEventListener('click', nButtonClicked.bind(this)); }, generateData: function () { data = {}; var x = 0; var newData = "1"; for (var i = 0; i < 300; i++) { data[i] = "data" + newData; newData = newData + (100 * set[x]).toString(); if (i == 100) { x = 1; } if (i == 200) { x = 2; } } } }); function sButtonClicked(args) { this.generateData(); var elem = document.querySelector('.statusMsg1'); elem.textContent = "Done generating data (string array)."; } function nButtonClicked(args) { WinJS.Navigation.navigate('/pages/home/home.html'); } // Adding arbitrary values to sample data. var mod1 = 10; var mod2 = 100; var mod3 = 1000; var set = [mod1, mod2, mod3 ]; })();

Drücken Sie die Taste F5, um mit dem Debuggen zu beginnen. Stellen Sie sicher, dass diese Seite angezeigt wird:
Wechseln Sie zu Visual Studio zurück (ALT+TAB), und drücken Sie die Tastenkombination UMSCHALT+F5, um das Debugging zu beenden.

Nachdem die Funktionsweise der App sichergestellt wurde, können Sie die Speicherauslastung überprüfen.

Analysieren der Speicherauslastung

Klicken Sie auf der Symbolleiste Debuggen in der Dropdownliste "Debuggen starten" auf den Eintrag Simulator.

Sie können in dieser Liste auch auf Lokaler Computer oder Remotecomputer klicken. Wenn Sie aber den Simulator verwenden, können Sie diesen neben Visual Studio platzieren und leicht zwischen der ausgeführten App und dem JavaScript-Arbeitsspeicheranalyzer wechseln. Weitere Informationen finden Sie unter Ausführen von Windows Sore-Apps aus Visual Studio und Ausführen von Windows Store-Apps auf einem Remotecomputer.
Zeigen Sie im Menü Debuggen auf den Eintrag JavaScript-Speicheranalyse, und klicken Sie dann auf Startprojekt starten.

In diesem Lernprogramm fügen Sie den Arbeitsspeicheranalyzer an das Startprojekt an. Informationen zu anderen Optionen, wie das Anfügen des Arbeitsspeicheranalyzers an eine installierte App, finden Sie unter Analysieren von Speicherauslastungsdaten (JavaScript).

When you start the memory analyzer, you might see a User Account Control requesting your permission to run VsEtwCollector.exe. Click Yes.
Wechseln Sie aus der ausgeführten App zu Visual Studio (ALT+TAB).

Der JavaScript-Arbeitsspeicheranalyzer zeigt Informationen auf der Registerkarte Diagnosehub an.

Das Arbeitsspeicherdiagramm in dieser Zusammenfassungsansicht veranschaulicht die Prozessspeicherauslastung im Zeitverlauf. Die Ansicht bietet auch Befehle wie Heap-Momentaufnahme erstellen. Eine Momentaufnahme stellt ausführliche Informationen zur Speicherauslastung zu einem bestimmten Zeitpunkt bereit. Weitere Informationen finden Sie unter Analysieren von Speicherauslastungsdaten (JavaScript).
Klicken Sie auf Momentaufnahme erstellen.
Wechseln Sie zur App, und klicken Sie auf die Schaltfläche Starten.

Der Code in der Datei "home.js" generiert, sobald Sie auf Starten drücken, ein großes Array. Dies wird zu Diagnosezwecken verwendet.
Wechseln Sie zu Visual Studio, und klicken Sie erneut auf Heap-Momentaufnahme erstellen.

Diese Abbildung zeigt die zwei Momentaufnahmen im unteren Bereich der Zusammenfassungsansicht.
Sie können die Momentaufnahmen vergleichen. Momentaufnahme 2 zeigt Folgendes:
- Die Heapgröße (blauer Text, linke Seite) hat sich deutlich auf mehr als 1 MB erhöht.
- Der Unterschied in Heapgröße seit der vorherigen Momentaufnahme (roter Text, linke Seite) beträgt mehr als 400 KB.
- Die Anzahl von Objekten auf dem Heap (blauer Text, rechte Seite) hat sich um mehrere Hundert (auf mehr als 3.900) erhöht.
- Der Unterschied bei der Anzahl von Objekten auf dem Heap (roter Text, rechte Seite) zur vorherigen Momentaufnahme beträgt mehr als 300 Objekte.
Klicken Sie in Momentaufnahme 2 auf den roten Text links, der einen differenziellen Wert zeigt, beispielsweise +404 KB.

Hierdurch wird die differenzielle Ansicht Momentaufnahme 2 – Momentaufnahme 1 aufgerufen, bei der die Ansicht "Dominatoren" standardmäßig anzeigt wird. Die folgende Abbildung veranschaulicht diese Ansicht.

In dieser Ansicht werden die Objekte, die Arbeitsspeicher einbehalten, aufgelistet. Die Liste beginnt mit den Objekten, die am meisten Arbeitsspeicher einbehalten. Standardmäßig filtert der JavaScript-Arbeitsspeicheranalyzer die von der Windows-Runtime und der Windows-Bibliothek für JavaScript erstellten, integrierten Objekte aus. Dadurch ist es möglich, die Informationen auf Code zu konzentrieren, der sich auf Apps bezieht.

Wie sie sehen können verfügt das data-Objekt über einen Unterschied in der Belegungsgröße-Wert von über 400 KB.

Tipp

Wenn ein gewünschtes Objekt oder gewünschter Bezeichner schwer zu ermitteln ist, können Sie in einigen Ansichten den Bezeichnernamen in das Feld Namensfilter eingeben, um den bestimmten Bezeichner zu suchen und auszuwählen.
Klicken Sie in der Bezeichner-Liste mit der rechten Maustaste auf den data-Bezeichner, und klicken Sie dann auf In Stammansicht anzeigen.

Der ausgewählte Wert wird in der Stammansicht der differenziellen Ansicht Momentaufnahme 2 – Momentaufnahme 1 angezeigt. Die Stammansicht zeigt, wohin das von Ihnen überprüfte Objekt in Bezug auf das Global-Objekt verwiesen wird. Das kann hilfreich sein, um die Stelle eines auftretenden Arbeitsspeicherproblems zu bestimmen. Dies ist eine Abbildung eines Teils der Stammansicht zu diesem Zeitpunkt. (Das Global-Objekt an der Strukturspitze ist nicht sichtbar).

In der Ansicht der Stammelemente ist zu erkennen, dass die data-Variable von einer anonymen Funktion verwiesen wird, die von der ready-Funktion der Homepage aufgerufen wird, und dass diese einem DIV-Element mit einem winControl-Objekt entstammt. Aufgrund Ihrer Kenntnisse der App, wissen Sie, dass dieses Steuerelementobjekt auf die Appschaltfläche Starten verweist.
Wechseln Sie zur App, und klicken Sie auf die Schaltfläche Navigieren.

Die Schaltfläche Navigieren führt auf eine neue Seite. (Damit diese App einfach bleibt, laden Sie einfach die Homepage neu.)
Wechseln Sie zu Visual Studio, und klicken Sie auf Heap-Momentaufnahme erstellen.

In Momentaufnahme 3 ist ersichtlich, dass sich die Heapgröße und die Anzahl von Objekten auf dem Heap seit der vorherigen Momentaufnahme nicht stark verändert haben. So sehen diese Momentaufnahmen aus:

In diesem Lernprogramm sollen die nach drücken von Starten von der App generierten Daten (das Array) verworfen werden, sobald Sie zum Wechseln auf eine neue Seite (oder, in diesem Fall, zum erneuten Laden der Seite) auf Navigieren drücken. Die Daten werden allerdings nicht verworfen, daher wird dieses Problem noch behoben.
Klicken Sie in der Zusammenfassungsansicht auf die Schaltfläche Beenden.

Korrigieren eines Arbeitsspeicherproblems

Entfernen Sie in "home.js" den Ereignisbehandlungscode für die Schaltfläche Navigieren:

    function nButtonClicked(args) { WinJS.Navigation.navigate('/pages/home/home.html'); }

Ersetzen Sie diese mit diesem Code:

    function nButtonClicked(args) { data = null; WinJS.Navigation.navigate('/pages/home/home.html'); }

Zeigen Sie im Menü Debuggen auf den Eintrag JavaScript-Speicheranalyse, und klicken Sie dann auf Startprojekt starten.
Folgen Sie zum Aufnehmen von drei Momentaufnahmen der gleichen Prozedur wie im vorherigen Abschnitt beschrieben. Die erforderlichen Schritte werden hier zusammengefasst:
1. Switch to Visual Studio and click Take Heap Snapshot.
2. Klicken Sie in der App auf die Schaltfläche Starten.
3. Switch to Visual Studio and click Take Heap Snapshot.
4. Klicken Sie in der App auf die Schaltfläche Navigieren.
5. Switch to Visual Studio and click Take Heap Snapshot.
In Momentaufnahme 3 ist zu erkennen, dass die Heapgröße der Größe des Heaps vor Drücken der Schaltfläche Starten und damit verbundenen GEnerieren von Daten ähnelt. Im Folgenden sehen Sie die Momentaufnahmen:
Klicken Sie in Momentaufnahme 3 auf den blauen Text, der die Heapgröße auf der linken Seite anzeigt.

Hierdurch wird die Ansicht "Dominatoren" für Momentaufnahme 3 geöffnet. Dies ist eine Detailansicht der Momentaufnahme 3; keine differenzielle Ansicht.
Geben Sie im Feld Namensfilter die Zeichenfolge data ein.

Diesmal ist keine data-Variable im Heap vorhanden. Damit ist das Arbeitsspeicherproblem behoben!

Siehe auch

Konzepte

Analysieren der Speicherauslastung in Windows Store-Apps (JavaScript)

Analysieren von Speicherauslastungsdaten (JavaScript)

Freigeben über