关于jquery内存回收问题请教

zhanjianhua

浏览: 89502 次
性别:
来自: 上海

最近访客更多访客>>

zhangcaiyanbeyond

1634801662

jiage17

yeliangsheng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery IE EXT JavaScript 浏览器

最近用了一段时间的JQUERY,发现用JQUERY中的.append()方法动态生成数据时,内存不会回收,我不知道是不是我使用有问题,
还是JQUERY本身就带有这问题.
以下是我写的一个HTML,

最近用了一段时间的JQUERY,发现用JQUERY中的.append()方法动态生成数据时,内存不会回收,我不知道是不是我使用有问题, 
还是JQUERY本身就带有这问题. 
以下是我写的一个HTML, <html>
<head>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody id="songList">
</tbody>
</table>
<a href="#" onclick="getList()">点击装载数据
</body>
<script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript">
        $(document).ready(function(){
        	getList();
        })
        function getList() {
        	$("#songList").empty();
        	for(var i=0; i < 10; i++) {
			var str='<tr>'
		        	+'<td class="input">'+ i +'</td>'
		                +'<td class="gm"><span>歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名</span></td>'
		            	+'<td class="gx"><span><a href="#" onclick="getlist();">歌星歌星歌星歌星歌星歌星</a></span></td>'
		            	+'<td class="mp3"><span><a href="">mp3</a></span></td>'
		            	+'<td class="mv"><span><a href="">mv</a></span></td>'
		            	+'<td class="ls"><span><a href="">ls</a></span></td>'
		        	+'</tr>';
        		$("#songList").append(str);
        		str = null;
        	}
        }
</script>
</html>

每次"点击装载数据"链接,能在任务管理器看到此IE进程的内存加了500K,请高手看看,看看怎么解决

jquery.rar (14.1 KB)
描述: jquery.js文件
下载次数: 61

分享到：

记录JXTA基础

2008-08-20 14:25
浏览 7713
评论(23)
论坛回复 / 浏览 (23 / 17670)
查看更多

23 楼 orcl_zhang 2009-04-17

你为什么要不把str声明成jquery对象,加上${}试下

22 楼 xidaboy 2008-09-11

XXX.outerHTML="";
更新

继续努力

21 楼 jljlpch 2008-09-11

remove : function(selector) {// 根据selector除去元素，防内存泄露
if (!selector || jQuery.filter(selector, [this]).r.length) {
// Prevent memory leaks this是指dom元素
jQuery("*", this).add([this]).each(function() {
jQuery.event.remove(this);
jQuery.removeData(this);
});
if(jQuery.browser.msie) this.parentNode.innerHTML="";//加上这句话应该会好一点。
else if (this.parentNode) this.parentNode.removeChild(this);
}
},

20 楼 xidaboy 2008-09-11

jljlpch 写道

jQuery.fn.removeNode = function(){
            var d;
            return function(){
                if(this[0] && this[0].tagName != 'BODY'){
                    d = d || document.createElement('div');
                    d.appendChild(this[0]);
                    d.innerHTML = '';
                }
            }
        }();
先注册removeNode
之后再通过$('div').removeNode();就可以了。
不过没有清除与之相关的事件和expando中加入的data.
还是不完善。
Ext中的也是很有问题。

============================================
是的,我目前的也是清理的不是很干净

XXX.innerHTML=""
大家思路都是一样的

19 楼 jljlpch 2008-09-10

18 楼 xidaboy 2008-09-10

innetHTML='' 目前来看是最有效果的处理方式

不过我现在碰到个问题

比如$(BODY).append('<DIV>XXX</DIV>');

我还没想好 <DIV>XXX</DIV> 怎么清理起来比较方便

17 楼 unifly 2008-09-10

还是ext来的实在，注意内存泄露问题；
据我观察jquery和prototype都没有做innetHTML=''处理……

16 楼 ayeah 2008-09-09

jquery要浏览器释放内存，好像只能用empty()和remove()来减少dom的数目。。。

15 楼 clingingboy 2008-09-08

浏览器本身有问题，只能期待解析javascript的速度变快.当然我们的写法也是会有问题的.

14 楼 lydawen 2008-08-30

zhanjianhua 写道

ayeah 写道

搞javascript这么高层的东西还要研究内存回收？

当将IE嵌入其他客户端的时候就要关注这方面了,不然用户看到这个客户端的内存会越来越多

这个确实，我们也是将ie放到一个dll里给另一个厂商调用，ie访问我们一个web应用，里面用ajax生成树，xml来传送数据，我明显感觉到了速度太慢~。。。。
还好我们是做成dll，他们也看不出来到底是谁的问题

13 楼 python 2008-08-26

以前遇到过,ext2.0之前版本多刷几次内存占用就会直线上升,2.0后没试过.

LZ可看看这个:
http://msdn2.microsoft.com/en-us/library/bb250448.aspx E文
http://birdshome.cnblogs.com/archive/2006/05/28/IE_MemoryLeak.html 中文

12 楼 jljlpch 2008-08-26

加上
         document.getElementById("songList").innerHTML="";

在function getList() { 之后
就可以释放这部分内存。我试了一下。

Ext就是这样做的。

11 楼 zhanjianhua 2008-08-26

jljlpch 写道

这里为什么会出现内存问题呢？

1. 递归的removeChild貌似可以解决问题？那么也就是说，之所以没有被回收，是因为下面这些node之间存在引用？
我估计是不应该在<table><tbody></tbody></table>中间直接嵌套表格啊。这样应该会存有引用。

如有不对的地方，请多多指教。这里仅仅只是技术的交流以。

我试过将<table><tbody></tbody></table>改成<div></div>,还是存在这个问题,

我又试了不使用jquery.js,将$("#songList").append(str); 改成 document.getElementById("songList").innerHTML=str;
发现节点没有增加的,内存从每次增加500K变成了70K左右,这种情况是不是算正常了?这70K的内存新增是IE浏览器本身存在的内存没有回收问题还是JS内存没释放,还请知道的给解答一下,

以下是我用来测试的例子

<html>
<head>
</head>
<body>
<div id="songList">
</div>
<a href="#" onclick="getList()">点击装载数据</a>
</body>
<script type="text/javascript">
        function getList() {
        	var str=""
        	for(var i=0; i < 10; i++) {
			 str+='歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名歌名';
        		
        	}
        	document.getElementById("songList").innerHTML=str;
        	str = null;
        }
</script>
</html>

这种情况下点"点击装载数据",IE内存也会新增,我用的浏览器是IE6

10 楼 zhanjianhua 2008-08-26

ayeah 写道

搞javascript这么高层的东西还要研究内存回收？

当将IE嵌入其他客户端的时候就要关注这方面了,不然用户看到这个客户端的内存会越来越多

9 楼 srdrm 2008-08-24

严重关注这贴。同时我也想说，IE内存泄露很严重，本来我以为FF3没事，有一次发现了FF3也很成问题。就是我有一个页面是 frameset的，里面有一帧是不断地 refresh，是用 meta 头实现的。我打开这页面后没关，过了一段时间感觉不对劲一看内存，FF3占了3百多兆。

IE7在用了一段时间后，就算把所有的选项卡关了，内存也一直占用着。很恐怖

8 楼 ayeah 2008-08-23

搞javascript这么高层的东西还要研究内存回收？

7 楼 jljlpch 2008-08-21

楼上没有仔细看这文章吧和其评论吧
http://fins.iteye.com/blog/172263

removeNode在IE中只是在remove元素的子节点可能会有点问题
removeChild就不一定吗？
就算是一定吧，如果每个子元素只有没有嵌套的子元素呢？
removechild可以除掉。
jquery就是采用这个循环的方式每个都去除了。

注意事件handler会阻止回收，所以要先清干净。

ms的论坛上对此问题的帖子：http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=2840253&SiteID=1

jquery也对每个后代元素都做到了。

正确使用，使用jquery一般不会出现内存问题。

这里为什么会出现内存问题呢？

1. 递归的removeChild貌似可以解决问题？那么也就是说，之所以没有被回收，是因为下面这些node之间存在引用？
我估计是不应该在<table><tbody></tbody></table>中间直接嵌套表格啊。这样应该会存有引用。

如有不对的地方，请多多指教。这里仅仅只是技术的交流以。

6 楼 oznyang 2008-08-21

jljlpch 写道

按道理不应该出现内存的问题

建议
1、到FF中去试一下，看看是不是也会出现这样的情况？
2、把<tbody>去掉，把id="songList"写在<table>中试一下？

关于上楼说的Ext的做法，只不过它的实现起来更方便，这种做法能不能完全释放内存也是个问题。

jquery是对每一个后代元素都进行了
jQuery.event.remove(this);
jQuery.removeData(this);
this.parentNode.removeChild(this);

不应该会出现内存的问题。

建议你先研究下fins这篇文章：http://fins.iteye.com/blog/172891
再下结论

5 楼 jljlpch 2008-08-21

你的这种用法是有问题的
因为你的str是string ,
jquery会自动加上<table><tbody></tbody></table>
生成的html:
就

table cellpadding="0" cellspacing="0">
<tbody id="songList">

<table><tbody>
.......

</tbody></table>

</tbody>
</table>

4 楼 jljlpch 2008-08-21

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论