iframe如何动态创建及释放其所占内存


Posted in Javascript onSeptember 03, 2014

最近参与一个项目的开发,由于项目是基于浏览器的胖客户端(RIA)应用程序,页面中大量调用iframe。后期测试发现浏览器内存一直居高不下,而且打开iframe页面越多内存占用越大,在IE系列浏览器中尤其明显。所有打开的iframe页面即使关闭了,内存使用也没有明显的下降,IE浏览器在内存占用达到400M左右就变得很卡。分析发现是iframe没有释放造成的,于是对所有已关闭的iframe所占用的内存进行释放,虽然不能完全释放,但是iframe内存占用量不会一直增长,整个应用内存使用量控制在150M左右。

/** 
* 动态创建iframe 
* @param dom 创建iframe的容器,即在dom中创建iframe。dom可以是div、span或者其他标签。 
* @param src iframe中打开的网页路径 
* @param onload iframe加载完后触发该事件,可以为空 
* @return 返回创建的iframe对象 
*/ 
function createIframe(dom, src, onload){ 
//在document中创建iframe 
var iframe = document.createElement("iframe"); 

//设置iframe的样式 
iframe.style.width = '100%'; 
iframe.style.height = '100%'; 
iframe.style.margin = '0'; 
iframe.style.padding = '0'; 
iframe.style.overflow = 'hidden'; 
iframe.style.border = 'none'; 

//绑定iframe的onload事件 
if(onload && Object.prototype.toString.call(onload) === '[object Function]'){ 
if(iframe.attachEvent){ 
iframe.attachEvent('onload', onload); 
}else if(iframe.addEventListener){ 
iframe.addEventListener('load', onload); 
}else{ 
iframe.onload = onload; 
} 
} 

iframe.src = src; 
//把iframe加载到dom下面 
dom.appendChild(iframe); 
return iframe; 
} 

/** 
* 销毁iframe,释放iframe所占用的内存。 
* @param iframe 需要销毁的iframe对象 
*/ 
function destroyIframe(iframe){ 
//把iframe指向空白页面,这样可以释放大部分内存。 
iframe.src = 'about:blank'; 
try{ 
iframe.contentWindow.document.write(''); 
iframe.contentWindow.document.clear(); 
}catch(e){} 
//把iframe从页面移除 
iframe.parentNode.removeChild(iframe); 
}
Javascript 相关文章推荐
JavaScript 设计模式学习 Factory
Jul 29 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
js实现弹窗效果
Aug 09 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 #Javascript
jquery制作select列表双向选择示例代码
Sep 02 #Javascript
一个获取第n个元素节点的js函数
Sep 02 #Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 #Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 #Javascript
JavaScript判断文件上传类型的方法
Sep 02 #Javascript
JavaScript中九种常用排序算法
Sep 02 #Javascript
You might like
VOLVO车载收音机
2021/03/02 无线电
遭遇php的in_array低性能问题
2013/09/17 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
使用Python生成随机密码的示例分享
2016/02/18 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
2014年个人债务授权委托书范本
2014/09/22 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
优秀校长事迹材料
2014/12/24 职场文书
自我工作评价范文
2015/03/06 职场文书
计划生育工作总结2015
2015/04/03 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
golang为什么要统一错误处理
2022/04/03 Golang
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL