Estaba leyendo sobre fragmentos de documentos y reflujo de DOM y me preguntaba en qué se document.createDocumentFragment
diferenciaba, document.createElement
ya que parece que ninguno de ellos existe en el DOM hasta que los agrego a un elemento DOM.
Hice una prueba (a continuación) y todas tomaron exactamente la misma cantidad de tiempo (aproximadamente 95 ms). Supongo que esto podría deberse a que no se ha aplicado un estilo a ninguno de los elementos, por lo que tal vez no haya reflujo.
De todos modos, según el ejemplo a continuación, ¿por qué debería usarlo en createDocumentFragment
lugar de createElement
al insertarlo 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');
fuente
createFragment
y lacreateElement
memoria tienen aproximadamente el mismo efecto, ya que ambos actualizaron el DOM por lotes en lugar de actualizarlo iterativamente varias veces. Si bien el principal beneficiocreateFragment
es que le ofrece la flexibilidad de elegir los elementos secundarios que desee agregar de forma gratuita. Corrígeme si me equivoco.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 agregan los niños.
Toma el caso de:
lo que da como resultado este HTML con formato incorrecto (espacio en blanco agregado)
fuente