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 asp.net 用json格式返回自定义对象
Apr 07 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
webpack4从0搭建组件库的实现
Nov 29 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 debug 安装技巧
2011/04/30 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Python callable()函数用法实例分析
2018/03/17 Python
python cs架构实现简单文件传输
2020/03/20 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
技术副厂长岗位职责
2013/12/26 职场文书
平安建设实施方案
2014/03/19 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
《自己去吧》教学反思
2016/02/16 职场文书