本主题带领您完成使用 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> 标记之间：

        <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 并用以下代码替换所有代码：

    (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 中，移除“导航”按钮的事件处理代码：

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

    用此代码替换它：

        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

教程：查找内存泄漏 (JavaScript)的更多相关文章

  1. 利用Java剖析工具JProfiler查找内存泄漏的方法

    本文主要介绍如何如何利用在使用JProfiler时意识到内存泄漏以及查找内存泄漏的几种方法. 工具/原料   JProfiler 方法/步骤   JProfiler的内存视图会话提供了内存使用情况的动 ...

  2. java命令--jmap命令使用（查找内存泄漏对象）

    转自:https://www.cnblogs.com/kongzhongqijing/articles/3621163.html jdk安装后会自带一些小工具,jmap命令(Java Memory M ...

  3. 【转】使用UMDH查找内存泄漏

    转载出处:http://blog.csdn.net/phiger/article/details/1932141 Umdh 是 Debugging Tools for Windows 里面的一个工具, ...

  4. Linux 下用 valgrind 查找内存泄漏小例子

    1.安装 valgrind yum install valgrind 2.测试用例 main.cpp #include <iostream> using namespace std; st ...

  5. 用CRT查找内存泄漏

    引用原文地址 : https://msdn.microsoft.com/en-us/library/x98tx3cf.aspx 1. 在program中严格按下面顺序include #define _ ...

  6. Windows下使用Gflags和UMDH查找内存泄漏

    GFlags和UMDH与WinDbg一样,都是Debugging Tools for Windows里的工具. 1.设置符号路径 去微软官网下载对应的操作系统的符号安装文件,并安装到某个目录,如C:\ ...

  7. Xcode查找内存泄漏

  8. Memlab，一款分析 JavaScript 堆并查找浏览器和 Node.js 中内存泄漏的开源框架

    Memlab 是一款 E2E 测试和分析框架,用于发现 JavaScript 内存泄漏和优化机会. Memlab 是 JavaScript 的内存测试框架.它支持定义一个测试场景(使用 Puppete ...

  9. 了解 JavaScript 应用程序中的内存泄漏

    简介 当处理 JavaScript 这样的脚本语言时,很容易忘记每个对象.类.字符串.数字和方法都需要分配和保留内存.语言和运行时的垃圾回收器隐藏了内存分配和释放的具体细节. 许多功能无需考虑内存管理 ...

随机推荐

  1. 「OC」@property @synthesize和id

    一.@property @synthesize关键字 这两个关键字是编译器特性,让Xcode可以自动生成getter和setter. (一)@property 关键字 @property 关键字可以自 ...

  2. SpringBoot接口服务处理Whitelabel Error Page(转)

    To switch it off you can set server.error.whitelabel.enabled=false http://stackoverflow.com/question ...

  3. 字符串操作函数<string.h>相关函数strcpy,strcat,等源码。

    首先说一下源码到底在哪里找. 我们在文件中包含<cstring>时,如果点击右键打开文档, 会打开cstring,我们会发现路径为: D:\Program Files\visual stu ...

  4. [Oracle] 11G自己主动收集统计信息

    在11g中,默认自己主动收集统计信息的时间为晚上10点(周一到周五,4个小时),早上6点(周六,周日,20个小时),例如以下所看到的: select a.window_name, a.repeat_i ...

  5. 详细解析BluetoothAdapter的详细api

    (1)开关状态值 (2)扫描状态值 (3)蓝牙操作接收的广播 (4)蓝牙操作请求的广播 (5)附加域 (6)错误码 (1)获取蓝牙适配器 (2)获取state状态方法 (3)蓝牙是否可用 (4)打开蓝 ...

  6. javascript 学习随笔6

    改变html内容 document.getElementById("p1").innerHTML="New text!"; var element=docume ...

  7. 设置TextView的密码效果以及跑马灯效果

    密码效果以及跑马灯效果: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  8. 用Flask实现视频数据流传输

    Flask 是一个 Python 实现的 Web 开发微框架.这篇文章是一个讲述如何用它实现传送视频数据流的详细教程. 我敢肯定,现在你已经知道我在O’Reilly Media上发布了有关Flask的 ...

  9. 2014 HDU多校弟五场A题 【归并排序求逆序对】

    这题是2Y,第一次WA贡献给了没有long long 的答案QAQ 题意不难理解,解题方法不难. 先用归并排序求出原串中逆序对的个数然后拿来减去k即可,如果答案小于0,则取0 学习了归并排序求逆序对的 ...

  10. Ubuntu上搭建DokuWiki

    1.准备工作 1) 安装Apache sudo apt-get install apache2 2)在浏览器中输入http://localhost 如果现实It works则说明Apache安装成功, ...