从webQQ谈iframe内存释放问题

最新推荐文章于 2020-09-25 12:29:30 发布

kjah_1

最新推荐文章于 2020-09-25 12:29:30 发布

阅读量139

点赞数

分类专栏： javascript 文章标签： JavaScript QQ XHTML 腾讯浏览器 ViewUI

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

随着Ajax的发展，使用javascript的RIA应用越来越多，用户在同一页面中驻留的时间越来越长，内存泄露和内存占用问题越来越值得RIA开发者的注意，当RIA应用中内存得不到合理的释放，内存使用量会持续上涨，造成RIA应用反应变慢甚至会造成用户浏览器崩溃。虽然这种问题很少显现，但并不是说明应用中不存在这种问题，只不过这些问题在用户页面跳转和关闭浏览器时被掩盖掉，当我们RIA应用要用户一直在同一页面中操作时，这些问题就会显现出来，webQQ(http://web2.qq.com/)正是这样一个典型的应用。在这些问题中比较显著的一个就是iframe的内存泄露问题，由于iframe的引用页会占用相对大量的内存，如果iframe得不到释放，内存会明显的增长。

在webQQ中，QQ空间、QQ邮箱、腾讯微博等都是通过iframe的方式引入的，而这些引用都是可关闭的，如何做到关闭时释放iframe和引用页所占用的内存？下面通过一个例子来看看，会出现什么问题和如何解决这些问题。

问题1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
  <TITLE>kjah.iteye.com</TITLE>
	<SCRIPT LANGUAGE="JavaScript">
	<!--
		$=function(s){return document.getElementById(s)}
		window.οnlοad=function(){
			var t=[];
			var btn1=$('btn1'),btn2=$('btn2'),btn3=$('btn3');
			btn1.οnclick=function(){
				if($('ifm1'))return;
				var c=$('content');
				var ifm=document.createElement('iframe');
				ifm.src='http://www.sohu.com';
				ifm.id='ifm1';
				c.appendChild(ifm);
				t.push(ifm);
			}
			btn2.οnclick=function(){
				var ifm=$('ifm1');
				ifm.parentNode.removeChild(ifm);
			}
		}
	//-->
	</SCRIPT>
 </HEAD>
 <BODY>
	  <input id="btn1" type="button" value="打开"/> 
	  <input id="btn2" type="button" value="关闭"/>
	  <div id="content"></div>
	  <span style="color:#eee">http://kjah.iteye.com</span>
 </BODY>
</HTML>

数组t用来保持那些iframe的引用，模拟发生闭包引用dom对象，造成无法释放的情况。

用windows系统的任务管理器来观察内存使用情况，在打开iframe时内存会增长，而关闭时没有释放，由于之前的实例还被引用，再次打开时，内存会继续增长。以上是在IE下测试的结果，FF有很大好转。

问题2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
  <TITLE>kjah.iteye.com</TITLE>
	<SCRIPT LANGUAGE="JavaScript">
	<!--
		$=function(s){return document.getElementById(s)}
		window.οnlοad=function(){
			//var t=[];
			var btn1=$('btn1'),btn2=$('btn2'),btn3=$('btn3');
			btn1.οnclick=function(){
				if($('ifm1'))return;
				var c=$('content');
				var ifm=document.createElement('iframe');
				ifm.src='http://www.sohu.com';
				ifm.id='ifm1';
				c.appendChild(ifm);
				//t.push(ifm);
			}
			btn2.οnclick=function(){
				var ifm=$('ifm1');
				ifm.parentNode.removeChild(ifm);
			}
		}
	//-->
	</SCRIPT>
 </HEAD>
 <BODY>
	  <input id="btn1" type="button" value="打开"/> 
	  <input id="btn2" type="button" value="关闭"/>
	  <div id="content"></div>
	  <span style="color:#eee">http://kjah.iteye.com</span>
 </BODY>
</HTML>

在较复杂的javascript RIA应用中，由于开发人员技术水平等原因，造成这种不能释放DOM对象的情况很容易发生，查找这些引用非常困难。好在一般的DOM对象占用内存较少，即使不能释放（这里不包括内存泄露的对象）内存增长也不会很明显。在这个例子中，把数组t和相关的处理去掉，再来看内存的增长情况，发现多次打开iframe不会出现内存的持续增长，但在关闭时也没有得到大量释放，只是在再次打开iframe时，内存没有继续增长，感觉是把iframe给缓存住了。

解决办法

如何解决iframe的内存占用与内存增长的情况？不管是iframe引用无法释放的问题，还是iframe缓存的问题，通过把iframe对象的src置空，释放iframec所引用的页面内容是一个行之有效的办法，虽然iframe还是没有释放，但是它所占用的内存已大部分被释放掉。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
  <TITLE>kjah.iteye.com</TITLE>
	<SCRIPT LANGUAGE="JavaScript">
	<!--
		$=function(s){return document.getElementById(s)}
		window.οnlοad=function(){
			var t=[];
			var btn1=$('btn1'),btn2=$('btn2'),btn3=$('btn3');
			btn1.οnclick=function(){
				if($('ifm1'))return;
				var c=$('content');
				var ifm=document.createElement('iframe');
				ifm.src='http://www.sohu.com';
				ifm.id='ifm1';
				c.appendChild(ifm);
				t.push(ifm);
			}
			btn2.οnclick=function(){
				var ifm=$('ifm1');
				ifm.src="";
				ifm.parentNode.removeChild(ifm);
			}
		}
	//-->
	</SCRIPT>
 </HEAD>
 <BODY>
	  <input id="btn1" type="button" value="打开"/> 
	  <input id="btn2" type="button" value="关闭"/>
	  <div id="content"></div>
	  <span style="color:#eee">http://kjah.iteye.com</span>
 </BODY>
</HTML>

通过观察，在移除iframe时，内存占用有一个明显减少。