Jquery hide () y show () se ejecuta demasiado lento en google chrome

Tengo una aplicación web que no se ejecuta correctamente en Chrome. Funciona perfectamente en Firefox. Tengo una página con un gran número de elementos de lista, 316 para ser exactos. Cada elemento de la lista contiene una gran cantidad de HTML. Mi problema es cuando quiero ocultar o mostrar estos elementos de la lista.

Tengo una página de prueba en jsFiddle para mostrar el problema que tengo. Desplegué la página HTML a una lista desordenada para guardar los 316 elementos de la lista. Tengo dos botones que simplemente llaman a jQuery ocultar o mostrar cuando se hace clic. Nuevamente, esto se ejecuta rápidamente en Firefox, Opera, incluso IE, bastante bien en Safari, pero en Google Chrome puede tardar más de 30 segundos, lo que hace aparecer el cuadro de diálogo que le pregunta si desea matar la página porque un script se está ejecutando durante mucho tiempo.

Aquí está el enlace a jsFiddle

http://jsfiddle.net/oumichaelm/UZCZc/3/embedded/result/

gracias por cualquier entrada jmm

Parece que esto no tiene nada que ver con jQuery y solo es un problema con Chrome que oculta un elemento principal que tiene un ENORME número de elementos secundarios.

Esto solo usa javascript básico para ocultar el elemento en el documento listo:

document.getElementById('sortable-lines').style.display="none"; 

Y todavía lleva una eternidad después de que el documento esté listo.

http://jsfiddle.net/petersendidit/UZCZc/10/embedded/result/

Abrí un error de Chrome para esto: http://code.google.com/p/chromium/issues/detail?id=71305

Cuando se oculta, eliminar el elemento del DOM es más rápido que usar hide() .

 var sortableLines = $('#sortable-lines'); $('#hide').click(function() { $('#timer').text("Hiding"); sortableLines.remove(); }); 

Todavía es lento cuando lo append() nuevo al DOM.

Una posible solución es mostrar los primeros 10 o más elementos al hacer clic en el botón Mostrar, y luego setInterval para mostrarlos progresivamente.


Edit: Encontré otro hack:

Tienes que configurar el contenedor para overflow: hidden :

 #linecontainer { overflow: hidden; } 

Cuando se oculte, mueva ese elemento hacia arriba, estableciendo el margin-top en un número negativo grande.

 $('#hide').click(function() { $('#timer').text("Hiding"); sortableLines.css('margin-top', '-1000000px'); }); 

Cuando se muestra, restablecer su margin-top .

 $('#show').click(function() { $('#timer').text("Showing"); sortableLines.css('margin-top', '0'); }); 

Y se muestra y se esconde al instante .

Gracias por la respuesta anterior, funciona muy bien y acelera el proceso.

Sin embargo, no siempre funciona: funciona bien cuando los elementos que necesito están en la parte superior de la lista. Sin embargo, no los muestra a todos si selecciono algo de la mitad de la lista.

Creo que sé por qué se porta mal.

Cuando el valor de una larga lista de elementos se configura para ocultar / mostrar, los elementos ocultos se eliminan del flujo y se colocan en la parte inferior de la página en el orden en que se eliminaron.
Esto hace que remover los elementos sea notablemente rápido.

Sin embargo, tratar de hacerlos visibles de nuevo es un dolor en el renderizado, ya que Chrome tiene que recordar el orden en que estos elementos pertenecían y aparentemente recompensar los valores asociados.

Aparte de la mayoría de los otros navegadores, el lugar para el componente no se pierde, por lo que no se pierde tiempo en esta clasificación innecesaria. La respuesta anterior funciona muy bien, ya que esto evita el problema de desorden de Chrome.