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 继承详解(一)
Jul 13 Javascript
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
js style动态设置table高度
Oct 21 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
如何优化vue打包文件过大
Apr 13 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递归获取目录内所有文件的实现方法
2016/11/01 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
详解vue 组件注册
2020/11/20 Vue.js
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python中查看文件名和文件路径
2017/03/31 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
八项规定整改方案
2014/02/21 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
机电一体化求职信
2014/03/10 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
python 算法题——快乐数的多种解法
2021/05/27 Python