您的位置: 首页 > 技术文档 > 网页制作 > 关于Javascript的内存泄漏问题
background-clip/origin一则运用 回到列表 标记语言——标题
 关于Javascript的内存泄漏问题

作者:yaohaixiao 时间: 2008-04-14 文档类型:原创 来自:蓝色理想

第 1 页 关于Javascript的内存泄漏问题 [1]
第 2 页 关于Javascript的内存泄漏问题 [2]
第 3 页 关于Javascript的内存泄漏问题 [3]
第 4 页 关于Javascript的内存泄漏问题 [4]

常规循环引用内存泄漏和Closure内存泄漏

要了解javascript的内存泄漏问题,首先要了解的就是javascript的GC原理。

我记得原来在犀牛书《JavaScript: The Definitive Guide》中看到过,IE使用的GC算法是计数器,因此只碰到循环 引用就会造成memory leakage。后来一直觉得和观察到的现象很不一致,直到看到Eric的文章,才明白犀牛书的说法没有说得很明确,估计该书成文后IE升级过算法吧。在IE 6中,对于javascript object内部,jscript使用的是mark-and-sweep算法,而对于javascript object与外部object(包括native object和vbscript object等等)的引用时,IE 6使用的才是计数器的算法。

Eric Lippert在http://blogs.msdn.com/ericlippert/archive/2003/09/17/53038.aspx一文中提到IE 6中JScript的GC算法使用的是nongeneration mark-and-sweep。对于javascript对算法的实现缺陷,文章如是说:

"The benefits of this approach are numerous, but the principle benefit is that circular references are not leaked unless the circular reference involves an object not owned by JScript. "

也就是说,IE 6对于纯粹的Script Objects间的Circular References是可以正确处理的,可惜它处理不了的是JScript与Native Object(例如Dom、ActiveX Object)之间的Circular References。

所以,当我们出现Native对象(例如Dom、ActiveX Object)与Javascript对象间的循环引用时,内存泄露的问题就出现了。当然,这个bug在IE 7中已经被修复了[http://www.quirksmode.org/blog/archives/2006/04/ie_7_and_javasc.html]。

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp 中有个示意图和简单的例子体现了这个问题:

<html>
<head>
<script language = " JScript ">
var myGlobalObject;
function  SetupLeak()  // 产生循环引用,因此会造成内存泄露
{
    //  First set up the script scope to element reference
    myGlobalObject  = document.getElementById("LeakedDiv");
    //  Next set up the element to script scope reference
    document.getElementById(" LeakedDiv ").expandoProperty  = myGlobalObject;
}
function  BreakLeak()  // 解开循环引用,解决内存泄露问题
{
    document.getElementById( " LeakedDiv " ).expandoProperty  = null ;
}
</script>
</head>
<body onload = "SetupLeak()"  onunload = "BreakLeak()">
<div id = "LeakedDiv" ></div>
</body>
</html>
   

上面这个例子,看似很简单就能够解决内存泄露的问题。可惜的是,当我们的代码中的结构复杂了以后,造成循环引用的原因开始变得多样,我们就没法那么容易观察到了,这时候,我们必须对代码进行仔细的检查。

尤其是当碰到Closure,当我们往Native对象(例如Dom对象、ActiveX Object)上绑定事件响应代码时,一个不小心,我们就会制造出Closure Memory Leak。其关键原因,其实和前者是一样的,也是一个跨javascript object和native object的循环引用。只是代码更为隐蔽,这个隐蔽性,是由于javascript的语言特性造成的。但在使用类似内嵌函数的时候,内嵌的函数有拥有一个reference指向外部函数的scope,包括外部函数的参数,因此也就很容易造成一个很隐蔽的循环引用,例如:

DOM_Node.onevent ->function_object.[ [ scope ] ] ->scope_chain ->Activation_object.nodeRef ->DOM_Node。

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp]有个例子极深刻地显示了该隐蔽性:

<html>
<head>
<script language = "JScript">
function  AttachEvents(element)
{
    //  This structure causes element to ref ClickEventHandler
    //  element有个引用指向函数ClickEventHandler()
    element.attachEvent("onclick", ClickEventHandler);
    function  ClickEventHandler(){
                 //  This closure refs element
                 //  该函数有个引用指向AttachEvents(element)调用Scope,也就是执行了参数element。
    }
}
function  SetupLeak()
{
    //  The leak happens all at once
    AttachEvents(document.getElementById("LeakedDiv"));
}
</script>
</head>
<body onload = "SetupLeak()"  onunload = "BreakLeak()">
<div id = "LeakedDiv"></div>
</body>
</html>

出处:蓝色理想
责任编辑:bluehearts

上一页 下一页 关于Javascript的内存泄漏问题 [2]

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
比较文档位置
理解JavaScript中的事件
Javascript风格要素 Ⅱ
Javascript风格要素 Ⅰ
Javascript的一种模块模式
作者文章
Ajax标签导航实例详解
XMLHTTPRequest的属性和方法简介
Ajax标签导航效果
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
悟道web标准:前端性能优化
纯中文域名".中国"今日提交申请
世界之窗3.0皮肤设计大赛结果公布
使用jQuery制作滑动动画效果的层
如何设计网页横幅
Plump 图标设计
Subrat Nayak图标设计
百度知道推出文档分享服务
CSS Sprites(CSS雪碧):要还是不要?
UIRSS三周年纪念日推出V2公测版
栏目最新 栏目最新列表
Firefox的Jetpack扩展案例分析
阿里妈妈UED谈CSS Sprites技术
Photoshop中设计绿色时尚Web网站
操作Dom节点实现间歇滚动新闻
浏览器15年历史回顾
如何创建Firefox的Jetpack扩展
全透视:CSS Z-index 属性
用PS 3D工具绘制甜麦圈包装袋
悟道Web标准:让W3C标准兼容终端
悟道WEB标准:统一思想,遵循标准
>> 分页 首页 前页 后页 尾页 页次:1/41个记录/页 转到 页 共4个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文现有 2 条评论 评分:- llllllllllllllllllll + 评分人数: 2 ,平均分: 4.00


rene1018 Publish at 2008-4-15 11:35:48 评分3
完了,你的页面也被泄漏了。。。。撑的这么大
amtoni Publish at 2008-4-15 8:33:23 评分5
好文
您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
《Web标准设计》
闪魂-FlashCS4完美入门与案例精粹
Waver_h's华丽世界
Illustrator CS3质感绘画表现技法
《Flash短片轻松学》
《用户体验要素》
《JavaScript语言精粹》
作品集 更多内容

芬尼克兹节能设备 别克英朗MIX酒吧 茱萸百康 我的学习 乱涂的东西 芬尼克兹节能设备 Sapphire Group