javascript - JavaScript <-> DOM 循环引用问题详解

Question

jQuery.data 的优势之一与原始 expando 属性(您可以分配给 DOM 节点的任意属性)相比，jQuery.data “不受循环引用的影响，因此不会发生内存泄漏”。来自 Google 的一篇标题为 "Optimizing JavaScript code" 的文章进入更多细节:

The most common memory leaks for web applications involve circular references between the JavaScript script engine and the browsers' C++ objects' implementing the DOM (e.g. between the JavaScript script engine and Internet Explorer's COM infrastructure, or between the JavaScript engine and Firefox XPCOM infrastructure).

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

• 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';
  };
  

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

Answer 1

复制这些链接中的所有内容可能不值得，所以我建议您阅读并查看 other Google search hits :

javascript, circular references and memory leaks

Do you know what may cause memory leaks in 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 元素和事件处理程序是安全的。这是所有垃圾收集器都必须处理的一般循环引用问题的更复杂版本，其中对象 A 引用对象 B，对象 B 引用对象 A，但没有其他对象引用 A 或 B，因此两者都可以被释放.

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

重要的是要意识到可能仍然存在一些循环引用，这没关系。解决方法是将循环引用移动到浏览器可以适当处理它们的地方，而不是将它们放在浏览器有错误的地方。