jquery 结合iframe造成内存泄露
程序员文章站
2022-07-13 09:10:19
...
系统通过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>