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 15 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
JavaScript实现世界各地时间显示
Sep 07 Javascript
浅谈es6中的元编程
Dec 01 Javascript
JS Object构造函数之Object.freeze
Apr 28 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
Python字符串详细介绍
2015/05/09 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
医科大学生的自我评价
2013/12/04 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
大学四年个人总结
2015/03/03 职场文书
廉洁自律证明
2015/06/24 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书