系统通过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>
分享到：
相关推荐
同时，为了保证性能，需要合理处理事件绑定和解绑，避免内存泄漏和不必要的计算。 **安全性与隐私** 使用iframe时，需要考虑跨域策略（CORS）。由于同源策略的限制，iframe中的内容必须与包含它的页面在同一域下，...
4. **事件绑定和解绑的优化**：`.bind()`, `.unbind()`, `.delegate()`, 和 `.undelegate()` 方法在这一版本中得到了优化，减少了内存泄漏的风险，并提升了事件处理的效率。 5. **插件兼容性**：jQuery 1.6.2确保了...
博客中可能还包括了一些具体的例子、代码片段和解决方法，如使用`console.log()`进行调试、如何避免内存泄漏、以及如何有效地组合使用JavaScript和jQuery等。通过阅读和实践，你可以加深对这两种语言的理解，更好地...
同时，性能分析工具（如ANTS Profiler）可以检测内存泄漏和性能瓶颈，确保应用程序在生产环境中稳定高效。 总之，ASP.NET提供了一系列工具和技术，让开发者能够创建富交互、高性能的Web应用，其中图片预览和在线...
总的来说，`touchpdf-master`压缩包提供了一个前端展示PDF的解决方案，通过解析PDF文件并在前端渲染，结合CSS定制样式和JavaScript实现交互，可以为用户提供无缝的在线阅读体验。在实际项目中，你需要根据具体需求...