jquery 结合iframe造成内存泄露
程序员文章站
2022-07-13 08:57:52
...
系统通过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>
下一篇: 微软为Office开源技术提供支持