日期:2014-05-16  浏览次数:20392 次

找出并解决 JavaScript 和 Dojo 引起的浏览器内存泄露问题

简介

一般来说,浏览器的内存泄漏对于 web 应用程序来说并不是什么问题。用户在页面之间切换,每个页面切换都会引起浏览器刷新。即使页面上有内存泄漏,在页面切换后泄漏就解除了。由于泄漏的范围比较小,因此常常被忽视。

Ajax 技术引入后,内存泄漏就成了一个比较严重的问题。在 web 2.0 样式页面上,用户不需要经常刷新页面。Ajax 技术用于异步更新页面内容。特殊场景中,整个 web 应用程序构建在一个页面上。在这种情况下泄漏会被累积,不能忽略。

在本文中,了解内存泄漏是怎样发生的,以及如何通过 sIEve 找到泄漏的源头。这些问题和解决方案的的实际示例可以帮助您探究问题。您可以?下载?本文示例源代码。

使用 JavaScript 和 Dojo 工具包的经验有助于您理解这篇文章,但并不是必需的。

泄漏模式

如 web 开发人员所知道的,IE 不同于 Firefox 和其他的浏览器。本文所讨论的内存泄漏模式和问题主要是针对 IE 浏览器的,但不限于 IE。好的方法应该是适用于所有的浏览器的。

IE 怎样管理内存的话题不在本文范围内,参考资料?中有更多信息。

由于 JavaScript 的本质和 JavaScript 和 DOM 对象的浏览器内存管理,JavaScript 编码不慎导致了浏览器的内存泄露。造成了这些泄露的有两种常见的模式。

循环引用
循环引用几乎是每种泄露的根本原因。一般来说,IE 浏览器可以处理循环引用,并将它们正确放置在 JavaScript 环境中。当 DOM 对象被引入时会发生异常。当 JavaScript 对象引用 DOM 元素并且 DOM 元素的属性引用 JavaScript 对象时,循环应用发生并导致 DOM 节点泄露。?清单 1?是一个代码样例,通常用于在文章中演示内存泄漏问题。


清单 1. 循环引用引起的泄露

							
var obj = document.getElementById("someLeakingDIV");
document.getElementById("someLeakingDiv").expandoProperty = obj;

?

为了解决这个问题,当您准备把节点移出文档时,一定要将?expa