`
caibinghong
  • 浏览: 151089 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

谈iframe内存释放问题（转载）

 
阅读更多

(转载)随着Ajax的发展，使用javascript的RIA应用越来越多，用户在同一页面中驻留的时间越来越长，内存泄露和内存占用问题越来越值得RIA开发者的注意，当RIA应用中内存得不到合理的释放，内存使用量会持续上涨，造成RIA应用反应变慢甚至会造成用户浏览器崩溃。虽然这种问题很少显现，但并不是说明应用中不存在这种问题，只不过这些问题在用户页面跳转和关闭浏览器时被掩盖掉，当我们RIA应用要用户一直在同一页面中操作时，这些问题就会显现出来，webQQ(http://web2.qq.com/)正是这样一个典型的应用。在这些问题中比较显著的一个就是iframe的内存泄露问题，由于iframe的引用页会占用相对大量的内存，如果iframe得不到释放，内存会明显的增长。 

在webQQ中，QQ空间、QQ邮箱、腾讯微博等都是通过iframe的方式引入的，而这些引用都是可关闭的，如何做到关闭时释放iframe和引用页所占用的内存？下面通过一个例子来看看，会出现什么问题和如何解决这些问题。 

问题1： 
Html代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <HEAD>  
  <TITLE>kjah.iteye.com</TITLE>  
    <SCRIPT LANGUAGE="JavaScript">  
    <!--  
        $=function(s){return document.getElementById(s)}  
        window.onload=function(){  
            var t=[];  
            var btn1=$('btn1'),btn2=$('btn2'),btn3=$('btn3');  
            btn1.onclick=function(){  
                if($('ifm1'))return;  
                var c=$('content');  
                var ifm=document.createElement('iframe');  
                ifm.src='http://www.sohu.com';  
                ifm.id='ifm1';  
                c.appendChild(ifm);  
                t.push(ifm);  
            }  
            btn2.onclick=function(){  
                var ifm=$('ifm1');  
                ifm.parentNode.removeChild(ifm);  
            }  
        }  
    //-->  
    </SCRIPT>  
 </HEAD>  
 <BODY>  
      <input id="btn1" type="button" value="打开"/>   
      <input id="btn2" type="button" value="关闭"/>  
      <div id="content"></div>  
      <span style="color:#eee">http://kjah.iteye.com</span>  
 </BODY>  
</HTML>   


问题2 

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <HEAD>  
  <TITLE>kjah.iteye.com</TITLE>  
    <SCRIPT LANGUAGE="JavaScript">  
    <!--  
        $=function(s){return document.getElementById(s)}  
        window.onload=function(){  
            //var t=[];  
            var btn1=$('btn1'),btn2=$('btn2'),btn3=$('btn3');  
            btn1.onclick=function(){  
                if($('ifm1'))return;  
                var c=$('content');  
                var ifm=document.createElement('iframe');  
                ifm.src='http://www.sohu.com';  
                ifm.id='ifm1';  
                c.appendChild(ifm);  
                //t.push(ifm);  
            }  
            btn2.onclick=function(){  
                var ifm=$('ifm1');  
                ifm.parentNode.removeChild(ifm);  
            }  
        }  
    //-->  
    </SCRIPT>  
 </HEAD>  
 <BODY>  
      <input id="btn1" type="button" value="打开"/>   
      <input id="btn2" type="button" value="关闭"/>  
      <div id="content"></div>  
      <span style="color:#eee">http://kjah.iteye.com</span>  
 </BODY>  
</HTML>  

 

在较复杂的javascript RIA应用中，由于开发人员技术水平等原因，造成这种不能释放DOM对象的情况很容易发生，查找这些引用非常困难。好在一般的DOM对象占用内存较少，即使不能释放（这里不包括内存泄露的对象）内存增长也不会很明显。在这个例子中，把数组t和相关的处理去掉，再来看内存的增长情况，发现多次打开iframe不会出现内存的持续增长，但在关闭时也没有得到大量释放，只是在再次打开iframe时，内存没有继续增长，感觉是把iframe给缓存住了。 



解决办法 
如何解决iframe的内存占用与内存增长的情况？不管是iframe引用无法释放的问题，还是iframe缓存的问题，通过把iframe对象的src置空，释放iframec所引用的页面内容是一个行之有效的办法，虽然iframe还是没有释放，但是它所占用的内存已大部分被释放掉。 
Html代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <HEAD>  
  <TITLE>kjah.iteye.com</TITLE>  
    <SCRIPT LANGUAGE="JavaScript">  
    <!--  
        $=function(s){return document.getElementById(s)}  
        window.onload=function(){  
            var t=[];  
            var btn1=$('btn1'),btn2=$('btn2'),btn3=$('btn3');  
            btn1.onclick=function(){  
                if($('ifm1'))return;  
                var c=$('content');  
                var ifm=document.createElement('iframe');  
                ifm.src='http://www.sohu.com';  
                ifm.id='ifm1';  
                c.appendChild(ifm);  
                t.push(ifm);  
            }  
            btn2.onclick=function(){  
                var ifm=$('ifm1');  
                ifm.src="";  
                ifm.parentNode.removeChild(ifm);  
            }  
        }  
    //-->  
    </SCRIPT>  
 </HEAD>  
 <BODY>  
      <input id="btn1" type="button" value="打开"/>   
      <input id="btn2" type="button" value="关闭"/>  
      <div id="content"></div>  
      <span style="color:#eee">http://kjah.iteye.com</span>  
 </BODY>  
</HTML>  
 
http://liweitsky.iteye.com/blog/848961
分享到：
| CSS 在IE6, IE7 和IE8中的差别
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Iframe内存泄露分析

    Iframe 内存泄露分析是指在使用 Iframe 时，由于互相引用、闭包、跨页面泄漏、伪泄漏等原因，导致浏览器内存泄漏的问题。这种问题在 Ajax 盛行以前并不是什么大问题，因为都是通过页面跳转和刷新来进行与服务端的...

    IE浏览器IFrame对象内存不释放问题解决方法

    总的来说，解决IE浏览器IFrame内存不释放问题的关键在于确保在窗口关闭前正确地清理IFrame对象，这通常涉及到对`src`属性的处理、`contentWindow`的清空以及从DOM中移除IFrame元素。通过编写适当的JavaScript代码并...

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

    本文将探讨如何动态创建`iframe`以及如何有效地释放其占用的内存。 首先，我们来看如何动态创建`iframe`。动态创建`iframe`的方法通常是通过JavaScript来完成的，这样可以在需要时创建，不需要时销毁，以减少不必要...

    关闭easyui 的tab 释放iframe的内存

    ### 关闭EasyUI的Tab并释放Iframe内存的方法 #### 背景介绍 在使用EasyUI框架开发Web应用程序时，经常会用到`Tabs`组件。`Tabs`组件允许用户在一个容器内创建多个标签页，每个标签页可以独立加载不同的内容。其中一...

    iframe跨域常用问题和iframe页面自适应

    本篇文章将深入探讨两个关键知识点：`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念，它限制了浏览器从一个源获取另一个源的资源，以保护用户的安全。当`iframe...

    再谈iframe自适应高度

    "再谈iframe自适应高度"这个主题，关注的是如何使iframe的内容区域根据所加载页面的高度自动调整，以避免滚动条出现或者内容被截断的问题。在网页设计中，尤其是在构建响应式布局时，这是一个非常关键的优化点。 1....

    完美解决iframe跨域问题

    3. **iframe跨域问题**：当iframe加载的页面与包含它的页面不在同一个域时，就会出现跨域问题，导致无法直接通过JavaScript进行通信，如获取iframe内的内容、设置iframe的属性等。 **二、iframe跨域的解决方案** 1...

    iframe去边框问题

    "iframe去边框问题"主要涉及如何去除这些边框，以实现更加整洁、无缝的集成效果。以下是一些关于解决`iframe`边框问题和一级边框设置的知识点： 1. **CSS样式控制**： - `border`: 可以直接使用CSS的`border`属性...

    js处理iframe的系列问题

    通过对上述知识点的学习，我们可以更加灵活地利用JavaScript来处理`iframe`中的各种问题，包括但不限于访问、修改`iframe`内部元素、提交表单、调用方法以及触发事件等。这些技巧对于开发复杂的Web应用来说是非常...

    解决iframe中fixed失效的问题

    在提供的压缩包文件 "iframe中fixed失效问题" 中，可能包含了具体的代码示例或演示页面，你可以直接打开查看这些案例，以更好地理解和应用上述解决方案。实际操作时，需要根据具体项目需求和限制选择合适的方法，...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    然而，`&lt;iframe&gt;`的高度自适应问题常常困扰着开发者，尤其是当`&lt;iframe&gt;`内部的内容动态加载或者变化时，如何让`&lt;iframe&gt;`自动调整其高度以适应内容，而不会导致滚动条溢出或内容被截断，成为了一个常见需求。...

    解决下拉菜单被iframe遮住问题

    在网页设计中，下拉菜单经常用于实现导航或者选项选择，但当这些菜单位于一个`iframe`元素内部时，可能会遇到被`iframe`遮挡的问题。这个问题主要涉及到浏览器的层叠上下文（CSS Z-Index）和`iframe`的渲染机制。...

    iframe兄弟页面相互调用

    在网页开发中，`iframe`（Inline Frame）是一种嵌入式框架，用于在单个HTML文档中嵌入另一个HTML文档。这种技术常被用来实现页面的分层展示、...同时，要时刻注意同源策略和跨域安全问题，确保代码的稳定性和安全性。

    Flex中利用IFrame解决嵌入HTML时Flex组件被遮挡和IFrame被隐藏的问题

    本文将详细讲解如何利用IFrame解决这些问题，特别是针对Flex菜单的遮挡问题。 首先，理解Flex和IFrame的基本概念是必要的。Flex是一种基于ActionScript和MXML的开源框架，用于构建富互联网应用程序（RIA）。而...

    easyui iframe 页面重复加载的问题

    在使用easyui框架开发Web应用时，特别是在使用tab布局的时候，开发者可能会遇到页面内容被放置在iframe中时，页面多次加载的问题。这种情况尤其会在使用easyui的tab布局时发生，因为easyui会默认加载所有tab的内容，...

    vue基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生

    内容概要：以vue2为例，搭建一个...2、使用position: fixed解决iframe的弹窗及遮罩层问题 3、使用requestFullscreen()解决iframe里的全屏问题 4、使用history解决浏览器的后退问题 5、页面刷新，iframe可以加载正确页面

    iframe 跨域解决方法

    然而，由于浏览器的同源策略限制，当`iframe`加载的页面与包含它的页面不在同一个域名下时，就会遇到跨域问题。这篇博客将深入探讨如何解决`iframe`的跨域问题。 首先，理解同源策略是至关重要的。同源策略是浏览器...

    解决双iframe互相刷新进入死循环的问题

    然而，在处理多个iframe交互时，可能会遇到一个棘手的问题——双iframe互相刷新进入死循环。这个问题通常发生在两个或多个iframe之间尝试通过JavaScript互相重载对方，导致无限循环，严重影响用户体验并可能导致...

Magicbox
Global site tag (gtag.js) - Google Analytics