一个典型的闭包导致的内存泄露,jquery轻松解决

声明:以下内容来自《jQuery基础教程》 第四版,人民邮电出版社。附录A

作者:[美] Jonathan Chaffer Karl Swedberg
翻译:李松峰

觉得该内容很好,可以购买。

旧版本IE中存在一种难以处理的引用循环问题。当一个循环中同时包含DOM元素和

常规JavaScript对象时,IE无法释放任何一个对象——因为这两类对象是由不同的内存管理程序负
责管理的。换句话说,除非关闭浏览器,否则这种循环在IE中永远得不到释放。为此,随着时间
的推移,这可能会导致大量内存被无效地占用。导致这种循环的一个常见原因是简单的事件处理

程序:

代码清单:

$(document).ready(function() {
var button = document.getElementById('button-1');
button.onclick = function() {
console.log('hello');
return false;
};
});


当指定单击事件处理程序时,就创建了一个在其封闭的环境中包含button变量的闭包。而
且,现在的button也包含一个指向闭包(onclick属性自身)的引用。这样,就导致了在IE中
即使离开当前页面也不会释放这个循环。
为了释放内存,就需要断开循环引用,例如在关闭窗口并删除onclick属性(此时必须注意
不要在window及其onunload处理程序间引入新的循环)。另外,也可以像下面这样重写代码来
避免这种闭包:

代码清单:

function hello() {
console.log('hello');
return false;
}
$(document).ready(function() {
var button = document.getElementById('button-1');
button.onclick = hello;
});


因为hello()函数不再包含button,引用就成了单向的(从button到hello)、不存在的
循环,所以就不会造成内存泄漏了。

用jQuery化解引用循环
下面,我们通过常规的jQuery结构来编写同样的代码:

代码清单:

$(document).ready(function() {
var $button = $('#button-1');
$button.click(function(event) {
event.preventDefault();
console.log('hello');
});
});


即使此时仍然会创建一个闭包,并且也会导致同前面一样的循环,但这里的代码却不会使IE
发生内存泄漏。由于jQuery考虑到了内存泄漏的潜在危害,所以它会手动释放自己指定的所有事
件处理程序。只要坚持使用jQuery的事件绑定方法,就无需为这种特定的常见原因导致的内存泄
漏而担心。
但是,这并不意味着我们完全脱离了险境。当对DOM元素进行其他操作时,仍然要处处留

心。只要是将JavaScript对象指定给DOM元素,就可能在旧版本IE中导致内存泄漏。jQuery只是
有助于减少发生这种情况的可能性。
有鉴于此,jQuery为我们提供了另一个避免这种泄漏的工具。使
用.data()方法可以像使用扩展属性(expando)一样,将信息附加到DOM元素。由于这里的数
据并非直接保存在扩展属性中(jQuery使用一个内部对象并通过它创建的ID来保存这里所说的数
据),因此永远也不会构成引用循环,从而有效回避了内存泄漏问题。无论什么时候,当我们觉
得扩展属性好像是一种方便的数据存储机制时,都应该首选.data()这种更安全可靠的替代
方案。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值