Soll ich document.createDocumentFragment oder document.createElement verwenden?

Ich habe über Dokumentfragmente und DOM-Reflow gelesen und mich gefragt, wie document.createDocumentFragmentunterschiedlich es ist, document.createElementda es so aussieht, als ob keines von beiden im DOM vorhanden ist, bis ich sie an ein DOM-Element anhänge.

Ich habe einen Test gemacht (siehe unten) und alle haben genau die gleiche Zeit gebraucht (ca. 95 ms). Vermutlich könnte dies daran liegen, dass auf keines der Elemente ein Stil angewendet wurde, sodass möglicherweise kein Reflow möglich ist.

Wie auch immer, basierend auf dem folgenden Beispiel, warum sollte ich createDocumentFragmentanstelle des createElementEinfügens in das DOM verwenden und was ist der Unterschied zwischen den beiden.

var htmz = "<ul>";
for (var i = 0; i < 2001; i++) {
    htmz += '<li><a href="#">link ' + i + '</a></li>';
}
htmz += '<ul>';

//createDocumentFragment
console.time('first');
var div = document.createElement("div");
div.innerHTML = htmz;
var fragment = document.createDocumentFragment();
while (div.firstChild) {
    fragment.appendChild(div.firstChild);
}
$('#first').append(fragment);
console.timeEnd('first');

//createElement
console.time('second');
var span = document.createElement("span");
span.innerHTML = htmz;
$('#second').append(span);
console.timeEnd('second');


//jQuery
console.time('third');
$('#third').append(htmz);
console.timeEnd('third');

Der Unterschied besteht darin, dass ein Dokumentfragment effektiv verschwindet, wenn Sie es dem DOM hinzufügen. Was passiert ist, dass alle untergeordneten Knoten des Dokumentfragments an der Stelle im DOM eingefügt werden, an der Sie das Dokumentfragment einfügen, und das Dokumentfragment selbst nicht eingefügt wird. Das Fragment selbst existiert weiterhin, hat aber jetzt keine Kinder.

Auf diese Weise können Sie mehrere Knoten gleichzeitig in das DOM einfügen:

var frag = document.createDocumentFragment();
var textNode = frag.appendChild(document.createTextNode("Some text"));
var br = frag.appendChild(document.createElement("br"));
var body = document.body;
body.appendChild(frag);
alert(body.lastChild.tagName); // "BR"
alert(body.lastChild.previousSibling.data); // "Some text"
alert(frag.hasChildNodes()); // false

Ein weiterer sehr wichtiger Unterschied zwischen dem Erstellen eines Elements und eines Dokumentfragments:

Wenn Sie ein Element erstellen und an das DOM anhängen, wird das Element an das DOM sowie an die untergeordneten Elemente angehängt.

Bei einem Dokumentfragment werden nur die untergeordneten Elemente angehängt.

Nehmen Sie den Fall von:

var ul = document.getElementById("ul_test");


// First. add a document fragment:


(function() {
  var frag = document.createDocumentFragment();
  
  
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Document Fragment"));
  frag.appendChild(li);
  
  ul.appendChild(frag);
  console.log(2);
}());

(function() {
  var div = document.createElement("div");
  
  
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Inside Div"));
   div.appendChild(li);
  
  ul.appendChild(div);
}());

Sample List:
<ul id="ul_test"></ul>

was zu diesem fehlerhaften HTML führt (Leerzeichen hinzugefügt)

<ul id="ul_test">
  <li>Document Fragment</li>
  <div><li>Inside Div</li></div>
</ul>