关于内存泄漏，请各位看看

PerterPon 2012-06-16 09:56:44

一个说法是对Dom的循环操作会引起内存泄漏，一下是一个例子：



function init() {

    var el = document.getElementById('MyElement');

el.onclick = function () {……}

}

init();

下面是对此的解释：init在执行的时候，当前上下文我们叫做context。这个时候，context引用了el，el引用了function，function引用了context。这时候形成了一个循环引用。

el引用了function，这个function指的是el的click事件处理函数么？如果是的话，这个function的context不是应该是el么？对此还是有些不能理解，求各位指点一二，多谢各位了。

...全文

190 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

likeajin 2012-06-17

打赏
举报

再补充一点，原来上面的测试对chrome也是一样……

likeajin 2012-06-17

打赏
举报

[Quote=引用 5 楼的回复:]
但是我觉得这些应该不会导致内存泄露。我觉得只是一般的闭包应用。
[/Quote]
这个跟浏览器的实现机制有关，有些浏览器的垃圾回收做的很好，比如chrome，有些做的就不是那么好，比如低版本的IE。
不妨模拟一个场景出来，情看下面的html(注：这个例子与楼主的题目不是很贴近，只是为了做一个简单的测试，测试目的并不能保证正确)



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title></title>

<style>

div{width:100px;height:20px;border:1px solid black;margin:1px;}

</style>

</head>

<body>

<div id='div'></div>

<div id='div1'></div>

<script type="text/javascript">

  document.getElementById('div').onclick=function(){

    var a={};

    for(var i=0;i<100000;i++)a[i+'']='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';

    document.getElementById('div1').onclick=function(){};

  };

</script>

</body>

</html>

代码解释：
1.给第一个div块加了一个点击事件，点击事件的函数中设置了一个变量a，改变量会产生很大的内存。
2.在点击事件中为第二个div块添加一个点击事件。

测试方法：
1.观察浏览器占用的内存。
2.不注释为第二个div块添加事件的语句，点击两次第一个div块，两次之间的间隔时间稍微长一点，给浏览器足够的时间处理，保证效果。
3.注释为第二个div块添加事件的语句，点击两次第一个div块，同上。

结果：
1.按照一般的闭包思路，这个代码应该在每次点击完第一个div块后浏览器占用的内存都差不多，至少相差不是很远。
2.如果注释了为第二个div块添加事件的语句，那么结果和1差不多。
3.如果为注释，那么在IE6和IE8下，这里的结果显示是两次点击后浏览器占的内存在持续增加，但第三次点击浏览器占用的内存就不再增加，感觉表明至少有一个变量a占用的内存是未被释放的，这与闭包或结果1相差甚远，应该解释为内存泄漏。
4.如果在为第二个div块添加事件的语句后断开变量a的引用(设置a=null)，那么不会引起内存泄漏。

后记：
1.只是简单的测试，不保证正真IE6和IE8的机制是什么。
2.最起码这个测试告诉我，在写代码时尽量要保证该释放的释放，该断开引用的断开引用。
3.测试的逻辑与楼主帖的逻辑不太一致，不过应该尽量注意。

mafeiing 2012-06-17

打赏
举报

我也没有发现什么内存泄露的问题

PerterPon 2012-06-16

打赏
举报

[Quote=引用 1 楼的回复:]

不能把...没发现什么泄漏啊...不懂...我这执行很正常...
HTML code
<html>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
<body>
<div>
<input type="button" value="aaaa">
<br>
<input type……
[/Quote]
在一篇有关JS优化的博文里看到的，当时一头雾水，所以就过来这边问问，貌似周六大牛都出去玩了啊。

daols 2012-06-16

打赏
举报

不能把...没发现什么泄漏啊...不懂...我这执行很正常...

<html>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=utf-8">

</HEAD>

<body>

<div>

<input type="button" value="aaaa">

<br>

<input type="button" value="bbbb" id="MyElement">

</div>

<SCRIPT type="text/javascript">

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {alert('haha');};

}

init();

</SCRIPT>

</body>

</html>

最后一个菜鸟 2012-06-16

打赏
举报

[Quote=引用 4 楼的回复:]

JScript code

function init() {
var el = document.getElementById('MyElement');
var a=1;
var tmp=function(){alert(a)};
el.onclick = tmp;
}
init();

这样似乎就容易明了了，init的context引用了el；el引用……
[/Quote]
但是我觉得这些应该不会导致内存泄露。我觉得只是一般的闭包应用。

likeajin 2012-06-16

打赏
举报



function init() {

    var el = document.getElementById('MyElement');

    var a=1;

    var tmp=function(){alert(a)};

    el.onclick = tmp;

}

init();

这样似乎就容易明了了，init的context引用了el；el引用了tmp；tmp引用了init的context，否则tmp中找不到变量a。
PS：el的点击函数引用了init的context，不表示el点击函数的context是init的context。