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 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php存储过程调用实例代码
2013/02/03 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
PHP getName()函数讲解
2019/02/03 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
Ionic快速安装教程
2016/06/03 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python猜数字算法题详解
2020/03/01 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
采购文员岗位职责
2013/11/20 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
简历里的自我评价范文
2014/02/24 职场文书
个人剖析材料范文
2014/09/30 职场文书
公司离职证明标准范本
2014/10/05 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL