10

jQuery.data与原始 expando 属性（可以分配给 DOM 节点的任意属性）相比，被吹捧的优势之一是jQuery.data “不受循环引用的影响，因此不会出现内存泄漏”。Google 的一篇题为“优化 JavaScript 代码”的文章更详细地介绍了：

Web 应用程序最常见的内存泄漏涉及 JavaScript 脚本引擎和实现 DOM 的浏览器的 C++ 对象之间的循环引用（例如，在 JavaScript 脚本引擎和 Internet Explorer 的 COM 基础结构之间，或 JavaScript 引擎和 Firefox XPCOM 基础结构之间）。

它列出了循环引用模式的两个示例：

  • DOM 元素 → 事件处理程序 → 闭包范围 → DOM

  • DOM 元素 → 通过 expando → 中间对象 → DOM 元素

但是，如果 DOM 节点和 JavaScript 对象之间的引用循环产生了内存泄漏，这是否意味着任何重要的事件处理程序（例如onclick）都会产生这种泄漏？我看不出事件处理程序如何避免引用循环，因为我看到它的方式是：

  • DOM 元素引用事件处理程序。

  • 事件处理程序引用 DOM（直接或间接）。无论如何，要避免window在任何有趣的事件处理程序中引用几乎是不可能的，除非编写一个setInterval从全局队列中读取动作的循环。

有人可以提供 JavaScript ↔ DOM 循环引用问题的准确解释吗？我想澄清的事情：

  • 哪些浏览器受到影响？jQuery 源代码中的一条评论特别提到了 IE6-7，但 Google 文章暗示 Firefox 也受到了影响。

  • expando 属性和事件处理程序在内存泄漏方面是否有所不同？或者这两个代码片段都容易受到同一种内存泄漏的影响？

    // Create an expando that references to its own element.
var elem = document.getElementById('foo');
elem.myself = elem;

// Create an event handler that references its own element.
var elem = document.getElementById('foo');
elem.onclick = function() {
    elem.style.display = 'none';
};

  • 如果页面由于循环引用而泄漏内存，泄漏是否会持续到整个浏览器应用程序关闭，或者当窗口/选项卡关闭时内存是否被释放？

4

1 回答 1

5

复制这些链接中的所有内容可能不值得，所以我建议您阅读并查看其他 Google 搜索结果：

javascript、循环引用和内存泄漏

你知道什么可能导致 JavaScript 中的内存泄漏吗？

http://www.ibm.com/developerworks/web/library/wa-memleak/

http://www.ibm.com/developerworks/web/library/wa-sieve/index.html?ca=drs-

http://code.google.com/p/google-web-toolkit/wiki/UnderstandingMemoryLeaks

最严重的内存泄漏在 IE6 中，泄漏是永久性的（即使在您离开受影响的网页之后）。其他泄漏通常仅在您在该特定页面上时发生，并在您离开页面时被清理。

事实是浏览器应该能够处理循环引用。它应该能够看到，即使 DOM 元素仍然被 JavaScript 元素引用，JavaScript 元素本身只是因为 DOM 元素仍然存在而存在，因此没有真正的外部引用离开 DOM 元素. 正是这种认识是旧版本的 IE 不擅长的。因此，在涉及事件处理程序的代码引用中，垃圾收集器需要足够聪明，以知道 JavaScript 中对 DOM 元素的唯一引用是当 DOM 元素及其事件处理程序被删除时它们本身会消失的引用 - 因此没有真正的外部引用，因此删除 DOM 元素和事件处理程序是安全的。

jQuery.data()让事情变得更可靠，因为旧版本的 IE 在添加到 DOM 元素的属性方面存在特殊问题，并且没有正确处理涉及这些属性中的数据的循环引用，因此在应该有的时候不会释放东西（泄漏）。 .data()通过仅在 DOM 元素上使用一个添加的属性来解决此问题，该属性是安全的、不泄漏的字符串。然后，该字符串成为 JavaScript 对象的键，该对象可以包含您希望与 DOM 元素关联的所有属性。因为这些属性都存储在纯 JavaScript 中，浏览器没有循环引用错误，这样做不会导致泄漏。

It's important to realize that there may still be some circular references and that's OK. The work-around is to move the circular references to a place that the browsers handle them appropriately rather than putting them in the place that the browsers have bugs.

于 2012-04-10T17:25:52.470 回答