JavaScript中的内存泄露模式

JavaScript 是用来向 Web 页面添加动态内容的一种功能强大的脚本语言。它尤其特别有助于一些日常任务,比如验证密码和创建动态菜单组件。JavaScript 易学易用,但却很容易在某些浏览器中引起内存的泄漏。在这个介绍性的文章中,我们解释了 JavaScript 中的泄漏由何引起,展示了常见的内存泄漏模式,并介绍了如何应对它们。

注意本文假设您已经非常熟悉使用 JavaScript 和 DOM 元素来开发 Web 应用程序。本文尤其适合使用 JavaScript 进行 Web 应用程序开发的开发人员,也可供有兴趣创建 Web 应用程序的客户提供浏览器支持以及负责浏览器故障排除的人员参考。

我的浏览器存在泄漏么?

Internet Explorer 和 Mozilla Firefox 是两个与 JavaScript 中的内存泄漏联系最为紧密的浏览器。两个浏览器中造成这种问题的“罪魁祸首”是用来管理 DOM 对象的组件对象模型。本机 Windows COM 和 Mozilla’s XPCOM 都使用引用计数的垃圾收集来进行内存分配和检索。引用计数与用于 JavaScript 的标记-清除式的垃圾收集并不总是能相互兼容。本文侧重介绍的是如何应对 JavaScript 代码中的内存泄漏。有关如何处理 Firefox 和 IE 中 COM 层内存泄漏的更多信息,请参看 参考资料。

JavaScript 中的内存泄漏

JavaScript 是一种垃圾收集式语言,这就是说,内存是根据对象的创建分配给该对象的,并会在没有对该对象的引用时由浏览器收回。JavaScript 的垃圾收集机制本身并没有问题,但浏览器在为 DOM 对象分配和恢复内存的方式上却有些出入。

Internet Explorer 和 Mozilla Firefox 均使用引用计数来为 DOM 对象处理内存。在引用计数系统,每个所引用的对象都会保留一个计数,以获悉有多少对象正在引用它。如果计数为零,该对象就会被销毁,其占用的内存也会返回给堆。虽然这种解决方案总的来说还算有效,但在循环引用方面却存在一些盲点。

循环引用的问题何在?

当两个对象互相引用时,就构成了循环引用,其中每个对象的引用计数值都被赋 1。在纯垃圾收集系统中,循环引用问题不大:若涉及到的两个对象中的一个对象被任何其他对象引用,那么这两个对象都将被垃圾收集。而在引用计数系统,这两个对象都不能被销毁,原因是引用计数永远不能为零。在同时使用了垃圾收集和引用计数的混合系统中,将会发生泄漏,因为系统不能正确识别循环引用。在这种情况下,DOM 对象和 JavaScript 对象均不能被销毁。清单 1 显示了在 JavaScript 对象和 DOM 对象间存在的一个循环引用。
清单 1. 循环引用导致了内存泄漏

如上述清单中所示,JavaScript 对象obj拥有到 DOM 对象的引用,表示为DivElement。而 DOM 对象则有到此 JavaScript 对象的引用,由expandoProperty表示。可见,JavaScript 对象和 DOM 对象间就产生了一个循环引用。由于 DOM 对象是通过引用计数管理的,所以两个对象将都不能销毁。

另一种内存泄漏模式

在清单 2 中,通过调用外部函数myFunction创建循环引用。同样,JavaScript 对象和 DOM 对象间的循环引用也会导致内存泄漏。
清单 2. 由外部函数调用引起的内存泄漏

正如这两个代码示例所示,循环引用很容易创建。在 JavaScript 最为方便的编程结构之一:闭包中,循环引用尤其突出。

JavaScript 中的闭包

JavaScript 的过人之处在于它允许函数嵌套。一个嵌套的内部函数可以继承外部函数的参数和变量,并由该外部函数私有。清单 3 显示了内部函数的一个示例。
清单 3. 一个内部函数

JavaScript 开发人员使用内部函数来在其他函数中集成小型的实用函数。如清单 3 所示,此内部函数childFunction可以访问外部函数parentFunction的变量。当内部函数获得和使用其外部函数的变量时,就称其为一个闭包

了解闭包

考虑如清单 4 所示的代码片段。
清单 4. 一个简单的闭包

外部函数closureDemoParentFunction的本地变量a即使在外部函数返回时仍会存在。这一点不同于 C/C++ 这样的编程语言,在 C/C++ 中,一旦函数返回,本地变量也将不复存在。在 JavaScript 中,在调用closureDemoParentFunction的时候,带有属性a的范围对象将会被创建。该属性包括值paramA,又称为“外部 x”。同样地,当closureDemoParentFunction返回时,它将会返回内部函数closureDemoInnerFunction,该函数包括在变量x中。在上述清单中,closureDemoInnerFunction是在父函数closureDemoParentFunction中定义的内部函数。当用外部的 x对closureDemoParentFunction进行调用时,外部函数变量a就会被赋值为外部的 x。函数会返回指向内部函数closureDemoInnerFunction的指针,该指针包括在变量x内。

由于内部函数持有到外部函数的变量的引用,所以这个带属性a的范围对象将不会被垃圾收集。当对具有参数值inner x的x进行调用时,即x(“inner x”),将会弹出警告消息,表明 “outer x innerx”。

清单 4简要解释了 JavaScript 闭包。闭包功能非常强大,原因是它们使内部函数在外部函数返回时也仍然可以保留对此外部函数的变量的访问。不幸的是,闭包非常易于隐藏 JavaScript 对象 和 DOM 对象间的循环引用。

闭包和循环引用

在清单 5 中,可以看到一个闭包,在此闭包内,JavaScript 对象(obj)包含到 DOM 对象的引用(通过 id”element”被引用)。而 DOM 元素则拥有到 JavaScriptobj的引用。这样建立起来的 JavaScript 对象和 DOM 对象间的循环引用将会导致内存泄漏。
清单 5. 由事件处理引起的内存泄漏模式

避免内存泄漏

幸好,JavaScript 中的内存泄漏是可以避免的。当确定了可导致循环引用的模式之后,正如我们在上述章节中所做的那样,您就可以开始着手应对这些模式了。这里,我们将以上述的由事件处理引起的内存泄漏模式为例来展示三种应对已知内存泄漏的方式。

一种应对清单 5中的内存泄漏的解决方案是让此 JavaScript 对象obj为空,这会显式地打破此循环引用,如清单 6 所示。
清单 6. 打破循环引用

清单 7 是通过添加另一个闭包来避免 JavaScript 对象和 DOM 对象间的循环引用。
清单 7. 添加另一个闭包

清单 8 则通过添加另一个函数来避免闭包本身,进而阻止了泄漏。
清单 8. 避免闭包自身

结束语

本文解释了循环引用是如何导致 JavaScript 中的内存泄漏的 —— 尤其是在结合了闭包的情况下。您还了解了涉及到循环引用的一些常见内存泄漏模式以及应对这些泄漏模式的几种简单方式。有关本文所讨论的主题的更多信息,请参看参考资料

参考资料

学习

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部