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 相关文章推荐
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
express启用https使用小记
May 21 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
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
详解php中serialize()和unserialize()函数
2017/07/08 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
vue 计时器组件的实现代码
2017/09/14 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
JavaScript实现原型封装轮播图
2020/12/27 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python避免死锁方法实例分析
2015/06/04 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
医学检验专业个人求职信范文
2013/12/04 职场文书
文秘专业个人求职信
2013/12/22 职场文书
初中生自我鉴定
2014/02/04 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
毕业实习计划书
2015/01/16 职场文书
大学班长竞选稿
2015/11/20 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
Pandas数据结构之Series的使用
2022/03/31 Python