Estaba la lectura de unos fragmentos de documento y DOM de reflujo y se preguntó cómo document.createDocumentFragment difería de document.createElement ya que se parece a ninguno de ellos existe en el DOM hasta añado un elemento de DOM.

Hice una prueba (la de abajo) y todos ellos han tenido exactamente la misma cantidad de tiempo (alrededor de 95ms). En una conjetura que esto podría ser debido a que no hay ningún estilo que se aplica a cualquiera de los elementos, por lo que no reflujo tal vez.

De todos modos, basado en el ejemplo de abajo, ¿por qué debo utilizar createDocumentFragment en lugar de createElement al insertar en la 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');
  • Esto suena como un trabajo para jsperf. Sí? No?
InformationsquelleAutor screenm0nkey | 2010-08-03

2 Comentarios

  1. 89

    La diferencia es que un fragmento de documento efectivamente desaparece cuando se agregan a la DOM. Lo que pasa es que todos los nodos secundarios del fragmento de documento se inserta en la ubicación en el árbol DOM, donde se inserta el fragmento de documento y el fragmento de documento en sí no está insertada. El fragmento en sí sigue existiendo, pero ahora no tiene hijos.

    Esto permite insertar varios nodos en el árbol DOM en el 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
    • Gracias por la respuesta. Dices que permite múltiples insertar al mismo tiempo, pero puedo lograr que el uso de doc.createElement. La única diferencia es que yo tenía para envolver los elementos en un <span> etiqueta y, a continuación, insertar el <span> en el DOM. Es que ¿por qué debo utilizar createDocumentFragment? Para evitar que los elementos innecesarios que se inserta en la DOM?
    • Sí, eso es definitivamente una razón para usarlo. También, un fragmento de documento puede contener cualquier tipo de nodo, mientras que un elemento no puede.
    • En realidad el fragmento no «desaparecer»; el explorador se desplaza a su childNodes a la DOM. De modo que el fragmento seguirá existiendo, pero estará vacío después de la inserción.
    • De ahí mi uso de la palabra «eficacia» y la explicación que sigue, que es casi la misma que la tuya. Reconozco que debería haber dicho explícitamente en la respuesta que el fragmento que sigue existiendo con que ningún niño se nodos.
    • gracias por tu respuesta! Si me da su punto de derecho, en relación con el rendimiento, el uso de createFragment y createElement en la memoria tiene aproximadamente el mismo efecto, ya que ambos lote actualizada el DOM en lugar de de forma iterativa actualizar para varias veces. Aunque el principal beneficio de createFragment es el que le ofrece la flexibilidad de elegir qué elementos secundarios para añadir de forma gratuita? Corrígeme si me estaban equivocados.
  2. 6

    Otra diferencia muy importante entre la creación de un elemento y un fragmento de documento:

    Cuando se crea un elemento y anexar a la DOM, el elemento se anexa a la catedral, así como los niños.

    Con un fragmento de documento, sólo los niños se anexan.

    Tomar el caso de:

    JS:

    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);
    }());

    HTML:

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

    que los resultados en este HTML mal formado (espacio en blanco añadido)

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

Dejar respuesta

Please enter your comment!
Please enter your name here