Recargando elementos del DOM. Buscando la manera eficiente.

[Pantaláimon]

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!

[Alexis88]

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

[Pantaláimon]

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!

[marlanga]

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.

[Pantaláimon]

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!

[Panino5001]

El uso de documentFragment también puede ayudarte: http://febrer.wordpress.com/2010/02/...on-javascript/

[Pantaláimon]

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!