谈iframe内存释放问题（转载）

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量8k 收藏
点赞数
文章标签： iframe function javascript button xhtml html
(转载)随着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
L_立方
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iframe如何动态创建及释放其所占内存
09-04
一个项目后期测试发现浏览器内存一直居高不下，而且打开iframe页面越多内存占用越大，在IE系列浏览器中尤其明显，下面与大家分享下iframe动态创建及释放内存
iframe动态创建及释放内存
达拉斯母牛
09-02 9529
最近参与一个项目的开发，由于项目是基于浏览器的胖客户端（RIA）应用程序，页面中大量调用iframe。后期测试发现浏览器内存一直居高不下，而且打开iframe页面越多内存占用越大，在IE系列浏览器中尤其明显。所有打开的iframe页面即使关闭了，内存使用也没有明显的下降，IE浏览器在内存占用达到400M左右就变得很卡。分析发现是iframe没有释放造成的，于是对所有已关闭的iframe所占用的内存
Electron开发遇到的各种坑
Emma____的博客
05-18 1881
Electron开发遇到的各种坑 文章目录Electron开发遇到的各种坑前言一、Electron项目嵌入iframe页面，报错：SyntaxError: Unexpected token import二、Electron项目打包白屏三、Electron打包后应用闪退 前言 要被Electron各种版本问题折磨死了😭 每隔一段时间，就会遇到一个或新或旧的坑 年纪大了脑子不太好🤦‍♀️就还是记下来吧 一、Electron项目嵌入iframe页面，报错：SyntaxError: Unexpected tok
关于iframe标签的用法
weixin_48391812的博客
12-20 316
关于iframe标签用法
Electron iframe报错Refused to display ‘**‘ in a frame because it set ‘X-Frame-Options‘ to ‘sameorigin‘
热门推荐
youyudexiaowangzi的专栏
09-11 1万+
Electron中试用iframe标签，访问https://www.baidu.com/结果iframe标签显示空白，并且报错 :9080/#/:1 Refused to display 'https://www.baidu.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. 大意已同源策略的限制，可以通过服务器端的配置允许iframe的访问，但是如果访问第三方的url，就无法控制了，electron中可以通过web.
动态生成 iframe；销毁 iframe,释放内存
qq_41737172的博客
07-01 3568
动态生成 iframe function createIframe(){ var iframe = document.createElement(“iframe”); iframe.style.width = ‘100%’; iframe.style.height = ‘100%’; iframe.style.margin = ‘0’; iframe.style.padding = ‘0’; iframe.style.overflow = ‘hidden’; iframe.style.border = ‘n
关于关闭TAB，IFRAME占用的内存不能释放问题
KiTong的专栏
03-05 444
使用TAB时注意，如果TAB是引用IFRAME，关闭TAB时IFRAME不会被销毁从而导致内存不能释放，大量使用TAB+IFRAME容易导致内存溢出，所以使用TAB时，一定要把jsUtil.js引用到页面上   $.fn.panel.defaults.onBeforeDestroy = function() {/* 回收内存 */ var frame = $('iframe', this...
谷歌浏览器部分iframe页面无法打开，跨域问题
xcagy-国际性的文档记录中心
03-30 6005
以后通过其他web应用使用iframe标签嵌入永洪链接的集成方式可以选择下面任意一种解决方案。 1.谷歌浏览器版本Chrome 79 及以下版本，嵌入URL无问题 2.同一个域名，嵌入无问题 3.Chrome或者edge浏览器打开新标签页，地址栏中分别输入： chrome://flags/#same-site-by-default-cookies回车后第一条设置为disabled chrome://flags/#cookies-without-same-site-must-be-secure回车后第一条设置
Linux服务器查看内存使用情况
爱琴孩的博客
09-28 1093
前言 在日常开发或者生产环境，我们经常需要查看linux服务的内存使用情况，所以能熟练敲出命令能便于我们快速定位问题，这里来和大家一起学习linux的常用查看内存命令。 free命令 free命令显示系统使用和空闲的内存情况，包括物理内存、交互区内存(swap)和内核缓冲区内存。 很清晰明白的显示出了总内存多少，已使用多少，还剩下多少。这里可以看到Swap的used已使用了811Mb，服务器上跑了一个下载音频的进程，物理内存已经不够用了，所以从磁盘中虚拟出一部分的内存。当然我们可以使用free.
IE浏览器IFrame对象内存不释放问题解决方法
09-04
IFrame对象占用的内存资源在窗体关闭后不会释放。弹出关闭反复多次后，IE浏览器内存占用可超过数百M，严重时IE浏览器报错
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
10-24
主要介绍了IE下使用jQuery重置iframe地址时内存泄露问题解决办法,需要的朋友可以参考下
关闭easyui 的tab 释放iframe的内存
07-04
关闭easyui的tabs释放iframe的内存，
初探 Electron - 理论篇
哲
01-16 5154
转载自：http://jartto.wang/2018/01/03/first-exploration-electron/ 提起构建桌面应用，最先想到的肯定是 NW.js ，但却一直不温不火。直到 Electron 的出现，将这一切推向了巅峰，前端的触手伸向了更为广阔的系统应用。 一、Electron 是什么？ Electron 是由 Github 开发，用 HTML，CSS
jQuery EasyUI Tabs关闭Tab时不能完全释放内存解决方法
weixin_30750335的博客
01-11 260
EasyUI的Tabs，如果你在Tab中使用了<iframe>显示Tab页面内容，在关闭Tab后，iframe所占用的内存并不能得到释放，直到浏览器关闭。当Tab操作得越多，内存占用就越大，随时都会令浏览器内存溢出，你就不得不希望能通过限制Tab的打开数量来改善这种状况。但要注意，关闭后的Tab并没有释放iframe所占用的内存，只是简单地限制同时打开的Tab数量效果似乎是太理想的。很...
正确释放iframe的方法
JUST DO IT.
04-24 4196
var panel=mainForm.tabPanel.add({             region : 'center',             title : 'xxxxxx',             margins : '0 3 3 0',             id : id,             align : 'center',             htm
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 324
注释很详细，直接上代码……
销毁iframe释放内存
06-09
销毁 iframe 释放内存的方法有以下几种： 1. 从 DOM 中移除 iframe 元素：通过调用 `iframe.parentNode.removeChild(iframe)` 方法将 iframe 元素从 DOM 中移除，可以释放 iframe 占用的内存。 2. 将 iframe 的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值