JavaScript 内存泄漏的五大常见原因及排查方法

JavaScript 内存泄漏概述与工具介绍

本文内容源自 2014 年 8 月 26 日在伦敦 WebPerf 集团举办的谷歌 WebPerf 讲座。

构建高性能的 JavaScript Web 应用需要保证交互的流畅与响应速度。任何涉及用户交互的应用都必须重视内存的有效使用，因为内存消耗过高会导致页面崩溃，迫使用户重新加载页面，从而严重影响用户体验。

自动垃圾回收机制并不能完全替代有效的内存管理策略，特别是在大型且长期运行的 Web 应用中。本次讲座旨在演示如何利用 Chrome 的 DevTools 对内存进行有效管理。

我们将探讨如何解决诸如内存泄漏、频繁的垃圾回收（GC）暂停以及整体内存膨胀等性能问题，这些都是开发者需要重点关注的痛点。

常见内存泄漏场景分析

Addy Osmani 在其演示文稿中展示了多个会在 Chrome V8 引擎中引发内存泄漏的示例：

1) 删除对象属性会导致该对象变为“慢对象”，内存占用可能增加多达 15 倍。

var o = { x: 'y' };
delete o.x; // 此时对象 o 会变成一个慢对象
o.x; //
var o = { x: 'y' };
o = null; // 推荐的做法是将对象置为 null

2) 闭包问题

当在闭包中引用了外部变量时，即使闭包执行结束，该外部对象也无法被垃圾回收器（GC）回收。

var a = function() {
var largeStr = new Array(1000000).join('x');
return function() {
return largeStr;
  }
}();

3) DOM 节点泄漏

当原有的 DOM 节点被移除时，如果其子节点的引用未被清除，则无法被回收。

var select = document.querySelector;
var treeRef = select('#tree');
// 在 DOM 树中，leafRef 是 treeRef 的一个子节点
var leafRef = select('#leaf'); 
var body = select('body');
body.removeChild(treeRef);
// #tree 无法被回收，因为 treeRef 引用仍然存在
// 解决方法:
treeRef = null;
// tree 仍不能立即被回收，因为叶子节点 leafRef 的引用还在
leafRef = null;
// 现在 #tree 节点可以被释放了。

4) 定时器（Timer）泄漏

定时器也是常见的内存泄漏来源：

for (var i = 0; i < 90000; i++) {
var buggyObject = {
callAgain: function() {
var ref = this;
var val = setTimeout(function() {
ref.callAgain();
}, 90000);
    }
  }
buggyObject.callAgain();
 // 虽然你想回收对象，但定时器仍在运行
 buggyObject = null;
}

使用 Chrome DevTools 调试内存

5) 调试内存使用情况

Chrome 自带的内存调试工具可以方便地查看内存使用情况和检测内存泄漏： 在 Timeline -> Memory 面板中点击 record 按钮即可开始记录：

更多详细内容请参阅原始 PPT 文档。