Generando HTML masivo

[JairLizcano]

Ahora que me encuentro con la particularidad de generar grandes fracciones de HTML en el cliente después de una petición previa al servidor, me percato de una serie de cuestiones de rendimiento de las que me gustaría escuchar algo más de información.

Naturalmente trabajo con DOM y sus respectivas funciones para generar nodos HTML de forma dinámica, y sencilla, es decir; código de unos cuantos contenedores indicando "algo" o bien la respuesta del servidor mismo en un simple elemento span.

Ahora bien, la respuesta de mi servidor está codificada en JSON y ésta está definida con una serie de parámetros que no vendrían al caso. Nótese que no he mencionado que el servidor responda con HTML, sino con una serie de variables representadas en el formato anteriormente mencionado. La generación de HTML la hago en el cliente a partir de los parámetros decodificados de la respuesta del servidor.

El código HTML que estoy intentando anexar es realmente extenso, casi 80 líneas por objeto decodificado del servidor, razón por la cual descarté la funciones respectivas de creación de elementos de DOM y empecé a trabajar directamente con la propiedad innetHTML de cada contenedor, algo como:

Código:

function addObject(id, value) {

     var objects_container = document.getElementById('objects-container');

     objects_container.innerHTML += "<article id = '" + id + "'><span>" + value + "</span></article>";
}

El código HTML embebí anteriormente es sólo una pequeña fracción, pero generalmente, repito, son 80 líneas por objeto y aseguró que serán más.

A su vez si estamos hablando de que al decodificar la respuesta del servidor encontramos 5 objetos, el HTML generado ya es considerable.

Sinceramente me preocupa demasiado como se comporta la propiedad innerHTML ya que realmente sobreescribe el contenido HTML del contenedor, y si estoy hablando de que dicho contenedor ya tiene por lo menos 1000 líneas de HTML previamente generado... me deja mucho qué pensar.

Me gustaría saber qué otras opciones o modificaciones al anterior hay para anexar HTML de forma masiva en JS.

Dejo explícito mi caso, tal vez más de lo que debería.

Desde ya, muchas gracias.

[zerokilled]

buenas,
puedes optar por crear el contenido en un elemento temporero y luego lo agregas al destino mediante métodos del DOM. en tu caso particular no te recomendaría usar innerHTML como lo haz estado haciendo hasta ahora. principalmente por dos razones: el rendimiento y la posibilidad de corromper parte de la aplicación. innerHTML te da la facilidad de reconstruir el DOM de forma rápida, lo cual es beneficioso y requiere menos líneas de código para escribir. pero en tu caso, requieres traer nuevo contenido y agregarlo sobre el ya presente. esto generaría cierta sobrecarga innecesaria ya que el navegador tiene que volver a reconstruir el DOM de un contenido que ya estaba presente. es por eso que no te recomiendo usar innerHTML en ese elemento particular.

las soluciones... de momento se me ocurren dos. el elemento temporero o un fragmento de documento (DocumentFragment), pero este último no tengo idea hasta que punto tiene soporte, especificamente en iexplorer. básicamente el procedimiento es casi el mismo para ambos. creas un elemento, agregas el contenido por innerHTML, y luego transfiere el contenido con appendChild.

Código:

var elem = document.createElement('div');
elem.innerHTML = "todo el contenido html procesado del json";
while(elem.firstChild) destino.appendChild(elem.firstChild);

[Panino5001]

Totalmente de acuerdo con el amigo zerokilled. Añado un par de cosas: createDocumentFragment es compatible con todos los navegadores -ya funcionaba en Explorer 6-, y se utiliza para añadir en muchos elementos html en él, que como es un contenedor que no forma parte del árbol DOM, evita el recálculo posicional (reflow) que produce cada appendChild.

[marlanga]

Solo dos detalles:
Si utilizas el innerHTML, no lo trabajes sobre él contínuamente. Almacena toda la cadena HTML en una variable, y como linea final envía esa cadena al innerHTML.

Si utilizas las funciones de gestión de nodos del DOM (createElement, etc), NO TRABAJES sobre elementos que estén metidos en el DOM de la página. Por ejemplo, si quieres añadir nodos <LI> a una lista <UL>, es MUCHO MÁS RÁPIDO crear una nueva lista con document.createElement("ul"), insertarle los nodos LI a esa lista "virtual", y por último, borrar la vieja lista que está en el DOM y añadir la nueva en la misma posición.

var li=