Agilización de jQuery empty() o replaceWith() Funciones al tratar con elementos DOM grandes

Question

Permítanme comenzar pidiendo disculpas por no dar un fragmento de código. El proyecto en el que estoy trabajando es de propiedad y me temo que no puedo mostrar exactamente en lo que estoy trabajando. Sin embargo, haré todo lo posible para ser descriptivo.

He aquí un desglose de lo que sucede en mi solicitud:

1. usuario hace clic en un botón de
2. Server recupera una lista de imágenes en forma de una tabla de datos
3. Cada fila de la tabla contiene de 8 celdas de datos que a su vez contienen cada uno hipervínculo
   • cada solicitud por parte del usuario puede contener hasta 50 filas (I puede cambiar este número si es necesario)
   • Eso significa que la tabla contiene más de 800 elementos DOM individuales
   • Mi análisis muestra que jQuery("#dataTable").empty() y jQuery("#dataTable).replaceWith(tableCloneObject) ocupan el 97% del tiempo total de proceso y tardan en promedio 4 - 6 segundos en completarse.

estoy buscando una manera de acelerar cualquiera de las funciones de jQuery antes mencionados cuando se trata de elementos masivos DOM que necesitan ser removidos/reemplazado. Espero que mi explicación ayude.

Answer 1

jQuery empty() tarda mucho tiempo en su mesa, ya que hace una cantidad verdaderamente monumental de trabajo con el contenido del elemento de vaciado en el interés de la prevención de pérdidas de memoria. Si se puede vivir con ese riesgo, puede omitir la lógica utilizada y sólo hacer la parte que se deshace de los contenidos de la tabla de este modo:

while (table.firstChild) 
     table.removeChild(table.firstChild); 

o

table.children().remove(); 

Answer 2

¿Tiene que volver a llenar todo de una vez, o puede hacerlo en trozos en un setTimeout()? Me doy cuenta de que probablemente llevará más tiempo en pedazos, pero vale la pena para el usuario ver que algo sucede en lugar de un aparente bloqueo.

Answer 3

Recientemente tuve tablas de datos muy grandes que tardarían entre 15 segundos y un minuto de procesamiento al realizar cambios debido a toda la manipulación DOM que se realiza. Bajé a < 1 segundo en todos los navegadores pero IE (tarda 5-10 segundos en IE8).

La mayor ganancia de velocidad que encontré fue eliminar el elemento principal con el que estaba trabajando desde el DOM, realizar mis cambios y volver a insertarlo en el DOM (en mi caso, el tbody).

Aquí puede ver las dos líneas de código relevantes que me dieron incrementos de gran rendimiento (usando Mootools, pero pueden ser portados a jQuery).

update_table : function(rows) { 
    var self = this; 
    this.body = this.body.dispose(); //<------REMOVED HERE 
    rows.each(function(row) { 
     var active = row.retrieve('active'); 
     self.options.data_classes.each(function(hide, name) { 
      if (row.retrieve(name) == true && hide == true) { 
       active = false; 
      } 
     }); 
     row.setStyle('display', (active ? '' : 'none')); 
     row.store('active', active); 
     row.inject(self.body); //<--------CHANGES TO TBODY DONE HERE 
    }) 
    this.body.inject(this.table); //<-----RE-INSERTED HERE 
    this.rows = rows; 
    this.zebra(); 
    this.cells = this._update_cells(); 
    this.fireEvent('update'); 
}, 

Answer 4

lo que funcionó para mí es $("#myTable").detach() . Tuve que limpiar una mesa que tiene miles de filas. Intenté $("#myTable").children().remove(). Fue una mejora sobre $("myTable").empty(), pero aún muy lenta. $("#myTable").detach() demora 1 segundo o menos. Funciona bien en FF y Chrome. IE todavía es lento.