Question

我正在尝试使用DOM元素（添加/删除它们）显示动态可变数据操作。我发现了几乎所有浏览器的一个非常奇怪的行为：在我删除一个DOM元素然后添加一个新元素后，浏览器不会释放被删除的DOM项所占用的内存。请参阅下面的代码以了解我的意思。运行此页面后，它将逐步进入150 MB的内存。有谁能解释我这种奇怪的行为？或者也许我做错了什么？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <script type="text/javascript">
     function redrawThings() {
         // Removing all the children from the container
         var cont = document.getElementById("container");
         while ( cont.childNodes.length >= 1 ) {
            cont.removeChild(cont.firstChild);
         }

         // adding 1000 new children to the container
         for (var i = 0; i < 1000; i++) {
             var newDiv = document.createElement('div');
             newDiv.innerHTML = "Preved medved "  + i;
             cont.appendChild(newDiv);             
         }         
     }  
  </script>
  <style type="text/css">
    #container {
        border: 1px solid blue;
    }
  </style>
</head>
<body onload='setInterval("redrawThings()", 200);'>
  <div id="container"> </div>
</body>
</html>

Answer 1

我无法在FF 3.6.8 / Linux上重现这一点，但是对于定时器来说，200毫秒相当小，因为大量的DOM重新渲染。我在机器上注意到的是，除了运行这个脚本之外，在执行JavaScript密集型操作时，比如输入此答案框，内存使用量会增加，但是当我停止输入时会再次释放（在我的情况下，内存占16％左右）使用）。

我想在你的情况下，浏览器的垃圾收集器没有足够的“空闲时间”来实际从内存中删除这些节点。

Answer 2

这是因为从DOM树中删除节点不会将其从内存中删除，它仍然可以访问，因此以下代码将起作用：

var removed = element.removeChild(element.firstChild);
document.body.appendChild(removed);

该代码将从element中删除第一个子项，然后在删除之后将其附加到文档的末尾。除了删除更少的代码之外，您无法做任何事情。

有关详细信息，请查看Mozilla开发人员中心的Node.removeChild页面。

Answer 3

不确定它是否会影响时间，这可能是非常糟糕的做法，但不是通过子节点循环，你不能只将div的innerHTML设置为“”??

循环添加/删除DOM节点会导致JavaScript中的内存泄漏？

3 个答案: