Dois-je utiliser document.createDocumentFragment ou document.createElement

Je lisais à propos des fragments de document et de la refusion DOM et je me suis demandé en quoi il était document.createDocumentFragmentdifférent document.createElementcar il semble qu'aucun d'eux n'existait dans le DOM jusqu'à ce que je les ajoute à un élément DOM.

J'ai fait un test (ci-dessous) et tous ont pris exactement le même temps (environ 95 ms). À une supposition, cela pourrait être dû au fait qu'aucun style n'est appliqué à l'un des éléments, donc pas de redistribution peut-être.

Quoi qu'il en soit, sur la base de l'exemple ci-dessous, pourquoi devrais-je utiliser createDocumentFragmentau lieu de createElementlors 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');

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'emplacement dans le DOM où vous insérez le fragment de document et 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

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

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

Avec 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 entraîne ce HTML malformé (espace ajouté)

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