本主题带领您完成使用 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. BZOJ 2196: [Usaco2011 Mar]Brownie Slicing( 二分答案 )

    二分答案就可以了.... ----------------------------------------------------------------------- #include<cst ...

  2. Android发送数据到web服务器4种方式

    1./** 2. * Android中向web服务器提交数据的两种方式四种方法 3. */ 4.public class SubmitDataByHttpClientAndOrdinaryWay { ...

  3. Laravel 5.1 ACL权限控制 三 之权限准备及实现权限管理

    请自动参照到上上篇文章 1.创建控制器 php artisan make:model Permission php artisan make:model Role 2.创建表 php artisan ...

  4. sqm(sqlmapGUI) pcat修改版

    sqlmap是一款开源的注入工具,支持几乎所有的数据库,支持get/post/cookie注入,支持错误回显注入/盲注,还有其他多种注入方法. 支持代理,指纹识别技术判断数据库 .而sqm(sqlma ...

  5. 开启Linux VNC远程桌面

    Xwindows:gnome (红帽默认安装的图形界面)   一, 确认及安装VNCSERVER. 1,首先确认你服务器是否配置了VNCSERVER,可以在命令行下敲入以下命令查看: [root@lo ...

  6. idea 使用问题总结

    tomcat     edit configurations配置问题:         在deployment选项卡内增加artifact到server,在Application context选择应 ...

  7. sharepoint 2013 附件控件FileUpload怎样检验是否为图片的方法

    记录一下关于附件控件FileUpload怎样检验是否为图片的方法: function checkImg() { var fileObj =document.getElementById('<%= ...

  8. 在Xcode中使用C++与Objective-C混编

    有时候,出于性能或可移植性的考虑,需要在iOS项目中使用到C++. 假设我们用C++写了下面的People类: // //  People.h //  MixedWithCppDemo // //   ...

  9. C程序设计语言之一

    %d 按照十进制整形数打印: %o 按照八进制整形数打印: %x 按照十六进制整形数打印: %c 表示字符 %s 表示字符串 %% 表示%本身打印: %ld long型输出 ”幻数“: #define ...

  10. js 验证手机号 以及身份证正则表达式

    手机号:① /^1(3[0-9]{9}|5[0-35-9][0-9]{8}|7[07][0-9]{8}|8[25-9][0-9]{8})$/ ② /^1(3\d|5[0-35-9]|7[07]|8[2 ...