jQuery.toggle() extremadamente lento en muchas <TR> elementos

Tengo una tabla como la siguiente:jQuery.toggle() extremadamente lento en muchas <TR> elementos

<table> 
    <tr class="a"><td></td></tr> 
    <tr class="b"><td></td></tr> 
</table>

hay cerca de 800 filas y la mayoría de ellos de la clase a. Ahora quiero cambiar estas filas como esto:

$("#toggle_a").click(function(){ 
     $("tr.a").toggle(); 
    }); 
    $("#toggle_b").click(function(){ 
     $("tr.b").toggle(); 
    });

Pero esto es realmente muy lento y la mayoría de las veces el navegador quiere detener la acción.

¿Alguien tiene una idea de cómo hacer que esto sea más rápido y utilizable?

Fuente

2010-12-20 adnek

Parece pues jQuery elemento de búsqueda por nombre de la clase ..

Nota: El selector de clase es uno de los más lentos en selectores de jQuery; en IE es en bucle a través de todo el DOM. Evite usándolo siempre que sea posible.

también comprobar this artículo

Fuente

2010-12-20 10:53:54

Esto no es realmente el problema, es el reflujo de la tabla :) –

sí lo sé, pero ¿cómo llamar a varias filas en lugar de a clases? – adnek

puede usar cada instrucción y vincular haga clic una vez document.ready. Pero algunos muchachos expirienced sugieren reemplazar la mesa. –

No utilizar tablas si no se muestran los datos tabulares.

Los navegadores son notoriamente lentos cuando tiene tablas muy grandes (debido a la complejidad en las tablas de renderizado). Y habría bastante reflujo con este tipo de cambio.

Fuente

2010-12-20 10:54:54 Oded

en realidad estoy usando datos tabulares reales, por lo que no hay ninguna solución – adnek

@adenk - Considere tablas más pequeñas. 800 filas no son fáciles de usar, quizás un enfoque más dinámico ayudaría. Mostrando 40 filas a la vez, agregue paginación, quizás use AJAX para completar la tabla. – Oded

En lugar de usar la estructura de la tabla, use la etiqueta LI. Agilizará el proceso de renderizado html.

<UL style="padding: 0; list-style-type: none;"> 
    <LI class="a">1</LI> 
    <LI class="b">2</LI> 
    <LI>3</LI> 
    <LI>4</LI> 
</UL>

Ahora puede escribir el selector sobre esto. Esto sin duda será una mejora

Fuente

2010-12-20 11:45:56 Karan

que tenía un problema similar, pero con pocas líneas, alrededor de 200.

que utilizan .hide() y .show() y ahora esta casi instantánea.

Fuente

2013-07-24 21:02:16 Richard

Esta solución funcionó perfectamente, y me permitió evitar tener que cambiarme de un diseño de tabla (es información tabular). – Susan

Funcionó muy bien para mí también. Supongo que toggle() usa mucho más procesamiento que una simple declaración de cambio. –

jQuery.toggle() extremadamente lento en muchas <TR> elementos

Respuesta

Cuestiones relacionadas