iframe如何动态创建及释放其所占内存

(编辑:jimmy 日期: 2026/4/30 浏览:2)

最近参与一个项目的开发,由于项目是基于浏览器的胖客户端(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); 
}

一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。