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继承学习笔记【新手必看】
May 10 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
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在字符断点处截断文字的实现代码
2011/04/21 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
PHP实现的简单缓存类
2015/07/29 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
bootstrap table小案例
2016/10/21 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python中的默认参数实例分析
2018/01/29 Python
简单实现Python爬取网络图片
2018/04/01 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Python pandas用法最全整理
2019/08/04 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
python中remove函数的踩坑记录
2021/01/04 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
《愚公移山》教学反思
2014/02/20 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS