首页 > 编程知识 正文

内存泄漏js代码,内存泄露代码

时间:2023-12-28 11:57:02 阅读:328177 作者:CVZH

本文目录一览:

怎么解决内存泄漏js

意外的全局变量

js中如果不用var声明变量,该变量将被视为window对象(全局对象)的属性,也就是全局变量.

function foo(arg) {

bar = "this is a hidden global variable";

}123

// 上面的函数等价于

function foo(arg) {

window.bar = "this is an explicit global variable";

}123

所以,你调用完了函数以后,变量仍然存在,导致泄漏.

如果不注意this的话,还可能会这么漏:

function foo() {

this.variable = "potential accidental global";

}123

// 没有对象调用foo, 也没有给它绑定this, 所以this是window

foo();

你可以通过加上’use strict’启用严格模式来避免这类问题, 严格模式会组织你创建意外的全局变量.

被遗忘的定时器或者回调

var someResource = getData();

setInterval(function() {

var node = document.getElementById('Node'); if(node) {

node.innerHTML = JSON.stringify(someResource));

}

}, 1000);1234567

这样的代码很常见, 如果id为Node的元素从DOM中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对someResource的引用, 定时器外面的someResource也不会被释放.

没有清理的DOM元素引用

var elements = { button: document.getElementById('button'), image: document.getElementById('image'), text: document.getElementById('text')

};function doStuff() {

image.src = '';

button.click(); console.log(text.innerHTML);

}function removeButton() { document.body.removeChild(document.getElementById('button')); // 虽然我们用removeChild移除了button, 但是还在elements对象里保存着#button的引用

// 换言之, DOM元素还在内存里面.

}123456789101112131415161718

闭包

先看这样一段代码:

var theThing = null;var replaceThing = function () {

var someMessage = '123'

theThing = {

someMethod: function () {

console.log(someMessage);

}

};

};123456789

调用replaceThing之后, 调用theThing.someMethod, 会输出123, 基本的闭包, 我想到这里应该不难理解.

解释一下的话, theThing包含一个someMethod方法, 该方法引用了函数中的someMessage变量, 所以函数中的someMessage变量不会被回收, 调用someMethod可以拿到它正确的console.log出来.

接下来我这么改一下:

var theThing = null;var replaceThing = function () {

var originalThing = theThing; var someMessage = '123'

theThing = {

longStr: new Array(1000000).join('*'), // 大概占用1MB内存

someMethod: function () {

console.log(someMessage);

}

};

};1234567891011

我们先做一个假设, 如果函数中所有的私有变量, 不管someMethod用不用, 都被放进闭包的话, 那么会发生什么呢.

第一次调用replaceThing, 闭包中包含originalThing = null和someMessage = ‘123’, 我们设函数结束时, theThing的值为theThing_1.

第二次调用replaceThing, 如果我们的假设成立, originalThing = theThing_1和someMessage = ‘123’.我们设第二次调用函数结束时, theThing的值为theThing_2.注意, 此时的originalThing保存着theThing_1, theThing_1包含着和theThing_2截然不同的someMethod, theThing_1的someMethod中包含一个someMessage, 同样如果我们的假设成立, 第一次的originalThing = null应该也在.

所以, 如果我们的假设成立, 第二次调用以后, 内存中有theThing_1和theThing_2, 因为他们都是靠longStr把占用内存撑起来, 所以第二次调用以后, 内存消耗比第一次多1MB.

如果你亲自试了(使用Chrome的Profiles查看每次调用后的内存快照), 会发现我们的假设是不成立的, 浏览器很聪明, 它只会把someMethod用到的变量保存下来, 用不到的就不保存了, 这为我们节省了内存.

但如果我们这么写:

var theThing = null;var replaceThing = function () {

var originalThing = theThing; var unused = function () {

if (originalThing)

console.log("hi");

}; var someMessage = '123'

theThing = {

longStr: new Array(1000000).join('*'),

someMethod: function () {

console.log(someMessage);

}

};

};123456789101112131415

unused 这个函数我们没有用到, 但是它用了 originalThing 变量, 接下来, 如果你一次次调用 replaceThing , 你会看到内存1MB 1MB的涨.

也就是说, 虽然我们没有使用 unused , 但是因为它使用了 originalThing , 使得它也被放进闭包了, 内存漏了.

强烈建议读者亲自试试在这几种情况下产生的内存变化.

这种情况产生的原因, 通俗讲, 是因为无论 someMethod 还是 unused , 他们其中所需要用到的在 replaceThing 中定义的变量是保存在一起的, 所以就漏了.

如何自己检查NodeJS的代码是否存在内存泄漏

首先,我们来看一个简单的内存泄漏

var http = require('http');var server = http.createServer(function (req, res) {

for (var i=0; i1000; i++) {

server.on('request', function leakyfunc() {});

}

res.end('Hello Worldn');}).listen(1337, '127.0.0.1');server.setMaxListeners(0);console.log('Server running at . Process PID: ', process.pid);

每一个请求我们增加了1000个导致泄漏的监听器。如果我们在一个shell控制台中执行以下命令:

while true; do curl ; done

然后在另外一个shell控制台中查看我们的进程

top -pid

我们会看到node进程产生异常高的内存占用,我们的node进程看起来失控了。那么,当我们的node进程出现这种情况的时候,通常我们该怎样诊断出问题的根源?

内存泄露的检测

npm模块 memwatch 是一个非常好的内存泄漏检查工具,让我们先将这个模块安装到我们的app中去,执行以下命令:

npm install --save memwatch

然后,在我们的代码中,添加:

var memwatch = require('memwatch');memwatch.setup();

然后监听 leak 事件

memwatch.on('leak', function(info) {

console.error('Memory leak detected: ', info);});

这样当我们执行我们的测试代码,我们会看到下面的信息:

{

start: Fri Jan 02 2015 10:38:49 GMT+0000 (GMT),

end: Fri Jan 02 2015 10:38:50 GMT+0000 (GMT),

growth: 7620560,

reason: 'heap growth over 5 consecutive GCs (1s) - -2147483648 bytes/hr'}

memwatch发现了内存泄漏!memwatch 判定内存泄漏事件发生的规则如下:

当你的堆内存在5个连续的垃圾回收周期内保持持续增长,那么一个内存泄漏事件被派发

了解更加详细的内容,查看 memwatch

内存泄漏分析

使用memwatch我们发现了存在内存泄漏,这非常好,但是现在呢?我们还需要定位内存泄漏出现的实际位置。要做到这一点,有两种方法可以使用。

memwatch heap diff

通过memwatch你可以得到堆内存使用量和内存随程序运行产生的差异。详细的文档在这里

例如,我们可以在两个leak事件发生的间隔中做一个heap dump:

var hd;memwatch.on('leak', function(info) {

console.error(info);

if (!hd) {

hd = new memwatch.HeapDiff();

} else {

var diff = hd.end();

console.error(util.inspect(diff, true, null));

hd = null;

}});

执行这段代码会输出更多的信息:

{ before: {

nodes: 244023,

time: Fri Jan 02 2015 12:13:11 GMT+0000 (GMT),

size_bytes: 22095800,

size: '21.07 mb' },

after: {

nodes: 280028,

time: Fri Jan 02 2015 12:13:13 GMT+0000 (GMT),

size_bytes: 24689216,

size: '23.55 mb' },

change: {

size_bytes: 2593416,

size: '2.47 mb',

freed_nodes: 388,

allocated_nodes: 36393,

details:

[ { size_bytes: 0,

'+': 0,

what: '(Relocatable)',

'-': 1,

size: '0 bytes' },

{ size_bytes: 0,

'+': 1,

what: 'Arguments',

'-': 1,

size: '0 bytes' },

{ size_bytes: 2856,

'+': 223,

what: 'Array',

'-': 201,

size: '2.79 kb' },

{ size_bytes: 2590272,

'+': 35987,

what: 'Closure',

'-': 11,

size: '2.47 mb' },...

所以在内存泄漏事件之间,我们发现堆内存增长了2.47MB,而导致内存增长的罪魁祸首是闭包。如果你的泄漏是由某个class造成的,那么what字段可能会输出具体的class名字,所以这样的话,你会获得足够的信息来帮助你最终定位到泄漏之处。

然而,在我们的例子中,我们唯一获得的信息只是泄漏来自于闭包,这个信息非常有用,但是仍不足以在一个复杂的应用中迅速找到问题的来源(复杂的应用往往有很多的闭包,不知道哪一个造成了内存泄漏——译者注)

所以我们该怎么办呢?这时候该Heapdump出场了。

Heapdump

npm模块node-heapdump是一个非凡的模块,它可以使用来将v8引擎的堆内存内容dump出来,这样你就可以在Chrome的开发者工具中查看问题。你可以在开发工具中对比不同运行阶段的堆内存快照,这样可以帮助你定位到内存泄漏的位置。要想了解heapdump的更多内容,可以阅读这篇文章

现在让我们来试试 heapdump,在每一次发现内存泄漏的时候,我们都将此时的内存堆栈快照写入磁盘中:

memwatch.on('leak', function(info) {

console.error(info);

var file = '/tmp/myapp-' + process.pid + '-' + Date.now() + '.heapsnapshot';

heapdump.writeSnapshot(file, function(err){

if (err) console.error(err);

else console.error('Wrote snapshot: ' + file);

});});

运行我们的代码,磁盘上会产生一些.heapsnapshot的文件到/tmp目录下。现在,在Chrome浏览器中,启动开发者工具(在mac下的快捷键是alt+cmd+i),点击Profiles标签并点击Load按钮载入我们的快照。

我们能够很清晰地发现原来leakyfunc()是内存泄漏的元凶。

我们依然还可以通过对比两次记录中heapdump的不同来更加迅速确认两次dump之间的内存泄漏:

想要进一步了解开发者工具的memory profiling功能,可以阅读 Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools 这篇文章。

Turbo Test Runner

我们给Turbo - FeedHenry开发的测试工具提交了一个小补丁 — 使用了上面所说的内存泄漏检查技术。这样就可以让开发者写针对内存的单元测试了,如果模块有内存问题,那么测试结果中就会产生相应的警告。详细了解具体的内容,可以访问Turbo模块。

结论和其他细节

上面的内容讨论了一种检测NodeJS内存泄漏的基本方法,以下是一些结论:

heapdump有一些潜规则,例如快照大小等。仔细阅读说明文档,并且生成快照也是比较消耗CPU资源的。

还有些其他方法也能生成快照,各有利弊,针对你的项目选择最适合的方式。(例如,发送sigusr2到进程等等,这里有一个memwatch-sigusr2项目)

需要考虑在什么情况下开启memwatch/heapdump。只有在测试环境中有开启它们的必要,另外也需要考虑heapdump的频度以免耗尽了CPU。总之,选择最适合你项目的方式。

也可以考虑其他的方式来检测内存的增长,比如直接监控process.memoryUsage()是一个可以考虑的方法。

当内存问题被探测到之后,你应该要确定这确实是个内存泄漏问题,然后再告知给相关人员。

当心误判,短暂的内存使用峰值表现得很像是内存泄漏。如果你的app突然要占用大量的CPU和内存,处理时间可能会跨越数个垃圾回收周期,那样的话memwatch很有可能将之误判为内存泄漏。但是,这种情况下,一旦你的app使用完这些资源,内存消耗就会降回正常的水平。所以,你其实需要注意的是持续报告的内存泄漏,而可以忽略一两次突发的警报。

memwatch目前仅支持node 0.10.x,node 0.12.x(可能还有io.js)支持的版本在这个分支

js循环引用引起的内存泄漏示例

Js中存在和OC同等意义的闭包(block closure)闭包可看作匿名函数,例如:

函数中 给element的onclick属性赋值了一个闭包,闭包要访问element的id属性。闭包在js中也是对象,函数即对象。闭包会持有外部传入的变量,因此闭包持有了element对象,而element对象通过onclick属性持有了闭包,因此两个对象相互持有,造成内存泄漏。

与OC类比,OC中使用weak对象引用,来解决循环引用的问题,js中也有类似操作,例如:

因为var id是由赋值得到的,js的赋值操作是值或者引用的拷贝,并不持有对象。此时element持有闭包,闭包持有id对象,并未造成循环引用。

autojs死巡环内存爆炸

内存溢出是一种程序运行会出现的错误,当程序所需要的内存大于剩余内存(机器能提供给你的内存),就会抛出内存溢出的错误

var obj = {}

for (var i = 0; i 100000000; i++) {

obj[i] = new Array[100000000]

}

登录后复制

内存泄漏

占用的内存没有及时的释放从而失去控制,从而造成内存的浪费。内存泄漏多了就容易引发内存溢出。

常见的内存泄漏案例:

1、意外的全局变量

function fn() {

var name = '张三'

var age = 18

address = '上海' // 没有用var定义,这时候address是全局的

}

fn() // 因为address会被变量提升到了全局变量,fn调用完成后address还保留在内存中

登录后复制

2、没有及时清除定时器

// 没有及时清理定时器

var timer = setInterval(() = {

console.log(new Date())

}, 1000);

// clearInterval(timer) 及时清理定时器

登录后复制

3、没有及时清理闭包

// 函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长,容易造成内存泄露

function fun() {

var a = 5

function getA() {

return a

}

return getA

}

var f = fun()

f() // 5

// f = null 让内部函数成为垃圾对象,释放闭包

登录后复制

4、没有及时清理清理dom元素的引用

var dom = document.getElementById('box')

document.body.removeChild(dom) // dom删除后,下面依然能打印出整个div

console.log(dom) // div id="box"嘿嘿嘿/div

dom = null

console.log(dom) // 释放资源,解除引用

登录后复制

5、addEventListener

监听事件的解除,监听的时候addEventListener,在不监听的时候要使用removeEventListener。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。