Zyklisches Hinzufügen / Entfernen von DOM-Knoten führt zu Speicherverlusten in JavaScript?

Question

Sep 20, 2010, 01:04 PM

Zyklisches Hinzufügen / Entfernen von DOM-Knoten führt zu Speicherverlusten in JavaScript?

Ich versuche, dynamisch veränderbare Daten anzuzeigen, die mit DOM-Elementen bearbeitet werden (Hinzufügen / Entfernen). Ich habe bei fast allen Browsern ein sehr merkwürdiges Verhalten festgestellt: Nachdem ich ein DOM-Element entfernt und dann ein neues hinzugefügt habe, gibt der Browser nicht den Speicher frei, den das entfernte DOM-Element belegt. Sehen Sie sich den folgenden Code an, um zu verstehen, was ich meine. Nachdem wir diese Seite aufgerufen haben, wird sie schrittweise bis zu 150 MB Speicher belegen. Kann mir jemand dieses seltsame Verhalten erklären? Oder mache ich vielleicht etwas falsch?

<!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>