教程：查找内存泄漏 (JavaScript)

本主题带领您完成使用 JavaScript 内存分析器确定并修复简单内存问题的过程。在本教程中，我们创建一个生成大量数据的应用程序。我们预期在导航到新页时该应用程序会释放数据。

 说明

JavaScript 内存分析器可用于 Visual Studio 2012 更新 1 中的 Windows 8。

运行 JavaScript 内存分析器测试应用程序

1. 用 Visual Studio 中，单击“文件”>“新建”>“项目”。

2. 单击左窗格中的“JavaScript”，然后单击中间窗格中的“导航布局应用程序”。

3. 在“名称”框中，键入诸如 JS_Mem_Tester 等名称，然后单击A“确定”。

4. 在“解决方案资源管理器”中，在 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>
   

5. 打开 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 ]; })();
   

6. 按 F5 启动调试。验证出现此页：

   

7. 切换回 Visual Studio (Alt+Tab)，并按 Shift+F5 停止调试。

   现在我们已验证了该应用程序没有问题，可以检查内存使用量。

分析内存使用量

1. 在“调试” 工具栏上，单击“启动调试”下拉列表中的“模拟器”。

   也可以单击该列表中的“本地计算机”或“远程计算机”。但是，如果您使用模拟器，则可以它放在 Visual Studio 旁边，以便轻松地在运行中的应用程序和 JavaScript 内存分析器之间切换。有关更多信息，请参见从 Visual Studio 运行 Windows 应用商店应用程序和在远程计算机上运行 Windows 应用商店应用程序。

2. 在“调试” 菜单上，指向“JavaScript 内存分析”，然后单击“启动启动项目”。

   在本教程中，我们将内存分析器连接到启动项目。有关其他选项的信息，如将内存分析器连接到所安装的应用程序，请参见分析内存使用情况数据 (JavaScript)。

   当您启动内存分析器时，可能会发现用户帐户控制正在请求运行 VsEtwCollector.exe 的权限。单击“是”。

3. 从正在运行的应用程序中，切换到 Visual Studio (Alt+Tab)。

   JavaScript 内存分析器在“诊断中心”选项卡上显示信息。

   此摘要视图中的内存图显示一段时间内的进程内存使用量。此视图还提供诸如“拍摄堆快照”等命令。快照提供特定时刻有关内存使用量的详细信息。有关更多信息，请参见分析内存使用情况数据 (JavaScript)。

4. 单击“拍摄堆快照”。

5. 切换到该应用程序并单击“启动”按钮。

   当按“启动”时，home.js 中的代码生成一个大数组。我们将其用于诊断目的。

6. 切换到 Visual Studio 并再次单击“拍摄堆快照”。

   此图在摘要视图的下窗格中显示两个快照。

   

7. 可以比较快照。快照 #2 显示以下内容：

   • 堆大小（蓝色文本，左侧）显著提高，到大于 1 MB。

   • 堆大小自前一个快照以来的差异（红色文本，左侧）大于 400 KB。

   • 堆上的对象数（蓝色文本，右侧）增加了数百（到超过 3,900）。

   • 堆上的对象数自前一个快照以来的差异（红色文本，右侧）大于 300 个对象。

8. 在快照 #2 中，单击位于左侧的红色文本，显示一个诸如 +404 KB 等的差值。

   这会打开一个名为“快照 #2 - 快照 #1”的差异视图，默认显示支配者视图。下图显示了该视图。

   

   在该视图中，您会看到保留内存的对象的列表（从保留大多数内存的对象开始）。默认情况下，JavaScript 内存分析器筛选出 Windows 运行时和 Windows JavaScript 库创建的内置对象。这有助于将信息集中于应用程序相关的代码。

   可以看到 data 对象具有超过 400 KB 的保留的大小差异值。

    提示

   当一个预期对象或标识符难以找到时，在某些视图中可以在“名称筛选器”框中键入标识符名称以查找并选择特定标识符。

9. 在标识符列表中，右击 data 标识符，然后单击“显示在根视图中”。

   选定的值显示在“快照 #2 - 快照 #1”差异视图的根视图中。根视图显示您检查的对象相对于 Global 对象的引用位置。这可能有助于确定内存问题出现的位置。这是此时根视图的一部分。（位于树顶部的 Global 对象不可见。）

   

   在根视图中，我们可以看到 data 变量被主页的 ready 函数调用的匿名函数引用，而且其根为包含 winControl对象的 DIV 元素。根据我们对该应用程序的了解，我们知道此控件对象引用应用程序的“启动”按钮。

10. 切换到该应用程序并单击“导航”按钮。

    “导航”按钮导航到新页。（为使该应用程序简单起见，我们重新加载主页。）

11. 切换到 Visual Studio 并单击“拍摄堆快照”。

    在快照 #3 中，可以看到堆的大小以及堆上的对象数没比前一个快照变化太多。下面是快照类的类似外观：

    

    对于本教程，我们预期在您按“启动”后该应用程序生成的数据（数组）在您按“导航”转到新页时被释放（或在此情况下，重新加载）。但是，该数据未被释放，因此，我们将修复这个问题。

12. 单击摘要视图中的“停止”按钮。

修复内存问题

1. 在 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'); }
   

2. 在“调试” 菜单上，指向“JavaScript 内存分析”，然后单击“启动启动项目”。

3. 按照上节所述的相同过程执行操作以拍摄三个快照。步骤摘要如下：

   1. 切换到 Visual Studio 并单击“拍摄堆快照”。

   2. 在该应用程序中，单击“启动”按钮。

   3. 切换到 Visual Studio 并单击“拍摄堆快照”。

   4. 在该应用程序中，单击“导航”按钮。

   5. 切换到 Visual Studio 并单击“拍摄堆快照”。

   在快照 #3 中可以看到，堆大小类似于您按“启动”并生成数据之前的堆大小。以下是快照：

   

4. 在快照 #3 中，单击在左侧显示堆大小的蓝色文本。

   这将打开快照 #3 的支配者视图。这是快照 #3 的详细信息视图，而不是差异视图。

5. 在“名称筛选器”框中键入 data。

   此时，data 变量不存在于堆中。因此内存问题已解决！

   from:http://msdn.microsoft.com/zh-cn/library/windows/apps/jj819178.aspx