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实现Sleep暂停功能代码
Sep 03 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
防止文件缓存的js代码
Jan 10 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
js获取域名的方法
Jan 27 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
Javascript作用域和作用域链原理解析
Mar 03 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
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
解放web程序员的输入验证
2006/10/06 Javascript
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
python决策树之C4.5算法详解
2017/12/20 Python
python如何读写json数据
2018/03/21 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Django框架表单操作实例分析
2019/11/04 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
css3的transition属性详解
2014/12/15 HTML / CSS
竞选部门副经理的自荐书范文
2014/02/11 职场文书
班组长竞聘书
2014/03/31 职场文书
综合内勤岗位职责
2014/04/14 职场文书
岗位明星事迹材料
2014/05/18 职场文书
八项规定整改方案
2014/10/01 职场文书
综合管理员岗位职责
2015/02/11 职场文书
安徽导游词
2015/02/12 职场文书
上班迟到检讨书
2015/05/06 职场文书
辅导员学期工作总结
2015/08/14 职场文书
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers