前端-工具

轉載自: http://www.cnblogs.com/lidabo/p/3481460.html

本主題帶領您完成使用 JavaScript 內存分析器確定並修復簡單內存問題的過程。在本教程中，我們創建一個生成大量數據的應用程序。我們預期在導航到新頁時該應用程序會釋放數據。

說明
JavaScript 內存分析器可用於 Visual Studio 2012 更新 1 中的 Windows 8。

運行 JavaScript 內存分析器測試應用程序

用 Visual Studio 中，單擊“文件”>“新建”>“項目”。
單擊左窗格中的“JavaScript”，然後單擊中間窗格中的“導航佈局應用程序”。
在“名稱”框中，鍵入諸如 JS_Mem_Tester 等名稱，然後單擊A“確定”。

在“解決方案資源管理器”中，在 pages\home 文件夾中，打開 home.html 並將以下代碼粘貼到 <body> 標記之間：

HTML

    <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>

打開 home.js 並用以下代碼替換所有代碼：

JavaScript

(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 ]; })();

按 F5 啓動調試。驗證出現此頁：
切換回 Visual Studio (Alt+Tab)，並按 Shift+F5 停止調試。

現在我們已驗證了該應用程序沒有問題，可以檢查內存使用量。

分析內存使用量

在“調試” 工具欄上，單擊“啓動調試”下拉列表中的“模擬器”。

也可以單擊該列表中的“本地計算機”或“遠程計算機”。但是，如果您使用模擬器，則可以它放在 Visual Studio 旁邊，以便輕鬆地在運行中的應用程序和 JavaScript 內存分析器之間切換。有關更多信息，請參見從 Visual Studio 運行 Windows 應用商店應用程序和在遠程計算機上運行 Windows 應用商店應用程序。
在“調試” 菜單上，指向“JavaScript 內存分析”，然後單擊“啓動啓動項目”。

在本教程中，我們將內存分析器連接到啓動項目。有關其他選項的信息，如將內存分析器連接到所安裝的應用程序，請參見分析內存使用情況數據 (JavaScript)。

當您啓動內存分析器時，可能會發現用戶帳戶控制正在請求運行 VsEtwCollector.exe 的權限。單擊“是”。
從正在運行的應用程序中，切換到 Visual Studio (Alt+Tab)。

JavaScript 內存分析器在“診斷中心”選項卡上顯示信息。

此摘要視圖中的內存圖顯示一段時間內的進程內存使用量。此視圖還提供諸如“拍攝堆快照”等命令。快照提供特定時刻有關內存使用量的詳細信息。有關更多信息，請參見分析內存使用情況數據 (JavaScript)。
單擊“拍攝堆快照”。
切換到該應用程序並單擊“啓動”按鈕。

當按“啓動”時，home.js 中的代碼生成一個大數組。我們將其用於診斷目的。
切換到 Visual Studio 並再次單擊“拍攝堆快照”。

此圖在摘要視圖的下窗格中顯示兩個快照。
可以比較快照。快照 #2 顯示以下內容：
- 堆大小（藍色文本，左側）顯著提高，到大於 1 MB。
- 堆大小自前一個快照以來的差異（紅色文本，左側）大於 400 KB。
- 堆上的對象數（藍色文本，右側）增加了數百（到超過 3,900）。
- 堆上的對象數自前一個快照以來的差異（紅色文本，右側）大於 300 個對象。
在快照 #2 中，單擊位於左側的紅色文本，顯示一個諸如 +404 KB 等的差值。

這會打開一個名爲“快照 #2 - 快照 #1”的差異視圖，默認顯示支配者視圖。下圖顯示了該視圖。

在該視圖中，您會看到保留內存的對象的列表（從保留大多數內存的對象開始）。默認情況下，JavaScript 內存分析器篩選出 Windows 運行時和 Windows JavaScript 庫創建的內置對象。這有助於將信息集中於應用程序相關的代碼。

可以看到 data 對象具有超過 400 KB 的保留的大小差異值。

提示

當一個預期對象或標識符難以找到時，在某些視圖中可以在“名稱篩選器”框中鍵入標識符名稱以查找並選擇特定標識符。
在標識符列表中，右擊 data 標識符，然後單擊“顯示在根視圖中”。

選定的值顯示在“快照 #2 - 快照 #1”差異視圖的根視圖中。根視圖顯示您檢查的對象相對於 Global 對象的引用位置。這可能有助於確定內存問題出現的位置。這是此時根視圖的一部分。（位於樹頂部的 Global 對象不可見。）

在根視圖中，我們可以看到 data 變量被主頁的 ready 函數調用的匿名函數引用，而且其根爲包含 winControl對象的 DIV 元素。根據我們對該應用程序的瞭解，我們知道此控件對象引用應用程序的“啓動”按鈕。
切換到該應用程序並單擊“導航”按鈕。

“導航”按鈕導航到新頁。（爲使該應用程序簡單起見，我們重新加載主頁。）
切換到 Visual Studio 並單擊“拍攝堆快照”。

在快照 #3 中，可以看到堆的大小以及堆上的對象數沒比前一個快照變化太多。下面是快照類的類似外觀：

對於本教程，我們預期在您按“啓動”後該應用程序生成的數據（數組）在您按“導航”轉到新頁時被釋放（或在此情況下，重新加載）。但是，該數據未被釋放，因此，我們將修復這個問題。
單擊摘要視圖中的“停止”按鈕。

提示
當一個預期對象或標識符難以找到時，在某些視圖中可以在“名稱篩選器”框中鍵入標識符名稱以查找並選擇特定標識符。

修復內存問題

在 home.js 中，移除“導航”按鈕的事件處理代碼：

JavaScript

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

用此代碼替換它：

JavaScript

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

在“調試” 菜單上，指向“JavaScript 內存分析”，然後單擊“啓動啓動項目”。
按照上節所述的相同過程執行操作以拍攝三個快照。步驟摘要如下：
1. 切換到 Visual Studio 並單擊“拍攝堆快照”。
2. 在該應用程序中，單擊“啓動”按鈕。
3. 切換到 Visual Studio 並單擊“拍攝堆快照”。
4. 在該應用程序中，單擊“導航”按鈕。
5. 切換到 Visual Studio 並單擊“拍攝堆快照”。
在快照 #3 中可以看到，堆大小類似於您按“啓動”並生成數據之前的堆大小。以下是快照：
在快照 #3 中，單擊在左側顯示堆大小的藍色文本。

這將打開快照 #3 的支配者視圖。這是快照 #3 的詳細信息視圖，而不是差異視圖。
在“名稱篩選器”框中鍵入 data。

此時，data 變量不存在於堆中。因此內存問題已解決！
from:http://msdn.microsoft.com/zh-cn/library/windows/apps/jj819178.aspx