Dois-je utiliser document.createDocumentFragment ou document.createElement ?

Question

J'étais lecture de fragments de documents et DOM reflow et se demandait comment document.createDocumentFragment diffère de document.createElement car il semble qu'aucun d'entre eux n'existe dans le DOM jusqu'à ce que je les ajoute à un élément du DOM.

J'ai fait un test (ci-dessous) et tous ont pris exactement le même temps (environ 95 ms). A mon avis, cela pourrait être dû au fait qu'aucun style n'a été appliqué à aucun des éléments, et donc qu'il n'y a pas eu de refonte.

Quoi qu'il en soit, sur la base de l'exemple ci-dessous, pourquoi devrais-je utiliser createDocumentFragment au lieu de createElement lors de l'insertion dans le DOM et quelle est la différence entre les deux.

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');

Answer 1

La différence est qu'un fragment de document disparaît effectivement lorsque vous l'ajoutez au DOM. Ce qui se passe, c'est que tous les nœuds enfants du fragment de document sont insérés à l'endroit du DOM où vous insérez le fragment de document, mais le fragment de document lui-même n'est pas inséré. Le fragment lui-même continue d'exister mais n'a plus d'enfants.

Cela vous permet d'insérer plusieurs nœuds dans le DOM en même temps :

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

Answer 2

Une autre différence très importante entre la création d'un élément et d'un fragment de document :

Lorsque vous créez un élément et que vous l'ajoutez au DOM, l'élément est ajouté au DOM, ainsi que ses enfants.

Dans le cas d'un fragment de document, seuls les enfants sont ajoutés.

Prenons le cas de :

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>

ce qui donne ce code HTML malformé (espaces ajoutés)

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