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

最新推荐文章于 2024-05-11 10:18:51 发布
最新推荐文章于 2024-05-11 10:18:51 发布
阅读量8.1k 收藏
点赞数
文章标签： 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_立方
关注
前端面经汇总一2019oppo前端一面（含问题和答案）
weixin_45561497的博客
04-22 1757
一、2019oppo前端一面 JS中的数据类型： (1)五种基本数据类型： a) String 字符串类型 b) Boolean 布尔类型 c) Number 表示整数和浮点类型 d) undefined 声明了变量但未初始化 e) null 空对象指针，也是对空对象的引用 (2)一种复杂数据类型 Object 是一组属性与方法的集合，属于引用类型。引用类型是一种数据结构。...
【腾讯Bugly干货分享】WKWebView 那些坑
热门推荐
腾讯Bugly的专栏
01-22 2万+
本文来自于腾讯Bugly公众号（weixinBugly），未经作者同意，请勿转载，原文地址：http://mp.weixin.qq.com/s/rhYKLIbXOsUJC_n6dt9UfA导语WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件，用以替代 UIKit 中笨重难用、内存泄漏的 UIWebView, 拥有60fps滚动刷新率、和 safari 相同的 J
iframe如何动态创建及释放其所占内存
09-04
一个项目后期测试发现浏览器内存一直居高不下，而且打开iframe页面越多内存占用越大，在IE系列浏览器中尤其明显，下面与大家分享下iframe动态创建及释放内存
javascript处理iframe内存泄露
djx_6688的博客
12-05 1000
var el = document.getElementById('iframeExamine'),                     iframe = el.contentWindow;                 if (el) {                     el.src = 'about:blank';                     try {       ...
关于iframe内存泄露的问题
jiaLoveQiQi的专栏
05-14 1729
最近项目里总是会出现内存不足的情况，经过研究下载了几个内存泄露测试工具，sIEve,js memory leaks defector，目前正在紧张的研究过程中。。。希望能够有所收获 5.17日，最近几天上网狂搜以及实践了一下，发现普遍的说法是使用iframe确实会导致大量的内存得不到释放 5.21日  最近尝试了各种方法： 1.直接写死一个Iframe,通过js改变src的方
VUE项目中iframe缓存
wdzl5的博客
05-11 1517
以上为查阅资料后,自己实现的,因为走了点弯路,所以自己总结一下记录出来,以记录.
vue 项目中关于iframe页面缓存问题
weixin_45514326的博客
05-20 6208
1.简介 关于ifarem标签一般用于项目内外嵌页面。比如vue中经常会遇到外嵌页面的问题，但是有需求这样的 要求外嵌页面的内容保持缓存 项目中一不小心点他其它页面 再次切换回来 防止页面外嵌页面再次刷新。 2关于使用keep-alive缓存不了iframe界面原因 很多人第一想法就是会使用 keep-alive 去实现组件缓存，但是对iframe标签是行不通的，keepalive作为缓存组件这里不过多介绍，大多用于项目中 标签的嵌套 实现出口视图页面的缓存。项目中可以发现keepalive包裹
Flash CPU 优化
温伟平的博客
07-20 1031
Flash占CPU 优化 收藏 有的网页看起来并不大但打开会很卡，有的网页虽然很长但使用流畅，占用用户电脑的内存与CPU就影响这些。浏览器问题，有各自的浏览器处理内存问题会影响到，但几乎没办法控制得了，Windows上的： 　　IE系列，刷新回收的量不大，但最小化会释放内存，。 　　Firefox2据说也会在最小化回收，可我从没见过最垃圾，用多少是多少，基本不回收。据说prototype的ajax还会引起内存一直增加。 　　Opera最好。一直控制得很好。不存在什么问题。 　　Linux的内存分配机制与Wi
9种常见的前端跨域解决方案（详解）
weixin_30646315的博客
07-07 969
一、什么是跨域？   在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 什么是同源策略？   同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。   同源策略...
认识二进制安全与漏洞攻防技术 （Windows平台）
墨鱼菜鸡
01-14 444
二进制漏洞是指程序存在安全缺陷，导致攻击者恶意构造的数据(如Shellcode)进入程序相关处理代码时，改变程序原定的执行流程，从而实现破坏或获取超出原有的权限。 0Day漏洞 在计算机领域中，0day漏洞通常是指还没有补丁的漏洞，或是已经被少数人发现的，但还没被传播开来，官方还未修复的漏洞，也称为“零日漏洞”或“零时差漏洞”，主要强调即时性。由0day衍生出1day的概念，就是指刚被公开或...
IE浏览器IFrame对象内存不释放问题解决方法
09-04
IFrame对象占用的内存资源在窗体关闭后不会释放。弹出关闭反复多次后，IE浏览器内存占用可超过数百M，严重时IE浏览器报错
iframe动态创建及释放内存
达拉斯母牛
09-02 9647
最近参与一个项目的开发，由于项目是基于浏览器的胖客户端（RIA）应用程序，页面中大量调用iframe。后期测试发现浏览器内存一直居高不下，而且打开iframe页面越多内存占用越大，在IE系列浏览器中尤其明显。所有打开的iframe页面即使关闭了，内存使用也没有明显的下降，IE浏览器在内存占用达到400M左右就变得很卡。分析发现是iframe没有释放造成的，于是对所有已关闭的iframe所占用的内存
[分享] 关于 iframe 内存泄漏问题
weixin_30457065的博客
12-23 240
设置 iframe 的 src 为 'about:blank' 之后，不置为“about:blank”，内存不会释放掉。还必须用 iframe.document.write(''); 这样才能将内容清空，但是这样处理之后任然会有500-1000K左右的内存残留，这就是ie6的iframe bug，动态创建的iframe总会耗费掉一些内存。 1、资源回收 functionclea...
谷歌浏览器内存不足 Chrome浏览器内存释放技巧分享
yisago的博客
06-04 2934
谷歌Chrome浏览器内存占用过高的问题一直困扰着不少使用者，除了少用占用内存的扩展插件及控制打开的标签页数量外，还有不少方法可以解决这一问题!下面小编就来分享一个快速释放Chrome浏览器内存的小技巧，小伙伴们可不要错过了。 方法步骤 在任意标签页使用快捷键Ctrl+D打开添加书签的页面，并点击“更多选项”; 在网址栏中输入“chrome://restart”，名称自拟，将之保存下来; 最后，在感觉Chrome越来越卡时，点击该书签就可以在数秒内释放内存了。 ...
IE项目使用iframe之后内存持续升高的解决办法
cjFrontEnd的博客
10-27 2416
问题背景 最近一年多在做的项目是一个大数据的产品平台, 做一些数据类的产品, 主要是做一些客户的分群筛选, 客户画像, 策略配置之类的功能, 项目使用的技术栈是vue, 项目的一些产品页会被公司的几个其他的平台调用. 出现问题的这个页面是一个用户的画像页, 调用方是业务方坐席的使用平台, 一个运行在IE上的项目, 调用的方式是使用iframe将页面嵌入. 问题的产生 周一我们收到...
关于关闭TAB，IFRAME占用的内存不能释放问题
KiTong的专栏
03-05 500
使用TAB时注意，如果TAB是引用IFRAME，关闭TAB时IFRAME不会被销毁从而导致内存不能释放，大量使用TAB+IFRAME容易导致内存溢出，所以使用TAB时，一定要把jsUtil.js引用到页面上   $.fn.panel.defaults.onBeforeDestroy = function() {/* 回收内存 */ var frame = $('iframe', this...
iframe内存释放问题解决方法：
蜗牛小前的博客
06-25 5085
项目中：var el = ifm_container.querySelector('iframe');// 清除iframe内存空间 function clearIframe(el){ var _iframe = el.contentWindow; if(el){ el.src = 'about:blank'; try{ _i...
iframe内存释放
最新发布
06-13
`<iframe>`标签在HTML中用于嵌入另一个HTML文档，通常用于创建弹出窗口、内容分发或显示来自其他源的数据。当涉及到iframe内存释放时，有几个关键因素： 1. **生命周期管理**：iframe的内容由其源文档管理，不是父页面的一部分。当iframe的内容被重新加载或者其src属性改变时，浏览器会卸载旧的内容并加载新的内容，这通常会释放旧内容的内存。 2. **同源策略**：如果iframe加载的内容来自不同源（比如跨域），浏览器为了安全原因可能会限制内存分配，即使页面没有显式关闭，内存也可能不会持续增长。 3. **手动释放**：JavaScript中没有直接的内存释放机制，对于iframe内的脚本，垃圾回收机制会自动处理不再使用的变量和对象的内存。如果你在脚本中创建了大量对象，记得确保它们不再引用，否则可能会影响内存占用。 4. **关闭和卸载**：当iframe的window对象被设置为null或者父页面调用`iframe.remove()`，浏览器会停止加载iframe，并在页面卸载时释放相关资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值