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

Igo*_*nko 6 javascript dom memory-leaks

我正在尝试使用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>
Run Code Online (Sandbox Code Playgroud)

Mar*_*pel 1

我无法在 FF 3.6.8/Linux 上重现这一点,但对于如此多的 DOM 重新渲染来说,200 毫秒的计时器相当小。我在我的机器上注意到的是,除了运行此脚本之外,当执行 JavaScript 密集型操作时(例如在此答案框中键入内容),内存使用量会增加,但当我停止键入时会再次释放(在我的情况下,内存使用量约为 16%)用法)。

\n\n

我想在你的情况下,浏览器的垃圾收集器没有足够的 \xe2\x80\x98free time\xe2\x80\x99 来实际从内存中删除这些节点。

\n