javascript - variable - ¿Debo usar document.createDocumentFragment o document.createElement?

style.color javascript

Question

Estaba leyendo sobre fragmentos de documentos y reflujo de DOM y me pregunté cómo document.createDocumentFragment difería de document.createElement ya que ninguno de ellos existe en el DOM hasta que los anexo a un elemento DOM.

Hice una prueba (abajo) y todas tomaron exactamente la misma cantidad de tiempo (alrededor de 95ms). Supongo que esto podría deberse a que no se aplica ningún estilo a ninguno de los elementos, por lo que no hay reflujo.

De todos modos, basado en el ejemplo a continuación, ¿por qué debería usar createDocumentFragment lugar de createElement al insertar en el DOM y cuál es la diferencia entre los dos?

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 diferencia es que un fragmento de documento efectivamente desaparece cuando lo agrega al DOM. Lo que sucede es que todos los nodos secundarios del fragmento de documento se insertan en la ubicación en el DOM donde se inserta el fragmento de documento y el fragmento de documento no se inserta. El fragmento en sí continúa existiendo, pero ahora no tiene hijos.

Esto le permite insertar varios nodos en el DOM al mismo tiempo:

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

Otra diferencia muy importante entre crear un elemento y un fragmento de documento:

Cuando crea un elemento y lo agrega al DOM, el elemento se agrega al DOM, así como a los elementos secundarios.

Con un fragmento de documento, solo se anexan los niños.

Toma el caso 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>

lo que da como resultado este HTML malformado (se agrega espacio en blanco)

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