Leeren des innerHTML erhöht die Anzahl der DOM-Knoten

Question

Ich habe eine sehr einfache Seite erstellt:

Dann habe ich es in Chrome geöffnet, die Timeline ausgeführt und gesehen, dass die Anzahl der Knoten 9 beträgt. Dann habe ich document.getElementById('div').innerHTML = '' ausgeführt und festgestellt, dass die Anzahl der Knoten 10 beträgt.

Hinweis 1: Die Anzahl der Knoten wurde nach dem Neustart der Timeline erneut zu 9.

Hinweis 2: Wenn ich document.getElementById('div').innerHTML = '' mehrmals ausführe, springt die Anzahl der Knoten von 9 auf 10 und dann wieder auf 9:

Kann mir jemand erklären, warum document.getElementById('div').innerHTML = '' zur Erstellung eines neuen Knotens führt? Warum wird es nicht immer vom Garbage Collector entfernt? Was ist der andere (bessere) Weg, um den Inhalt des Knotens zu löschen?

Answer 1

Ich habe dies in Chrome 33 getestet. Effektiv gibt es 9 anfängliche Knoten:

#document
    doctype
    html
        head
        #text
        body
            #text
            div
            #text

Wenn ich ausführe

var div = document.getElementById('div');
div.innerHTML = '';

Passiert nichts Besonderes.

div.childNodes;

gibt eine leere NodeList zurück. Aber wenn ich schreibe

div.innerHTML = ' '; //<- mit Leerzeichen

Dann wird ein neuer Knoten erstellt.

Wenn ich diese Operation mehrmals durchführe, wächst die Anzahl der Knoten und nimmt dann plötzlich ab. Der Grund? Die Garbage Collection erfolgt nicht jedes Mal, wenn ein Knoten entfernt wird (es wäre äußerst ineffizient). Chroms V8 hat einen reservierten Speicherbereich für Young-Generation-Objekte. Erst wenn dieser Bereich voll ist, erfolgt eine Garbage Collection, bei der ungenutzte Objekte gelöscht und andere Objekte in den Old-Generation-Speicher verschoben werden.

Answer 2

Die Frage wurde an die Leute von igalia gestellt und die Antwort lautet kurz gesagt: "Es wird erstellt, da im nachfolgenden Teil des JavaScripts darauf verwiesen werden könnte".
JavaScript könnte also auf das DOM-Element verweisen, um es mit einem berechneten Wert zu füllen. Daher ist es schwierig, dies zu optimieren. Es könnte nur optimiert werden, wenn der gesamte JavaScript-Code gelesen und ausgeführt wurde. Daher ist es einfacher, mit einem leeren DOM-Element zu beginnen.