entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Forma eficiente de modificar el DOM con jQuery

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?

2 Respuestas

2votos

Leonardo-Tadei Puntos226650

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.

1voto

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

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta