简介
当处理 JavaScript 这样的脚本语言时，很容易忘记每个对象、类、字符串、数字和方法都需要分配和保留内存。语言和运行时的垃圾回收器隐藏了内存分配和释放的具体细节。
许多功能无需考虑内存管理即可实现，但却忽略了它可能在程序中带来重大的问题。不当清理的对象可能会存在比预期要长得多的时间。这些对象继续响应事件和消耗资源。它们可强制浏览器从一个虚拟磁盘驱动器分配内存页，这显著影响了计算机的速度（在极端的情形中，会导致浏览器崩溃）。
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。在最近几年中，许多浏览器都改善了在页面加载过程中从 JavaScript 回收内存的能力。但是，并不是所有浏览器都具有相同的运行方式。Firefox 和旧版的 Internet Explorer 都存在过内存泄漏，而且内存泄露一直持续到浏览器关闭。
过去导致内存泄漏的许多经典模式在现代浏览器中以不再导致泄漏内存。但是，如今有一种不同的趋势影响着内存泄漏。许多人正设计用于在没有硬页面刷新的单页中运行的 Web 应用程序。在那样的单页中，从应用程序的一个状态到另一个状态时，很容易保留不再需要或不相关的内存。
在本文中，了解对象的基本生命周期，垃圾回收如何确定一个对象是否被释放，以及如何评估潜在的泄漏行为。另外，学习如何使用 Google Chrome 中的 Heap Profiler 来诊断内存问题。一些示例展示了如何解决闭包、控制台日志和循环带来的内存泄漏。
您可下载本文中使用的示例的源代码。
对象生命周期
要了解如何预防内存泄漏，需要了解对象的基本生命周期。当创建一个对象时，JavaScript 会自动为该对象分配适当的内存。从这一刻起，垃圾回收器就会不断对该对象进行评估，以查看它是否仍是有效的对象。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。图 1 显示了垃圾回收器回收内存的一个示例。
图 1. 通过垃圾收集回收内存
看到该系统的实际应用会很有帮助，但提供此功能的工具很有限。了解您的 JavaScript 应用程序占用了多少内存的一种方式是使用系统工具查看浏览器的内存分配。有多个工具可为您提供当前的使用，并描绘一个进程的内存使用量随时间变化的趋势图。
例如，如果在 Mac OSX 上安装了 XCode，您可以启动 Instruments 应用程序，并将它的活动监视器工具附加到您的浏览器上，以进行实时分析。在 Windows上，您可以使用任务管理器。如果在您使用应用程序的过程中，发现内存使用量随时间变化的曲线稳步上升，那么您就知道存在内存泄漏。
观察浏览器的内存占用只能非常粗略地显示 JavaScript 应用程序的实际内存使用。浏览器数据不会告诉您哪些对象发生了泄漏，也无法保证数据与您应用程序的真正内存占用确实匹配。而且，由于一些浏览器中存在实现问题，DOM 元素（或备用的应用程序级对象）可能不会在页面中销毁相应元素时释放。视频标记尤为如此，视频标记需要浏览器实现一种更加精细的基础架构。
人们曾多次尝试在客户端 JavaScript 库中添加对内存分配的跟踪。不幸的是，所有尝试都不是特别可靠。例如，流行的 stats.js 包由于不准确性而无法支持。一般而言，尝试从客户端维护或确定此信息存在一定的问题，是因为它会在应用程序中引入开销且无法可靠地终止。
理想的解决方案是浏览器供应商在浏览器中提供一组工具，帮助您监视内存使用，识别泄漏的对象，以及确定为什么一个特殊对象仍标记为保留。
目前，只有 Google Chrome（提供了 Heap Profile）实现了一个内存管理工具作为它的开发人员工具。我在本文中使用 Heap Profiler 测试和演示 JavaScript 运行时如何处理内存。
分析堆快照
在创建内存泄漏之前，请查看一次适当收集内存的简单交互。首先创建一个包含两个按钮的简单 HTML 页面，如清单 1 所示。
清单 1. index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </head> <body> <button id="start_button">Start</button> <button id="destroy_button">Destroy</button> <script src="assets/scripts/leaker.js" type="text/javascript" charset="utf-8"></script> <script src="assets/scripts/main.js" type="text/javascript" charset="utf-8"></script> </body> </html> |
包含 jQuery 是为了确保一种管理事件绑定的简单语法适合不同的浏览器，而且严格遵守最常见的开发实践。为leaker类和主要 JavaScript 方法添加脚本标记。在开发环境中，将 JavaScript 文件合并到单个文件中通常是一种更好的做法。出于本示例的用途，将逻辑放在独立的文件中更容易。
您可以过滤 Heap Profiler 来仅显示特殊类的实例。为了利用该功能，创建一个新类来封装泄漏对象的行为，而且这个类很容易在 Heap Profiler 中找到，如清单 2 所示。
清单 2. assets/scripts/leaker.js
|
1 2 3 4 5 6 |
var Leaker = function(){}; Leaker.prototype = { init:function(){ } }; |
绑定 Start 按钮以初始化Leaker对象，并将它分配给全局命名空间中的一个变量。还需要将 Destroy 按钮绑定到一个应清理Leaker对象的方法，并让它为垃圾收集做好准备，如清单 3 所示。
清单 3. assets/scripts/main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$("#start_button").click(function(){ if(leak !== null || leak !== undefined){ return; } leak = new Leaker(); leak.init(); }); $("#destroy_button").click(function(){ leak = null; }); var leak = new Leaker(); |
现在，您已准备好创建一个对象，在内存中查看它，然后释放它。
- 在 Chrome 中加载索引页面。因为您是直接从 Google 加载 jQuery，所以需要连接互联网来运行该样例。
- 打开开发人员工具，方法是打开 View 菜单并选择 Develop 子菜单。选择Developer Tools命令。
- 转到Profiles选项卡并获取一个堆快照，如图 2 所示。
图 2. Profiles 选项卡
- 将注意力返回到 Web 上，选择Start。
- 获取另一个堆快照。
- 过滤第一个快照，查找Leaker类的实例，找不到任何实例。切换到第二个快照，您应该能找到一个实例，如图 3 所示。
图 3. 快照实例
- 将注意力返回到 Web 上，选择Destroy。
- 获取第三个堆快照。
- 过滤第三个快照，查找Leaker类的实例，找不到任何实例。在加载第三个快照时，也可将分析模式从 Summary 切换到 Comparison，并对比第三个和第二个快照。您会看到偏移值 -1（在两次快照之间释放了Leaker对象的一个实例）。
万岁！垃圾回收有效的。现在是时候破坏它了。
内存泄漏 1：闭包
一种预防一个对象被垃圾回收的简单方式是设置一个在回调中引用该对象的间隔或超时。要查看实际应用，可更新 leaker.js 类，如清单 4 所示。
清单 4. assets/scripts/leaker.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var Leaker = function(){}; Leaker.prototype = { init:function(){ this._interval = null; this.start(); }, start: function(){ var self = this; this._interval = setInterval(function(){ self.onInterval(); }, 100); }, destroy: yon-striped-line" id="crayon-5812f0cfc1164640393495-14"> }, destroy: 题。不当清理的对象可能会存在比预期要长得多的时间。这些对象继续响应事件和消耗资源。它们可强制浏览器从一个虚拟磁盘驱动器分配内存页，这显著影响了计算机的速度（在极端的情形中，会导致浏览器崩溃）。
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。在最近几年中，许多浏览器都改善了在页面加载过程中从 JavaScript 回收内存的能力。但是，并不是所有浏览器都具有相同的运行方式。Firefox 和旧版的 Internet Explorer 都存在过内存泄漏，而且内存泄露一直持续到浏览器关闭。 过去导致内存泄漏的许多经典模式在现代浏览器中以不再导致泄漏内存。但是，如今有一种不同的趋势影响着内存泄漏。许多人正设计用于在没有硬页面刷新的单页中运行的 Web 应用程序。在那样的单页中，从应用程序的一个状态到另一个状态时，很容易保留不再需要或不相关的内存。 在本文中，了解对象的基本生命周期，垃圾回收如何确定一个对象是否被释放，以及如何评估潜在的泄漏行为。另外，学习如何使用 Google Chrome 中的 Heap Profiler 来诊断内存问题。一些示例展示了如何解决闭包、控制台日志和循环带来的内存泄漏。 您可下载本文中使用的示例的源代码。 对象生命周期要了解如何预防内存泄漏，需要了解对象的基本生命周期。当创建一个对象时，JavaScript 会自动为该对象分配适当的内存。从这一刻起，垃圾回收器就会不断对该对象进行评估，以查看它是否仍是有效的对象。 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。图 1 显示了垃圾回收器回收内存的一个示例。 图 1. 通过垃圾收集回收内存
看到该系统的实际应用会很有帮助，但提供此功能的工具很有限。了解您的 JavaScript 应用程序占用了多少内存的一种方式是使用系统工具查看浏览器的内存分配。有多个工具可为您提供当前的使用，并描绘一个进程的内存使用量随时间变化的趋势图。 例如，如果在 Mac OSX 上安装了 XCode，您可以启动 Instruments 应用程序，并将它的活动监视器工具附加到您的浏览器上，以进行实时分析。在 Windows上，您可以使用任务管理器。如果在您使用应用程序的过程中，发现内存使用量随时间变化的曲线稳步上升，那么您就知道存在内存泄漏。 观察浏览器的内存占用只能非常粗略地显示 JavaScript 应用程序的实际内存使用。浏览器数据不会告诉您哪些对象发生了泄漏，也无法保证数据与您应用程序的真正内存占用确实匹配。而且，由于一些浏览器中存在实现问题，DOM 元素（或备用的应用程序级对象）可能不会在页面中销毁相应元素时释放。视频标记尤为如此，视频标记需要浏览器实现一种更加精细的基础架构。 人们曾多次尝试在客户端 JavaScript 库中添加对内存分配的跟踪。不幸的是，所有尝试都不是特别可靠。例如，流行的 stats.js 包由于不准确性而无法支持。一般而言，尝试从客户端维护或确定此信息存在一定的问题，是因为它会在应用程序中引入开销且无法可靠地终止。 理想的解决方案是浏览器供应商在浏览器中提供一组工具，帮助您监视内存使用，识别泄漏的对象，以及确定为什么一个特殊对象仍标记为保留。 目前，只有 Google Chrome（提供了 Heap Profile）实现了一个内存管理工具作为它的开发人员工具。我在本文中使用 Heap Profiler 测试和演示 JavaScript 运行时如何处理内存。 分析堆快照在创建内存泄漏之前，请查看一次适当收集内存的简单交互。首先创建一个包含两个按钮的简单 HTML 页面，如清单 1 所示。 清单 1. index.html
包含 jQuery 是为了确保一种管理事件绑定的简单语法适合不同的浏览器，而且严格遵守最常见的开发实践。为 您可以过滤 Heap Profiler 来仅显示特殊类的实例。为了利用该功能，创建一个新类来封装泄漏对象的行为，而且这个类很容易在 Heap Profiler 中找到，如清单 2 所示。 清单 2. assets/scripts/leaker.js
绑定 Start 按钮以初始化 清单 3. assets/scripts/main.js
现在，您已准备好创建一个对象，在内存中查看它，然后释放它。
万岁！垃圾回收有效的。现在是时候破坏它了。 内存泄漏 1：闭包一种预防一个对象被垃圾回收的简单方式是设置一个在回调中引用该对象的间隔或超时。要查看实际应用，可更新 leaker.js 类，如清单 4 所示。 清单 4. assets/scripts/leaker.js
|
