JavaScript 内存泄漏教程

作者: 阮一峰

日期: 2017年4月16日

一、什么是内存泄漏?

程序的运行需要内存。只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。

对于持续运行的服务进程(daemon),必须及时释放不再用到的内存。否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。

不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。

有些语言(比如 C 语言)必须手动释放内存,程序员负责内存管理。


char * buffer;
buffer = (char*) malloc(42);

// Do something with buffer

free(buffer);

上面是 C 语言代码,malloc方法用来申请内存,使用完毕之后,必须自己用free方法释放内存。

这很麻烦,所以大多数语言提供自动内存管理,减轻程序员的负担,这被称为"垃圾回收机制"(garbage collector)。

二、垃圾回收机制

垃圾回收机制怎么知道,哪些内存不再需要呢?

最常使用的方法叫做"引用计数"(reference counting):语言引擎有一张"引用表",保存了内存里面所有的资源(通常是各种值)的引用次数。如果一个值的引用次数是0,就表示这个值不再用到了,因此可以将这块内存释放。

上图中,左下角的两个值,没有任何引用,所以可以释放。

如果一个值不再需要了,引用数却不为0,垃圾回收机制无法释放这块内存,从而导致内存泄漏。


const arr = [1, 2, 3, 4];
console.log('hello world');

上面代码中,数组[1, 2, 3, 4]是一个值,会占用内存。变量arr是仅有的对这个值的引用,因此引用次数为1。尽管后面的代码没有用到arr,它还是会持续占用内存。

如果增加一行代码,解除arr[1, 2, 3, 4]引用,这块内存就可以被垃圾回收机制释放了。


let arr = [1, 2, 3, 4];
console.log('hello world');
arr = null;

上面代码中,arr重置为null,就解除了对[1, 2, 3, 4]的引用,引用次数变成了0,内存就可以释放出来了。

因此,并不是说有了垃圾回收机制,程序员就轻松了。你还是需要关注内存占用:那些很占空间的值,一旦不再用到,你必须检查是否还存在对它们的引用。如果是的话,就必须手动解除引用。

三、内存泄漏的识别方法

怎样可以观察到内存泄漏呢?

经验法则是,如果连续五次垃圾回收之后,内存占用一次比一次大,就有内存泄漏。这就要求实时查看内存占用。

3.1 浏览器

Chrome 浏览器查看内存占用,按照以下步骤操作。

  1. 打开开发者工具,选择 Timeline 面板
  2. 在顶部的Capture字段里面勾选 Memory
  3. 点击左上角的录制按钮。
  4. 在页面上进行各种操作,模拟用户的使用情况。
  5. 一段时间后,点击对话框的 stop 按钮,面板上就会显示这段时间的内存占用情况。

如果内存占用基本平稳,接近水平,就说明不存在内存泄漏。

反之,就是内存泄漏了。

3.2 命令行

命令行可以使用 Node 提供的process.memoryUsage方法。


console.log(process.memoryUsage());
// { rss: 27709440,
//  heapTotal: 5685248,
//  heapUsed: 3449392,
//  external: 8772 }

process.memoryUsage返回一个对象,包含了 Node 进程的内存占用信息。该对象包含四个字段,单位是字节,含义如下。

  • rss(resident set size):所有内存占用,包括指令区和堆栈。
  • heapTotal:"堆"占用的内存,包括用到的和没用到的。
  • heapUsed:用到的堆的部分。
  • external: V8 引擎内部的 C++ 对象占用的内存。

判断内存泄漏,以heapUsed字段为准。

四、WeakMap

前面说过,及时清除引用非常重要。但是,你不可能记得那么多,有时候一疏忽就忘了,所以才有那么多内存泄漏。

最好能有一种方法,在新建引用的时候就声明,哪些引用必须手动清除,哪些引用可以忽略不计,当其他引用消失以后,垃圾回收机制就可以释放内存。这样就能大大减轻程序员的负担,你只要清除主要引用就可以了。

ES6 考虑到了这一点,推出了两种新的数据结构:WeakSetWeakMap。它们对于值的引用都是不计入垃圾回收机制的,所以名字里面才会有一个"Weak",表示这是弱引用。

下面以 WeakMap 为例,看看它是怎么解决内存泄漏的。


const wm = new WeakMap();

const element = document.getElementById('example');

wm.set(element, 'some information');
wm.get(element) // "some information"

上面代码中,先新建一个 Weakmap 实例。然后,将一个 DOM 节点作为键名存入该实例,并将一些附加信息作为键值,一起存放在 WeakMap 里面。这时,WeakMap 里面对element的引用就是弱引用,不会被计入垃圾回收机制。

也就是说,DOM 节点对象的引用计数是1,而不是2。这时,一旦消除对该节点的引用,它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对,也会自动消失。

基本上,如果你要往对象上添加数据,又不想干扰垃圾回收机制,就可以使用 WeakMap。

五、WeakMap 示例

WeakMap 的例子很难演示,因为无法观察它里面的引用会自动消失。此时,其他引用都解除了,已经没有引用指向 WeakMap 的键名了,导致无法证实那个键名是不是存在。

我一直想不出办法,直到有一天贺师俊老师提示,如果引用所指向的值占用特别多的内存,就可以通过process.memoryUsage方法看出来。

根据这个思路,网友 vtxf 补充了下面的例子

首先,打开 Node 命令行。


$ node --expose-gc

上面代码中,--expose-gc参数表示允许手动执行垃圾回收机制。

然后,执行下面的代码。


// 手动执行一次垃圾回收,保证获取的内存使用状态准确
> global.gc(); 
undefined

// 查看内存占用的初始状态,heapUsed 为 4M 左右
> process.memoryUsage(); 
{ rss: 21106688,
  heapTotal: 7376896,
  heapUsed: 4153936,
  external: 9059 }

> let wm = new WeakMap();
undefined

> let b = new Object();
undefined

> global.gc();
undefined

// 此时,heapUsed 仍然为 4M 左右
> process.memoryUsage(); 
{ rss: 20537344,
  heapTotal: 9474048,
  heapUsed: 3967272,
  external: 8993 }

// 在 WeakMap 中添加一个键值对,
// 键名为对象 b,键值为一个 5*1024*1024 的数组  
> wm.set(b, new Array(5*1024*1024));
WeakMap {}

// 手动执行一次垃圾回收
> global.gc();
undefined

// 此时,heapUsed 为 45M 左右
> process.memoryUsage(); 
{ rss: 62652416,
  heapTotal: 51437568,
  heapUsed: 45911664,
  external: 8951 }

// 解除对象 b 的引用  
> b = null;
null

// 再次执行垃圾回收
> global.gc();
undefined

// 解除 b 的引用以后,heapUsed 变回 4M 左右
// 说明 WeakMap 中的那个长度为 5*1024*1024 的数组被销毁了
> process.memoryUsage(); 
{ rss: 20639744,
  heapTotal: 8425472,
  heapUsed: 3979792,
  external: 8956 }

上面代码中,只要外部的引用消失,WeakMap 内部的引用,就会自动被垃圾回收清除。由此可见,有了它的帮助,解决内存泄漏就会简单很多。

六、参考链接

(完)

珠峰培训

stuQ

留言(30条)

受益匪浅

我觉得memory leak还是翻译成内存泄漏比较好,泄露更多的指不想被别人知道的事情被人知道了。

b 不能用const定义,不然后面没法 b=null

node基于v8垃圾回收并不是引用计数那么简单。

在js中,循环引用会造成内存泄漏吗?比如:window.m = a; a = b; b = c; c = a; abc是三角恋关系,如果解除m对a的引用,abc的引用计数都为1,那abc会被回收掉吗。先前看过有关Node.js垃圾回收的文章,垃圾回收会stop the world,并且从树的root节点开始遍历,触及不到的变量就会被回收,这一点似乎和引用计数有些不一样,js对于循环引用的情况又是如何解决的?

这些带垃圾回收的语言实际上是让内存管理变得更复杂了,还不如C和C++简单高效直观,更不要提性能上的差距。所谓减轻程序员的负担实际上是让他们更难写出好的代码...

@小麦:

谢谢指出,已经改过来了。我的拼音输入法里面,泄露排在泄漏前面,汗死。

@vajoy:

谢谢指出,已经改过来了。原来例子写的是 var,我习惯性改成 const 了。

但如何保证清除外部引用后,垃圾回收立马进行呢?
因为也有可能是清除引用后立马又进行 `get` 操作,此时会不会有可能垃圾回收还没来得及完成。

由于字符串、对象和数组没有固定大小,所有当他们的大小已知时,才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这些内存以便他们能够被再用,否则,JavaScript的解释器将会消耗完系统中所有可用的内存,造成系统崩溃。

现在各大浏览器通常用采用的垃圾回收有两种方法:标记清除、引用计数。

防内存泄漏最重要的是了解V8如何处理闭包

引用雨停的发言:

其实主要的是“标记清除”,只有老版本的IE才用“引用记数”。因为引用记数会有循环引用的情况,容易导致内存泄露

阮老师

const a = [1, 2, 3,4];
a = null;

此处的 const 也不妥吧。

赞一个,很有用

还是渣渣。。好多都没有听懂。感慨

阮大神,收下我的膝盖!

阮老师,你的代码在上面验证WeakMap的时候,其中有一段是const b = new Object(); 后面又对b 进行赋值, 我感觉很惊恐,我有去翻了您写的es6入门里面关于const命令,我也反复读了您写的,因为我自己按照您的例子操作,发现在const这里b = null 是会报错的。您看是您写错了,还是我理解错了呢?很感谢使用es6语法,现在大部分例子还是es5的。

@liuz,@anno:

谢谢指出,已经改正。

为什么给b加了一个5MB的数组,内存使用一下多了40MB?

引用liuz的发言:

阮老师

const a = [1, 2, 3,4];
a = null;

此处的 const 也不妥吧。

const 无法改变指针的指向。

let arr = [1, 2, 3, 4];
console.log('hello world');
arr = null;

这段代码作为范例来说是不妥的,因为没有考虑函数的问题。

虽然理论上来说,不使用的变量需要清除,但在 js 的实际编程中大部分情况下不应当这样手动清除,而且一般的编程规范也不会建议这么做。

变量如果定义在函数内部,当函数运行完成后,这些内部变量就会完成它的生命周期,能够被垃圾回收,没有必要做手动清除。

变量如果定义在全局,那就不是需不需要清除的问题,而是首先要考虑有没有必要把变量定义在全局的问题。将临时变量定义在全局,这是需要纠正的一个不良习惯,纠正这种习惯的重要性要远远高于清除全局临时变量值的行为。

函数执行完毕后内部变量的值依然会被保留,这种情况当然也可能出现,也就是遇到了常说的“闭包”。对于闭包来说,并不是外层函数的所有变量都会被保留,引擎会进行优化,仅保留会在内层函数中引用的外层变量。那么问题就来了:既然形成闭包后,内层函数会用到的外层变量才会被保留,这样会被留下来继续保留引用的变量,就代表这些变量是有用的,为什么要清除它们呢?此外,对于在闭包内层函数中它自身定义的局部作用域的变量,这些局部变量一般情况下仍然是会完成其生命周期、被自动回收的。

总结来说:应尽量避免定义全局的临时变量,而函数内部仅涉及到本级作用域的变量(不会被闭包保留引用的)无需手动清除。对于全局公共变量、以及闭包内引用变量来说,仅在变量确实使用完毕、值不再需要保留时,才需要手动清除变量的值。

对于浏览器来说,还需要考虑 DOM 元素的情况。如果某个变量(以及对象类型变量上的属性、元素)保留了对于 DOM 元素的引用,包括引用本页的元素或同源的 iframe 内的元素等情况,当该元素在页面上被删除时,对于它的引用很可能还被保留在变量内,这样就会造成内存泄露。这视乎目标 DOM 元素是否易变的问题,不可一概而论,是复杂单页应用尤其要考虑的问题。对于易变的 DOM 元素,除了做一个公共的释放引用的方法外,也可以考虑不在变量上缓存对于 DOM 元素的引用、宁可牺牲一点点性能、每次都进行查询(现查现用)。这方面的平衡点需要根据实际情况来选择。

原文对于 WeakSet 和 WeakMap 的描述有点问题:“它们对于值的引用都是不计入垃圾回收机制的”。这里的“值”是不是应该改为“键”?

Map 体现为键/值对( Set 则是键值一体), WeakMap 只有对于键的引用是弱引用,对于其中值的引用则是强引用。

当然,这段原文中所提到的“值”与“键/值对”中的“值”很可能不是指同一个概念,所以也不能说它是完全错误的,但毕竟表述不严谨,可能引起误解。或许原文换一种表述方式会更妥当些,例如“在 WeakSet 的值和 WeakMap 的键上对于对象的引用都是弱引用,都是不计入垃圾回收机制的”。

收获很大

表示没看懂,数组的var的变量最后要让它等于null,才能释放内存,那么在weakmap里面,也const了一个b,最后释放也是让b等于null,才能释放内存,那么weakmap作用是啥?让代码更加复杂让人看不懂吗?我是初学者,说的不对的地方望指正,谢谢!

WeakMap 没有使用过, 我所考虑的是在项目中有哪些地方适宜使用,或哪些地方不便使用。如果有个相关的开源项目供参考下就好了

javascript怎么获取chrome浏览器devtools中的network下的preview里的数据

想看点权威的例子跑来这里,然后看完感觉缺了一部分,就是常见的js内存泄漏的类型、原理,再如何去避免和解决它。应该在二、三节间加这个。

引用Micooz Lee的发言:

在js中,循环引用会造成内存泄漏吗?比如:window.m = a; a = b; b = c; c = a; abc是三角恋关系,如果解除m对a的引用,abc的引用计数都为1,那abc会被回收掉吗。先前看过有关Node.js垃圾回收的文章,垃圾回收会stop the world,并且从树的root节点开始遍历,触及不到的变量就会被回收,这一点似乎和引用计数有些不一样,js对于循环引用的情况又是如何解决的?

就我所理解的
计算机的内存数据都有两个属性:地址、值

a = b 实际并不应该叫 “a引用了b”,说准确点应该是叫“a引用了b对应的值”,你可以理解为:b 的值为 X,那么 a = b 就是“a引用了X”。所以你的 window.m = a; a = b; b = c; c = a; 的代码意思应该是“window.m , a , b , c 都引用了X”,X 引用计数为 4 。
解除 window.m 的引用后 X 引用计数为 3 ,以此类推。用你的话说就是,不存在abc三角恋关系,而是abc三个都统一暗恋着X,称为“引用计数”的属性也只有实际占用内存“值”的 X 才拥有,abc包括window.m这些“变量名/地址”本身是没有这个属性的(说精确点其实也是有的,见下面“值拷贝”)

可能有些语言里或情况下 等号 = 是默认的“值拷贝”,而不是上面对应的“地址拷贝”(当然,把“地址”也理解为一种“值”的话也是可以的,这样就叫“地址”的“值拷贝”),总之在这种“值拷贝”情况下,那么abc各自引用了一个值,比如 a引用了X1,b引用了X2,c引用了X3(在值的大小上X1等于X2等于X3,但是它们三个在内存里又是相互独立的,三胞胎?)然后引用计数怎么算你懂了

引用soranokaze的发言:

就我所理解的
计算机的内存数据都有两个属性:地址、值

a = b 实际并不应该叫 “a引用了b”,说准确点应该是叫“a引用了b对应的值”,你可以理解为:b 的值为 X,那么 a = b 就是“a引用了X”。所以你的 window.m = a; a = b; b = c; c = a; 的代码意思应该是“window.m , a , b , c 都引用了X”,X 引用计数为 4 。
解除 window.m 的引用后 X 引用计数为 3 ,以此类推。用你的话说就是,不存在abc三角恋关系,而是abc三个都统一暗恋着X,称为“引用计数”的属性也只有实际占用内存“值”的 X 才拥有,abc包括window.m这些“变量名/地址”本身是没有这个属性的(说精确点其实也是有的,见下面“值拷贝”)

可能有些语言里或情况下 等号 = 是默认的“值拷贝”,而不是上面对应的“地址拷贝”(当然,把“地址”也理解为一种“值”的话也是可以的,这样就叫“地址”的“值拷贝”),总之在这种“值拷贝”情况下,那么abc各自引用了一个值,比如 a引用了X1,b引用了X2,c引用了X3(在值的大小上X1等于X2等于X3,但是它们三个在内存里又是相互独立的,三胞胎?)然后引用计数怎么算你懂了


自我纠正一下,我举的例子对应的代码应该是这样的 window.m = a; b = a; c = b; a = c;
跟原先 Micooz Lee 的代码例子有些出入,但想表达的意思是一致的。
原先的代码 window.m = a; a = b; b = c; c = a; 这里重新按我的理解解释一下:
介于“window.m = a; a = b; b = c;”这三句,那么变量a,b,c肯定都会各自有个初始值(如果没有那么可以理解为初始值为空值),假设a初始值对应内存值A;b对应B;c对应C,那么之前的代码执行完后的情况是 window.m指向A,a指向B,b指向C,c指向B,所以这里其实也没有循环引用的问题,当window.m接触引用后,内存值A可以被回收(如果没有另外没提到的变量引用A的话)。内存值B由变量a和c引用,计数为2。内存值C有变量b引用,计数为1。

补充一下 循环引用的例子 ^_^

例1:
v = {}
v.p = v

例2:
x = {}, y = {}
x.p = y, y.p = x

... ...

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接