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

Question

Tengo una aplicación web que no se ejecuta correctamente en cromo. Funciona perfectamente en Firefox. Tengo una página con un gran número de elementos de la 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 estoy teniendo. Reduje la página HTML a una lista desordenada para contener todos los 316 elementos de la lista. Tengo dos botones que simplemente llaman a jQuery ocultar o mostrar cuando se hace clic. De nuevo, esto funciona rápido en Firefox, Opera, incluso IE, bastante bien en Safari, pero en Google Chrome puede demorar más de 30 segundos, lo que hace que aparezca la ventana de diálogo preguntándote si deseas eliminar la página porque el script se está ejecutando demasiado.

Aquí está el enlace a jsFiddle

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

gracias por cualquier entrada. jmm

Answer 1

Parece que esto no tiene nada que ver con jQuery y simplemente es un problema con Chrome ocultando un elemento padre que tiene una gran cantidad de elementos secundarios.

Esto sólo utiliza JavaScript básica para ocultar el elemento en el documento listo:

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

Y todavía lleva siempre según el documento está listo.

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

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

Answer 2

Cuando ocultar, 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 append() de nuevo a la DOM.

Una posible solución consiste en mostrar los primeros 10 o más elementos cuando se hace clic en el botón Mostrar, y luego setInterval para mostrarlos progresivamente.

---

Editar: encontrado otro truco:

Usted tiene que fijar el contenedor a overflow: hidden:

#linecontainer { overflow: hidden; } 

Cuando ocultar, mover ese elemento hasta la parte superior ahora, mediante el establecimiento de margin-top a un gran número negativo

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

Al mostrar, restablecer su margin-top.

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

Y it shows and hides instantly.

Answer 3

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 del medio de la lista.

Creo que sé por qué se comporta mal.

Cuando el valor de una larga lista de elementos está configurado 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 eliminar los elementos sea notablemente rápido.

Sin embargo, tratar de volver a hacerlos visibles es una molestia para el renderizado, ya que Chrome tiene que recordar el orden en el que estos elementos pertenecían y aparentemente volver a calcular los valores asociados.

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