Question

En términos de desempeño porqué es recomendable agregar elementos así:

var lista = $('<ul></ul>').append('<li>Uno</li>').append('<li>Dos</li>').append('<li>Tres</li>');
$('body').append(lista)

en lugar de esta forma:

var lista = $('<ul></ul>');
$('body').append(lista);
lista.append('<li>Uno</li>').append('<li>Dos</li>').append('<li>Tres</li>');

¿Alguien sabe?

Answer 1

El problema de rendimiento al que creo que estás haciendo referencia, no tiene en realidad que ver con JQuery, que en definitiva terminará llamando a las funciones JavaScript:

elemento.document.createElement('UN_TAG')
elemento.appendChild('UN_HIJO')

Lo que pasa es que en el primer caso, estás creando primero el UL con sus LI, y luego de creados, le estás diciendo al browser que lo agregue al DOM, lo que implica un renderizado.

Si en cambio creás primero el UL y lo agregás al DOM, y luego le vas a gregando los LI uno a uno, el browser tendrá que hacer un render para el UL, y luego un render para cada LI que se agregue, con lo que el tiempo que se tarda es mayor, y hasta es posible que veas flickear la pantalla.

Answer 2

Creo que la diferencia esta en que en el primer bloque de codigo se forma toda la lista y se agrega de una vez al body, en la segunda se crea solamente la etiqueta ul se agrega al body depues de ser agregado al body se le añade la lista a la etiqueta ul que se habia agregado al body, el problema seria por rendiemiento y lectura de codigo, en el primer caso agregaria la lista mas rapidamente y el codigo es mas legible, en el segundo bloque puede que al agregar la lista tome mas tiempo y el codigo es algo engorroso, Espero te alla servido :D