¿Por qué este jquery es tan lento?

Question

Estoy usando un plugin jquery que corrige los encabezados en una tabla html que genero. Por desgracia, el rendimiento del plugin es muy lento y yo he reducido al siguiente código:

var $tbl = $(this); 
var $tblhfixed = $tbl.find("thead"); 
$tblhfixed.find("th").each(function()  
    $(this).css("width", $(this).width()); 
}); 

Esto es tomar unos 40 segundos sobre una mesa con 2.000 filas en el IE. ¿Alguien sabe por qué es tan lento y más importante cómo puedo hacerlo más rápido? He probado muchos otros complementos y este es el único que funciona como yo quiero. Gracias por cualquier ayuda

Answer 1

el culpable es probablemente el .each.

La razón es que cuando itera usando .each en lugar de un bucle normal, llama a una función para cada iteración. En este caso, una llamada a una función tiene una sobrecarga bastante grande, ya que debe crearse una nueva pila de llamadas para cada iteración.

para hacerlo más rápido cambiar

$tblhfixed.find("th").each(function()  
    $(this).css("width", $(this).width()); 
}); 

a

var elms = $tblhfixed.find("th"); 
for(var i=0, elm;elm = elms[i];i++) { 
    elm.css("width", elm.width()); 
} 

Answer 2

no se debe repetir $(this) dentro de su función pasó a .each(). envolver un elemento tiene una sobrecarga no trivial, lo cual no está bien cuando tienes 20k elementos. desea eliminar tanto trabajo como sea posible dentro de la llamada .each(), o eliminarlo por completo.

Además, ¿por consulta find() dos veces, cuando se puede hacer esto en su lugar, que debe dar los mismos resultados:

$ths = $('table thead th'); //or tableid, or something 
$ths.css('width', $ths.width()); 

Answer 3

En primer lugar, se debe utilizar find() sólo cuando se necesita pasar a través de todos los nodos anidados. Aquí puede usar children().

En segundo lugar, cada vez $(this) crea nueva instancia de objeto jQuery, mientras que se puede crear una vez:

var $this = $(this); 

Cada vez $(this).width() se recalcula. Asegúrese de que necesita que se vuelva a calcular. O DO:

var tableWidth = $this.width(); 

Y en tercer lugar, de acuerdo a @ Martin Jespersen, cada iteración se crea el objeto function.

Además, no necesita jQuery aquí en absoluto. Puede acceder al DOM directamente:

var tableWidth = ...; // get the table width the way you want 
var thead = this.tHead; 
var thRow = thead.rows[0]; 
for (var i = 0; i < thRow.length; ++i) { 
    thRow.cells[i].style.width = tableWidth + "px"; 
} 

Answer 4

Creo que se enfrentó con el mismo problema que tuve hace un tiempo. Se llamaba "Recalcular diseño" o algo así.

tratar de separar este script en dos bucles, así:

var $tbl = $(this); 
var $tblhfixed = $tbl.find("thead"); 
var widths = []; 

// 1. 
$tblhfixed.find("th").each(function() 
    widths.push($(this).width()); 
}); 

// 2. 
$tblhfixed.find("th").each(function (index, element) 
    $(this).css("width", widths[index]); 
}); 

El primero calculará todos los anchos.Segundo, se aplicará a TH

UPD: Usted puede aumentar el rendimiento mediante la colocación de este código entre 1 y 2 .:

$tblhfixed.hide(); 

y mostrar de nuevo después de 2 .:

$tblhfixed.show(); 

Answer 5

parece que .width $() es 99 veces más lento que el get nativo (0) .clientWidth, echa un vistazo a esta prueba: http://jsperf.com/jq-width-vs-client-width