¿Qué es la inserción o manipulación más rápida del DOM?

Question

¿Es mejor mover un nodo que envié desde el servidor o insertarlo?

Estoy usando jQuery (1.4) pero me gustaría saber para jQuery y JS en general. En este caso, el nodo es pequeño con solo un hijo. Pero, ¿y si fuera una gran lista?

¿Qué lista

gran 1 = 200 nodos li

grandes lista 2 = 1.000 nodos li

Ejemplo:

Inserción:

<div id="wrap"> 
    <div id="box></div> 
</div> 

$('#box').before($('<ul id="list"><li>...</ul>')); 

vs

Manipulación:

<div id="wrap"> 
    <div id="box></div> 
</div> 
<ul id="list"><li>...</ul> 

$('#list').insertBefore($('#box')); 

Answer 1

El cliente va a pasar mucho más tiempo representando sus nuevos elementos de lo que realmente los pondrá en el DOM. Le recomendaría que elimine la #list del DOM por completo, agregue los ítems al mismo y luego vuelva a colocarlo en el DOM. Al menos para grandes conjuntos de datos.

Incluso entonces, el repintado podría ser lento, especialmente en IE con CSS complejo.

Answer 2

Los dos son lo mismo. Si miras la fuente, puedes ver que 'insertBefore' simplemente se mapea a 'before'.

REF para 'insertBefore': http://gist.github.com/277432#LID4389

REF para 'antes': http://gist.github.com/277432#LID4088

Answer 3

Una forma de mejorar el rendimiento sería proporcionar un contexto para la inserción.

Al hacer $('#list').insertBefore($('#box'));, debe proporcionar el nodo de contexto si lo tiene, en lugar de buscar todo el árbol. Algo similar a

var myWapper = getWrapperFromEventOrWhereEverYouMightHaveIt(); 

//more code doing fancy things here 

$(myWrapper, '#list').insertBefore($('#box')); 

Answer 4

Si su totalidad lista se actualiza al obtener los datos desde el servidor a continuación, usted debe tener una estructura que se asemeja a algo como esto:

<div id="wrap"> 
    <ul id="list"></ul> 
    <div id="box></div> 
</div> 

entonces usted puede tener todos los nodos envían como una simple lista de elementos li y luego hacer algo así:

$("list")[0].innerHTML = xhr.responseText // response text is of form 
              //<li>item</li><li>item</li>... etc 

Las pruebas han demostrado que innerHTML es más rápido que añadir, insertar (antes y después), etc. http://www.quirksmode.org/dom/innerhtml.html