谈iframe内存释放问题(转载)

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

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

问题1:
Html代码
<!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>   


问题2

Html代码

<!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还是没有释放,但是它所占用的内存已大部分被释放掉。
Html代码

<!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>  
 
uhttp://liweitsky.iteye.com/blog/848961
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值