Cómo aumentar la velocidad de append() en jQuery

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%!