jquery 结合iframe造成内存泄露

最新推荐文章于 2020-09-28 22:50:55 发布

iteye_3489

最新推荐文章于 2020-09-28 22:50:55 发布

阅读量451

点赞数

分类专栏： jQuery 文章标签： jquery iframe ViewUI

本文链接：https://blog.csdn.net/iteye_3489/article/details/82172088

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

系统通过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 οnlοad="clickMe()">
	<input type="button" value="ces" id="btn"   οnclick="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>

iteye_3489

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 结合iframe造成内存泄露

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

扫一扫

专栏目录