jQuery anexando html versus el elemento existente anexando

Question

Tengo una cadena big_html y quiero agregarla a algún div. He observado una diferencia de rendimiento en lo siguiente:

$('#some-div').append(big_html); 
// takes about 100 ms 

//create it first 
var append_objs = $(big_html); 
$('#some-div').append(append_objs); 
//takes about 150 ms 

¿Alguien sabe por qué sucede esto? Gracias por tu tiempo.

EDIT: Estoy tratando de obtener las cosas que estoy agregando a la página. También he intentado

var added = $(big_html).appendTo('#some-div'); 
//150 ms 

¿Hay una manera eficiente de hacer esto?

Answer 1

En el segundo caso, jQuery hace que el navegador cree un fragmento de documento y luego rellena el código HTML para que el navegador lo analice. Luego, tiene que manipular el DOM nuevamente cuando lo agrega a su página.

Por lo tanto, la segunda versión simplemente está haciendo más trabajo que la primera.

Lo invito a usted (y a todos los interesados) a mantener la versión no minificada de jQuery para su consulta. Es esclarecedor leer el código.

para "conseguir" el contenido de su después de que éste se agrega a la DOM tipo de depende de lo que es. Dado que el contenido está siendo adjunta, que tipo de tiene que empezar por recordar el último elemento del objetivo:

var last = $('#some_div > *:last'); 
$('#some_div').append(big_html_string); 
var newStuff = last.nextAll(); 

Si el div objetivo podría comenzar vacía, que había necesidad de comprobar que también :

var newStuff = last.length ? last.nextAll() : $('#some_div > *');