- 浏览: 143780 次
- 性别:
- 来自: 福建
文章分类
最新评论
-
caibinghong:
Ahua772 写道非常好,谢谢了,但是运行的图片怎么没有加载 ...
用于WebKit的CSS诀窍 -
Ahua772:
非常好,谢谢了,但是运行的图片怎么没有加载出来呢
用于WebKit的CSS诀窍 -
caibinghong:
呃是一个方法,现在改过来了,当时考的时候没有改!现在最底层是i ...
关于innerHTML 赋值问题 -
jayrao5566:
js的正确写法不是 .innerHTML = '<op ...
关于innerHTML 赋值问题 -
caibinghong:
在JQ与EXT里都解决的挺好的。http://caibingh ...
关于innerHTML 赋值问题
(转载)随着Ajax的发展,使用javascript的RIA应用越来越多,用户在同一页面中驻留的时间越来越长,内存泄露和内存占用问题越来越值得RIA开发者的注意,当RIA应用中内存得不到合理的释放,内存使用量会持续上涨,造成RIA应用反应变慢甚至会造成用户浏览器崩溃。虽然这种问题很少显现,但并不是说明应用中不存在这种问题,只不过这些问题在用户页面跳转和关闭浏览器时被掩盖掉,当我们RIA应用要用户一直在同一页面中操作时,这些问题就会显现出来,webQQ(http://web2.qq.com/)正是这样一个典型的应用。在这些问题中比较显著的一个就是iframe的内存泄露问题,由于iframe的引用页会占用相对大量的内存,如果iframe得不到释放,内存会明显的增长。
在webQQ中,QQ空间、QQ邮箱、腾讯微博等都是通过iframe的方式引入的,而这些引用都是可关闭的,如何做到关闭时释放iframe和引用页所占用的内存?下面通过一个例子来看看,会出现什么问题和如何解决这些问题。
问题1:
Html代码
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>kjah.iteye.com</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
$=function(s){return document.getElementById(s)}
window.onload=function(){
var t=[];
var btn1=$('btn1'),btn2=$('btn2'),btn3=$('btn3');
btn1.onclick=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.onclick=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.onload=function(){
//var t=[];
var btn1=$('btn1'),btn2=$('btn2'),btn3=$('btn3');
btn1.onclick=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.onclick=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代码
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>kjah.iteye.com</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
$=function(s){return document.getElementById(s)}
window.onload=function(){
var t=[];
var btn1=$('btn1'),btn2=$('btn2'),btn3=$('btn3');
btn1.onclick=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.onclick=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>
发表评论
-
gulp独立分文件夹打包
2018-12-27 09:04 1445dazi.91uu.net 是如何打包资源文件呢。 基本的 ... -
定义文档兼容性,让IE按指定的版本解析我们的页面
2013-10-19 11:00 839使用文档兼容性的方法比较容易,就是在我们要反馈给客户端的HT ... -
js 删除数组几种方法
2013-09-20 22:40 784var arr=['a','b ... -
减少图片请求,分批加载图片
2013-09-14 09:35 1211var lazyLoad = { Init: ... -
flash重复请求加载问题
2013-09-07 10:55 682flash重复请求加载问题 当一个div里头放一个f ... -
新一代 javascript 模板引擎 artTemplate ,使用中的问题
2013-09-06 15:44 1124artTemplate 新一代 javascript ... -
jQuery.event自定义事件机制-jQuery.event.special范例
2013-08-16 17:19 772什么时候要用到自定义函数?有些浏览器并不兼容某类型的事件, ... -
javascript对数组的操作
2013-07-30 14:32 7811. shift:删除原数组第一项,并返回删除元素的值;如 ... -
web应用的优化规则
2012-12-20 11:03 610中文 英文 1、 减少http请求 1、M ... -
如何提高网页的效率(上篇)——提高网页效率的14条准则
2012-12-20 10:29 613如何提高网页的效率(上篇)——提高网页效率的14条准则 ... -
nodeType常量与dom操作方法
2012-11-27 10:55 761接口 nodeType常量 ... -
responseXML为空?
2012-11-14 12:00 557responseXML为空? 这个问题困住我一个月多, ... -
javascript 面向对象写法
2012-07-15 22:58 795//原型方法 function ClassA(){ } C ... -
javascript 验证 国际格式 电话号码
2012-07-03 15:38 0如,中国国际代号是0086,我们要让外国人直接和我们联系表述如 ... -
使用Fiddler提高前端工作效率 (实例篇)
2012-06-08 08:54 837在上一篇(使用Fiddler提高前端工作效率 (介绍篇) ... -
使用Fiddler提高前端工作效率 (介绍篇)
2012-06-08 08:54 840http://www.kuqin.com/webp ... -
CSS实现星状评分效果 – CSS Star Rating
2012-05-17 11:32 2362CSS实现星状评分效果 – CSS Star Ratin ... -
移动平台WEB前端开发技巧汇总
2012-05-17 11:29 0原名《移动平台3G手机网站前端开发布局技巧汇总》,由武方 ... -
javascript 中的protoype的解释
2012-04-17 09:53 938JavaScript prototype 的深度探索 ... -
前端技术系列课程(No.4) – 深入学习JavaScript语言
2012-04-16 08:34 777作为系列课程的第三讲,函谷担任此课的讲师,风趣幽默的 ...
相关推荐
Iframe内存泄露分析,Iframe内存泄露分析
分析发现是iframe没有释放造成的,于是对所有已关闭的iframe所占用的内存进行释放,虽然不能完全释放,但是iframe内存占用量不会一直增长,整个应用内存使用量控制在150M左右。 /** * 动态创建iframe * @param dom...
IFrame对象占用的内存资源在窗体关闭后不会释放。弹出关闭反复多次后,IE浏览器内存占用可超过数百M,严重时IE浏览器报错
关闭easyui的tabs释放iframe的内存,
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
解决iframe去边框问题,一级边框设置的一些知识!
主要处理javascript对iframe框架的处理
解决下拉菜单被iframe遮住问题吗,
该文档介绍了vue和普通web页面中iframe实现跨域的解决方案,解决了主页面中无法调用iframe方法的问题
iframe 跨域访问session问题解决方法
iframe跨域问题:Uncaught DOMException Blocked a frame with origin解决方法
这是一个解决fixed在iframe中失效的解决案例,只要把文件放到编辑器中打开即可看到效果
它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域认证。 提供了一系列的页面大小的计算方法来支持复杂的CSS布局。 检测修改DOM...
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
主要介绍了IE下使用jQuery重置iframe地址时内存泄露问题解决办法,需要的朋友可以参考下
NULL 博文链接:https://gadfly80.iteye.com/blog/1162303
解决使用tab布局过程中页面多次加载的问题 如果在使用easyui过程中,你使用了easyui 的tab布局,在tab布局的内容上使用的不是content,而是iframe,那么你的页面有可能多次加载了,这篇文章帮你解决问题
首先在父页面的javascript给定义一个window.name,并赋予一个字符串值,如window.name="test",其中赋予的字符串值可以随意定义,然后在Iframe页面的Form 标签中定义target属性,并且其值也必须与之前定义的window....