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.