jquery 组合iframe造成内存泄露 _Web前端

jquery 结合iframe造成内存泄露

系统通过iframe载入一个子页面，来模拟窗口、多页面等。系统中使用了大量js代码，为简化操作，使用了jQuery框架，使用一段时间后，发现内存泄漏很严重。尤其是页面回传后，内存消耗更是直线上升，为此，我通过各种办法防止内存泄漏，但测试结果却发现，导致内存泄漏的罪魁祸首居然是jquery!

测试方法如下：

首先是一个jq_frame.html页面

<html>
<head>
<title>jQuery 的 frame.html</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script>	
	$(function(){
		$('a').click(function(){
			$(this).attr('href','jq_main.html');
		});
	});
	
</script>
</head>
<body>	
	<div style="border:1px solid red; width:200px;height:200px;display:inline;">
		<a href="main.html"  target="content" >click me!!!</a>
	</div>
	<iframe name="content" id="content" src="jq_main.html" />
</body>
</html>

?在其中嵌入iframe引用jq_main.html,嵌入的页面代码如下：

<html>
<head>
<title>jQuery的main.html</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
	alert('click me!');
	
	$('#btn').click(function(){
		alert('click me!');
	});
});
</script>
</head>

<body>
	<input type="button" value="ces" id="btn" >
</body>
</html>

在sIEve中测试，自动刷新并没有内存泄露，但手动去触发则内存泄露比较严重。

如果将jQuery代码换成普通的javascript代码，则不会出现内存泄露的情况。测试页面代码如下:

<html>
<head>
<title>javascript的frame.html</title>
</head>
<body>	
	<div style="border:1px solid red; width:200px;height:200px;display:inline;">
		<a href="main.html"  target="content" >click me!!!</a>
	</div>
	<iframe name="content" id="content" src="main.html" />
</body>
</html>

<html>
<head>
<title>javascript的main.html</title>
<script type="text/javascript">
        function clickMe(){
	alert('click me!!');
   }
</script>
</head>
<body onload="clickMe()">
	<input type="button" value="ces" id="btn"   onclick="clickMe()">
</body>
</html>

这里貌似内存泄露应归罪于jQuery，但页面独立使用jQuery是不会存在此类问题的。比如下面的独立页面。代码如下：

<html>   
    <head>   
        <meta content="text/html;charset=utf-8" http-equiv="content-type" />   
        <script src="jquery-1.4.4.min.js" type="text/javascript">   
        </script>   
        <style type="text/css">   
            #inner {    
                margin:0 auto;    
                width:150px;    
                height:50px;    
                border:1px solid green;    
            }    
        </style>   
        <script type="text/javascript">   
        $(function(){    
            $("#inner").click(function(){                   
				$('#test').append($('<p>test001</p>'));
                //$("#test").empty();    
            });    
                
        });    
        </script>   
        <title>jQuery内存泄露测试</title>   
    </head>   
    <body>   
        <div style="height:500px;width:500px;border:1px solid red;padding-top:100px;" id="test">   
            <div id="inner">click to remove me</div>   
        </div>        
    </body>   
</html>

1 楼 benjaminz 2011-11-01

请问，您最后解决这个问题了吗？就是不使用原生javascript，只使用jquery的时候

2 楼 hbxflihua 2011-11-01

问题可以这样解决：
在使用iframe时先将iframe对象做清空处理。
参考代码如下：
function openLM(url){
var el = document.getElementById('contentshow'),
        iframe = el.contentWindow;
    if(el){
        el.src = 'about:blank';
        try{
            iframe.document.write('');
            iframe.document.clear();
        }catch(e){};
        //以上可以清除大部分的内存和文档节点记录数了
    }
document.getElementById('contentshow').src = url;
}

3 楼 feipigzi 2012-07-19

benjaminz 写道

请问，您最后解决这个问题了吗？就是不使用原生javascript，只使用jquery的时候

http://my.oschina.net/jsan/blog/11169