Foros del Web » Programando para Internet » Javascript »

Recargando elementos del DOM. Buscando la manera eficiente.

Estas en el tema de Recargando elementos del DOM. Buscando la manera eficiente. en el foro de Javascript en Foros del Web. Buenas, Tengo un tag contenedor ul en el cual se incorporaran dentro varios tags li en función de una petición ajax. Según la petición habrá ...
  #1 (permalink)  
Antiguo 23/07/2014, 01:32
 
Fecha de Ingreso: julio-2006
Ubicación: Barcelona
Mensajes: 244
Antigüedad: 13 años, 6 meses
Puntos: 32
Recargando elementos del DOM. Buscando la manera eficiente.

Buenas,

Tengo un tag contenedor ul en el cual se incorporaran dentro varios tags li en función de una petición ajax. Según la petición habrá menos o más tags de tipo li.

En aras de la eficiencia tengo un array en memoria donde pienso guardar estos elementos li. Pongo un ejemplo:

- Al principio tengo un array nodos con 0 elementos.
- Hago una petición ajax que me devuelve un array de 20 objetos. Con lo cual, creo 20 elementos li, les inserto los datos correspondientes y los guardo en el array nodos y después los añado al elemento ul.
- Hago una petición ajax que me devuelve un array de 30 objetos. Con lo cual alargo el array nodos hasta tener 30 elementos li. Luego los relleno con los datos correspondientes y los anido al elemento ul en el DOM
-Hago una petición ajax que me devuelve 10 objetos. Con lo cual, relleno los 10 primeros elementos del array nodos con los datos correspondientes y luego los anido al elemento ul en el DOM.

Me gustaría saber si lo estoy haciendo bien o hay maneras mejores de interactuar con el DOM.

Un saludo!
__________________
github.com/xgbuils | npm/xgbuils
  #2 (permalink)  
Antiguo 23/07/2014, 01:49
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 2 meses
Puntos: 934
Respuesta: Recargando elementos del DOM. Buscando la manera eficiente.

Pues, si la respuesta de la petición asíncrona te devuelve un conjunto de elementos, en lugar de guardarlos en un array, itera directamente sobre ellos y los vas añadiendo a la lista desordenada. No veo la necesidad de guardar los datos recibidos en un array además añadirlos a la lista, a menos que pretendas realizar otras acciones con ellos.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #3 (permalink)  
Antiguo 23/07/2014, 02:18
 
Fecha de Ingreso: julio-2006
Ubicación: Barcelona
Mensajes: 244
Antigüedad: 13 años, 6 meses
Puntos: 32
Respuesta: Recargando elementos del DOM. Buscando la manera eficiente.

Gracias por la respuesta Alexis88.

Yo lo decía de hacer así para evitar crear elementos li por cada petición. Tengo la impresión que crear elementos li a cada petición es ineficiente, pero quizá ando equivocado.
Sigo investigando y (corrígeme si me equivoco) el problema crítico de interactuar con el DOM es agregar elementos en el DOM activo, porque el navegador estaría recalculando tags a cada iteración. De manera que lo interesante sería extraer el tag ul del DOM(removeChild?), insertarle los elementos li y volverlo a insertar al DOM. Esto lo intuyo de las recomendaciones que leo por internet de cuando se quiera interactuar con el DOM aprovecharse de la función $.fn.detach()

Un saludo!
__________________
github.com/xgbuils | npm/xgbuils
  #4 (permalink)  
Antiguo 23/07/2014, 03:42
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 9 años
Puntos: 206
Respuesta: Recargando elementos del DOM. Buscando la manera eficiente.

Cachear siempre es mas eficiente. Pero gastarás mas memoria, la historia de siempre, rendimiento VS memoria.

¿El consumo extra de memoria compensa la mejora de rendimiento? Quizá. Pero estamos hablando de un escenario html donde el usuario medio no lo notará nunca; quizás lo perciba si se recuperan decenas de miles de items li de la lista a menudo, algo que probablemente nunca ocurra; y aún así, el cuello de botella será el tiempo que tarde la llamada ajax en enviarse y responder.

En cuanto a la mejora del cacheo, aunque ahora hablo tirando de imaginación y suposiciones, tampoco creo que sea demasiado relevante. Yo supongo que lo que más "le cuesta" al DOM no es crear elementos, si no incrustarlos en el DOM de la página (tras lo cual el navegador debe aplicarles los estilos y crearles los eventos de javascript para que funcionen). Y esa tarea, cachees los elementos o no, no te libras de que se ejecute igual.
  #5 (permalink)  
Antiguo 23/07/2014, 04:10
 
Fecha de Ingreso: julio-2006
Ubicación: Barcelona
Mensajes: 244
Antigüedad: 13 años, 6 meses
Puntos: 32
Respuesta: Recargando elementos del DOM. Buscando la manera eficiente.

Cita:
Iniciado por marlanga
En cuanto a la mejora del cacheo, aunque ahora hablo tirando de imaginación y suposiciones, tampoco creo que sea demasiado relevante. Yo supongo que lo que más "le cuesta" al DOM no es crear elementos, si no incrustarlos en el DOM de la página (tras lo cual el navegador debe aplicarles los estilos y crearles los eventos de javascript para que funcionen).
Exacto, esto es a lo que quería referirme cuando hablé de lo que había leido sobre el método $.fn.detach de jQuery. Las incrustaciones no se pueden evitar, pero se pueden reducir a las mínimas necesarias. Una opción que veo es extraer el elemento ul del DOM. Insertarle los elementos li a ul y volver a incrustar ul en el DOM. Así el recalculo de estilos y eventos javascript solo se hace una vez, ¿no? ¿Es una idea efectiva?

Un saludo!
__________________
github.com/xgbuils | npm/xgbuils
  #6 (permalink)  
Antiguo 23/07/2014, 13:37
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.102
Antigüedad: 15 años, 7 meses
Puntos: 791
Respuesta: Recargando elementos del DOM. Buscando la manera eficiente.

El uso de documentFragment también puede ayudarte: http://febrer.wordpress.com/2010/02/...on-javascript/
  #7 (permalink)  
Antiguo 23/07/2014, 14:45
 
Fecha de Ingreso: julio-2006
Ubicación: Barcelona
Mensajes: 244
Antigüedad: 13 años, 6 meses
Puntos: 32
Respuesta: Recargando elementos del DOM. Buscando la manera eficiente.

Gracias Panino5001,

Usando documentFragments veo que no hace falta ni remover ul del DOM. Se crea un documentFragment fuera del DOM, se le añaden los elementos li y luego se añade el documentFragment al elemento ul. Me ha gustado la idea.

Un saludo!
__________________
github.com/xgbuils | npm/xgbuils

Etiquetas: ajax, buscando, dom, elementos, manera
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:10.