최근 프로젝트 개발에 참여했습니다. 해당 프로젝트는 브라우저 기반 리치 클라이언트(RIA) 애플리케이션이므로 페이지에서 많은 수의 iframe이 호출됩니다. 이후 테스트에서는 브라우저 메모리가 여전히 높은 것으로 나타났으며, 특히 IE 시리즈 브라우저에서 iframe 페이지가 더 많이 열릴수록 메모리 사용량이 더 많아지는 것으로 나타났습니다. 열려 있는 iframe 페이지를 모두 닫아도 메모리 사용량이 약 400M에 도달하면 IE 브라우저가 크게 중단되지 않습니다. 분석 결과, 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); }