本主题带领您完成使用 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. C#中的虚方法和抽象方法（Thirteenth Day）

    今天在云和学院学了很多,我这次只能先总结一下C#中的虚方法和抽象的运用. 理论: 虚方法: •用virtual修饰的方法叫做虚方法 •虚方法可以在子类中通过override关键字来重写 •常见的虚方法 ...

  2. 关于Repeater中使用DorpWownList的问题

    关于Repeater中使用DorpWownList的问题 前台: <asp:Repeater ID="Repeater1" runat="server" ...

  3. C/C++ 笔试、面试题目大汇总（转）

    这些东西有点烦,有点无聊.如果要去C++面试就看看吧.几年前网上搜索的.刚才看到,就整理一下,里面有些被我改了,感觉之前说的不对或不完善. 转自fangyukuan,地址http://www.cnbl ...

  4. Oracle Split 函数

    为了让 PL/SQL 函数返回数据的多个行,必须通过返回一个 REF CURSOR 或一个数据集合来完成.REF CURSOR 的这种情况局限于可以从查询中选择的数据,而整个集合在可以返回前,必须进行 ...

  5. ASP.NET 定时通知

    ASP.NET 定时通知 using System; using System.Collections.Generic; using System.Linq; using System.Web; us ...

  6. iOS开发之SDWebImage详解

    介绍 github地址: https://github.com/rs/SDWebImage 简介 一个异步图片下载及缓存的库 特性: 一个扩展UIImageView分类的库,支持加载网络图片并缓存图片 ...

  7. Ruby学习： 类变量和类方法

    一.类变量 在ruby中,可以为类定义类变量,类变量的值为类的所有实例(对象)所共享. 有点类似其它语言(如java)中的静态变量,但与java中的静态变量的区别是, 类变量是私有的,无法在类的外部访 ...

  8. Windows failed to start.界面下修复win8引导

    首先要保证 系统本身是没有问题的 不是在装机的时候出现这种情况 那么可以按照以下方法来进行 首先要在另外一台电脑上将win8刻进u盘 启动时以u盘为第一启动项启动 进入win8装机界面 点击左下角的修 ...

  9. 【OpenMesh】使用网格的属性和特征

    例子主要展示如何改变位置,法向量,颜色和纹理的数据类型. 在之前的指南中我们学习使用标准属性,通过调用适合的请求方法.不像自定义属性,用户通过传递数据类型到句柄来指定数据类型(比如,MyMesh::F ...

  10. Android：WebView(慕课网)

    使用webview最重要的三点: 1 WebView加载本地资源(webView.loadUrl("file:///android_asset/example.html");) 2 ...