Un bajo rendimiento o lentitud con el uso de append() y el DOM es común cuando se manejan datos grandes o medianos o en bastante cantidad. Veamos cómo aumentar la velocidad de append() en jQuery
La velocidad se merma al analizar y modificar el DOM, que se realiza por cada invocación a la función append(). Por lo que se debe, y se puede, reducir al mínimo. Por ejemplo:
Lento
$.each(data,function(index,value) {
// Por cada valor, un append()
$('#elemento').append('Dato #'+index+': '+data[index].propiedad);
});
Optimizado con un buffer
var output = "";
$.each(data,function(index,value) {
// Volcado a una variable
output += 'Dato #'+index+': '+data[index].propiedad;
});
// Un unico output
$('#elemento').append(output);
En este último ejemplo, la variable output puede contener HTML en String como es el caso, o bien elementos DOM.
Como nota final, en una determinada prueba con +3.000 registros, ¡el tiempo se reducía en un 78%!
