浏览器中的内存泄露(2)
作者:winter 来源:winter 博客 发布时间:2008-05-03 16:53:00
2.内存泄露的原因
作为一门垃圾回收的语言(注意不是垃圾语言),内存泄露的原因只有一个:引擎的bug(本小节用于休闲、调节气氛)
3.内存泄露的方式
目前发现的可能导致内存泄露的代码有三种:
循环引用
自动类型装箱转换
某些DOM操作
下面具体的来说说内存是如何泄露的
循环引用:这种方式存在于IE6和FF2中(FF3未做测试),当出现了一个含有DOM对象的循环引用时,就会发生内存泄露。
什么是循环引用?首先搞清楚什么是引用,一个对象A的属性被赋值为另一个对象B时,则可以称A引用了B。假如B也引用了A,那么A和B之间构成了循环引用。同样道理 如果能找到A引用B B引用C C又引用A这样一组饮用关系,那么这三个对象构成了循环引用。当一个对象引用自己时,它自己形成了循环引用。注意,在js中变量永远是对象的属性,它可以指向对象,但决不是对象本身。
循环引用很常见,而且通常是无害的,但如果循环引用中包含DOM对象或者ActiveX对象,那么就会发生内存泄露。例子:
var a=document.createElement("div");
var b=new Object();
a.b=b;
b.a=a;
很多情况下循环引用不是这样的明显,下面就是著名的闭包(closure)造成内存泄露的例子,每执行一次函数A()都会产生内存泄露。试试看,根据前面讲的scope对象的知识,能不能找出循环引用?
function A()...{
var a=document.createElement("div");
a.onclick=function()...{
alert("hi");
}
}
A();
OK, 让我们来看看。假设A()执行时创建的作用域对象叫做ScopeA 找到以下引用关系
ScopeA引用DOM对象document.createElement("div");
DOM对象document.createElement("div");引用函数function(){alert("hi")}
函数function(){alert("hi")}引用ScopeA
这样就很清楚了,所谓closure泄露,只不过是几个js特殊对象的循环引用而已。
自动类型装箱转换:这种泄露存在于ie6 ie7中。这是极其匪夷所思的一个bug,看下面代码
var s="lalalalala";
alert(s.length);
这段代码怎么了?看看吧,"lalalalala"已经泄露了。关键问题出在s.length上,我们知道js的类型中,string并非对象,但可以对它使用.运算符,为什么呢?因为js的默认类型转换机制,允许js在遇到.运算符时自动将string转换为object型中对应的String对象。而这个转换成的临时对象100%会泄露(汗一下)。
某些DOM操作也可能导致泄露 这些恶心的bug只存在于ie系列中。在ie7中 因为试图fix循环引用bug而让情况变得更糟,以至于我对写这一段种满了恐惧。
从ie6谈起,下面是微软的例子,
<html>
<head>
<script language="JScript">...
function LeakMemory()
...{
var hostElement = document.getElementById("hostElement");
// Do it a lot, look at Task Manager for memory response
for(i = 0; i < 5000; i++)
...{
var parentDiv =
document.createElement("<div onClick='foo()'>");
var childDiv =
document.createElement("<div onClick='foo()'>");
// This will leak a temporary object
parentDiv.appendChild(childDiv);
hostElement.appendChild(parentDiv);
hostElement.removeChild(parentDiv);
parentDiv.removeChild(childDiv);
parentDiv = null;
childDiv = null;
}
hostElement = null;
}
function CleanMemory()
...{
var hostElement = document.getElementById("hostElement");
// Do it a lot, look at Task Manager for memory response
for(i = 0; i < 5000; i++)
...{
var parentDiv =
document.createElement("<div onClick='foo()'>");
var childDiv =
document.createElement("<div onClick='foo()'>");
// Changing the order is important, this won't leak
hostElement.appendChild(parentDiv);
parentDiv.appendChild(childDiv);
hostElement.removeChild(parentDiv);
parentDiv.removeChild(childDiv);
parentDiv = null;
childDiv = null;
}
hostElement = null;
}
</script>
</head>
<body>
<button onclick="LeakMemory()">Memory Leaking Insert</button>
<button onclick="CleanMemory()">Clean Insert</button>
<div id="hostElement"></div>
</body>
</html>
看看结果吧,LeakMemory造成了内存泄露,而CleanMemory没有,循环引用了么?仔细看看没有。那么是什么问题呢?MS的解释是"插入顺序不对",必须先将父级元素appendChild。这听起来有些模糊,这里给出一个比较恰当的等价描述:永远不要使用DOM节点树之外元素的appendChild方法。
接下来是ie7和ie8 beta 1中运行这段程序,看到什么?没看错吧,2个都泄露了!别急,刷新一下页面就好了。为什么呢?ie7改变了DOM元素的回收方式:在离开页面时回收DOM树上的所有元素,所以ie7下的内存管理非常简单:在所有的页面中只要挂在DOM树上的元素,就不会泄露,没挂在DOM树上,肯定泄露。所以,ie7中记住一条原则:在离开页面之前把所有创建的DOM元素挂到DOM树上。
接下来谈谈ie7的这个设计吧,坦白的说,这种做法纯粹是偷懒的垃圾做法。动态垃圾回收不是保证所有内存都在离开页面时收回,而是要保证内存的充分利用,运行时不回收,等到离开时回收有什么用?这只是名义上的避免泄露,其实是完全的泄露。况且还没有回收DOM节点树之外的元素。
4.内存泄露的解决方案
内存泄露怎么办?真的以后不用闭包了么?没法封装控件了?这样做还不如要了js程序员的命,嘿嘿。
事实上,通过一些很简单的小技巧,可以巧妙的绕开这些危险的bug。
to be continued......
coming soon:
显式类型转换
避免事件导致的循环引用
不影响返回值地打破循环引用
延迟appendChild
代理DOM对象
猜你喜欢
- 第一:编写限制搜索范围的查询语句。众所周知,在数据库查询的时候返回记录的多少直接关系到查询的效率。所以,在客户端通过一定的条件语句,限制搜索
- 如何显示数据库中的图片和超级链接?代码见下:<% set conn=server.creatobject(&quo
- asp+access用户登录代码,loginnew.asp网面包含了登录框及验证用户的代码an.mdb数据库名fd表名y_username用
- 新浪天气预报代码,需要的朋友可以复制下面的代码到要显示的页面,新浪代码 :<IFRAME WIDTH='260
- 内容摘要: 首先来讲讲 Session 的好处,它可以用来记录客户端私有的
- 在Flash中使用ASP需要的条件:1。你的ISP的server必须支持Active Server Pages并且最好支持数据库2。你应该要
- 检测submit事件的冒泡情况:<!doctype html><html dir="ltr" lang
- 我们可能会出现这种情况,某个表原来设计不周全,导致表里面的数据数据重复,那么,如何对重复的数据进行删除呢?重复的数据可能有这样两种情况,第一
- 从今天开始起,基督山将和大家一起进入ASP.net 诸多程序的学习中,老实说,.net到底是法宝还是垃圾,我们拭目以待。有任何问题,联络基督
- dim sql_injdata,SQL_inj,SQL_Get,SQL_Data,Sql_PostSQL_injdata = "&
- 1、纯粹的截取字符串function cutstr(thestr1,strlen) dim l,t,c&nbs
- 情景一: var yx01 = new function() {return "圆心"}; alert(yx01);我们
- 今天在看罗素的《西方哲学史》时,忽然想到了这个想法,我认为可以从另外一个角度来看“用户体验“的影响因素。上面这个图是我今天思考的一部分,这是
- 如何向客户端推送“出错信息”?下面是推送代码:服务器端:on error resume nextconn=se
- 一、问题描述 SQL Plus WorkSheet是一个窗口图形界面的SQL语句编辑器,对于那些喜欢窗口界面而不喜欢字符界面的用户,该工具相
- 很多网站需要将好的会员号留着,或用于日后的盈利。实现方法不是本文讨论范围,本文仅列出用于检测靓号类型的一些正则。靓号检测:主要可以检测连号(
- 在Flash播放器运行时,将不同来源的资源划分到独立的沙箱(sandbox)内,不同沙箱之间不能彼此操作数据(除非目标沙箱做过一些设置,授权
- 在印刷排版中“point”是一个绝对的单位,它等于 1/72 英寸。可以用尺子丈量的,物理的英寸。但在CSS中pt的含义
- 之前写了一个ajax上传工具。但是只是客户端的工具是我写的,服务器端的那个程序,我是修改了一个网上流传的无组件上传类。因为当时我还不懂什么a
- 樂思蜀将SEO工作中所需要的301转向代码进行了整理,收藏并分享,以备查阅。1、IIS下301设置 Internet信息服务管理器 ->