javascript - 了解 Chrome 中的内存泄漏和 'Uncovering DOM leaks' 示例

Question

关于this page Chrome 文档中，他们给出了以下代码示例:

function start()
{
    var p = document.getElementById("p");
    detached = document.createElement("div");
    p.appendChild(detached);
    p.removeChild(detached);
    //Fill up detached with a bunch of garbage data
}

然后他们声称这是因为

..a DOM node is detached from the tree, but it still holds DOM wrapper objects that reference script data, effectively preventing the data from being collected.

这对我来说毫无意义。

1. 问题不只是脚本仍然引用detached(因为它是一个闭包)吗？难道 detached = null 不应该足以让 GC 收集 detached 并消除泄漏吗？

2. 如果 p 已被删除，为什么它仍保留对 detached 的引用？如果 (1) 为真，则不应

   p.appendChild(detached);
   p.removeChild(detached);
   

   什么也不做？

Answer 1

是的，这是一个写得很糟糕的文档。如果 fill() 方法曾经引用了全局对象(例如 fill2())，那么这句话就有意义，因此我怀疑示例代码在某个时刻发生了变化。

detached = null 将按照以下示例解决内存泄漏。

function start()
{
  var p = document.getElementsByTagName("div")[0];
  detached = document.createElement("div");
  p.appendChild(detached);
  p.removeChild(detached);
  fill();
}

function fix()
{
  detached = null;
}

function fill()
{
  for (var i = 0; i < 25; ++i) {
    var div = document.createElement('div');
    div.data = new Array(10000);
    for (var j = 0, l = div.data.length; j < l; ++j)
      div.data[j] = j.toString();
    detached.appendChild(div);
  }
}

function fill2()
{
  window.data = new Array(10000);
  for (var j = 0, l = window.data.length; j < l; ++j)
    window.data[j] = j.toString();

  for (var i = 0; i < 25; ++i) {
    var div = document.createElement('div');
    div.data = window.data;
    detached.appendChild(div);
  }
}