Visual Studio 2012中针对Windows Store应用程序的JavaScript内存分析

[原文发表地址]  JavaScript memory analysis for Windows Store apps in Visual Studio 2012

[原文发表时间] 2013-01-28 10:00 AM

在Visual Studio 2012 Update 1中，我们为 Windows Store应用程序引入了一个JavaScript memory analysis（内存分析）工具来帮助开发人员构建不会泄漏内存的应用程序，以此使这些应用程序更可靠，反应更积极，因此客户有可能给予更高的评分。你会发现内存分析工具适用于面向Windows 8 的Visual Studio — — Express版、 Visual Studio 2012 Professional、Premium和Ultimate。

我们的目标是为您提供一种方式来在状态JavaScript 应用程序中识别无意下保留的内存，以便您可以更多地：

1. 在任意给定的时间和随着时间的推移而轻松地了解内存使用率
2. 快速识别一个对象的值，以及是什么让它处于活跃状态的

对项目或以前安装的 Windows Store应用程序的分析

启动该工具时，有三个选项：

1. “Launch startup project "： 这将开始分析当前Visual Studio 实例中的启动项目。
2. “Launch installed App Package…： 这将提示安装的应用程序来分析， Windows Store应用程序将被启动， Visual Studio 将开始诊断。
3. “Attach to running app…”： 这将提示附加到正在运行的应用程序， Visual Studio 将开始诊断。

注： 这所有三个选项都需要一个Windows 开发人员许可证。

它还有可能本地部署 Windows Store应用程序，或部署到一个仿真器或到远程机器/设备上，以相同的方式，它也可用于调试。目前， JavaScript memory analysis的远程目标仅支持通过启动项目来打开该工具。

使用一个直观和简单的用户界面

JavaScript 内存分析是复杂的，原因有几个 ；首先，一切都是一个对象，导致堆中在任意给定时间里存在大量的对象。第二，主机动态地注入其自身无数的对象，如 DOM 和 JavaScript 内置，这使缩小范围到只导致问题的对象变得困难。最后，JavaScript 中的对象不一定拥有容易被人识别的规范名称。

鉴于这种复杂性，我们将我们的目标设为通过提供对最重要的数据的可视化指示来确定内存使用问题，这样尽可能多地简化过程。

当您启动 JavaScript memory工具时，如上图所示，您将看到一个进程内存图表，使您可以随着时间的推移观察整体私人工作集 （应用程序所使用的内存量）。图表为您提示应用程序的内存趋势，使您可以判断什么时候适合截一张堆快照，以供后来比较。可能有这样的情况，大型 DOM 元素的意外租用或 WinRT 对象保留在您的应用程序中，私人工作集将捕获此（DOM 元素, WinRT 对象都可以在 JavaScript 堆之外分配本机内存）。

检查 JavaScript 内存通常采取的第一个操作是"拍摄快照"，这可以通过菜单项或内存工具中的大按钮做到，如上图所示。这将生成一个摘要磁贴，指示了在拍摄快照的此刻JavaScript 堆的大小，以及分配的对象的数目和一张该应用程序的屏幕快照。

同时运行您的应用程序方案，你需要分析和转换到应用程序中不同的点，您可以继续在任何时间拍摄快照。快照会生成额外的磁贴，每一个都会与前一个快照进行比较，指示其中JavaScript内存的差别。

磁贴的目标是以易读的方式提供对立即可操作信息的总结。我们对于我们想要在磁贴上显示的信息选择得非常谨慎，因为我们想在让它易于使用和信息强大易于分析之间保持平衡。我们希望能够得到您有关此摘要视图的有用性的反馈。

点击摘要磁贴中的任意值，这将打开快照数据和比较的详细信息。在磁贴顶部还有一个下拉的菜单，允许你与任何其他快照进行比较，但与上一张快照进行比较是最常见的情况。

干净的详细信息视图

在JavaScript 堆中有很多的数据，所以此数据是提前过滤的（我们发现在不进行排序或筛选的情况下，数据犹如排山倒海之势）。我们决定通过筛选 JavaScript 内置和对象 id（对象的唯一标识符）来减少数据量，在默认情况下。如果有多个需要加以区分的匿名对象时，对象 ID 是有用的。该视图重点显示了JavaScript 框架所分配的和你可能会使用的任何内存的对象。

你可以下拉详细信息视图的右上角来在详细信息表中显示内置和对象 Id。

在应用程序执行期间，在具体点检查内存

能够在特定时间点拍摄快照有时是重要的，如在DOM的重大突变前，这可能很难通过工具中的按钮做到，特别是如果工具正在使用，且进行了更改，然后再次运行同样的情形。为了缓解这些问题，您可以以编程方式采取快照。

• console.takeHeapSnapshot
• console.profileMark

共享内存分析会话

与团队协作，或让有更多经验的人看一看分析数据通常是很有帮助的。当你停止一个诊断会话 （在内存分析中，在浏览了一个场景，截取了至少一张快照之后） 时，收集快照被保存到磁盘中。

一个诊断会话文件夹出现在Visual Studio打开的解决方案中 （或如果没有打开的解决方案的话，会在其他杂项文件中)，它包含".diagsession"文件。

.diagsession 文件可以被重命名和共享，并稍后以与Visual Studio相兼容的版本重新打开。打开文件时，您可以查看快照磁贴和检查详细信息视图。

总结

Visual Studio 中针对Windows Store应用程序的 JavaScript memory analyzer工具使您可以轻松地识别一个基于 JavaScript 的 Windows Store应用程序使用了多少内存。尤其是，它支持快速识别是什么让对象处于活跃状态的，这样可以解决内存问题。它提供了一个简单的 UI，干净的详细信息视图用于调查和查看JavaScript 内存分配的快速检测。

我们希望你们会发现这是一个非常有价值的工具 ！请向我们提供您的反馈 ！

谢谢

JavaScript 语言模具团队