Jquery hide() e show() vengono eseguiti troppo lentamente in google chrome

Question

Ho un'applicazione Web che non funziona correttamente in chrome. Funziona perfettamente in Firefox. Ho una pagina con un numero elevato di voci di elenco, 316 per la precisione. Ogni elemento dell'elenco contiene una grande quantità di HTML. Il mio problema è quando voglio nascondere o mostrare questi elementi della lista.

Ho una pagina di test su jsFiddle per mostrare il problema che sto avendo. Ho ridotto la pagina HTML a una lista non ordinata per contenere tutti i 316 elementi dell'elenco. Ho due pulsanti che richiamano semplicemente jQuery hide o show quando si fa clic. Di nuovo questo funziona velocemente in Firefox, Opera, persino IE, piuttosto bene in Safari, ma in Google Chrome ci possono volere più di 30 secondi che fanno apparire la finestra di dialogo che chiede se si vuole uccidere la pagina perché uno script è in esecuzione a lungo.

Ecco il link per jsFiddle

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

Grazie per ogni ingresso. jmm

Answer 1

Sembra che questo non abbia nulla a che fare con jQuery ed è solo un problema con Chrome che nasconde un elemento genitore che ha un numero ENORME di elementi figli.

Questo solo utilizza JavaScript di base per nascondere l'elemento sul documento pronto:

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

e ci vuole ancora per sempre dopo che il documento è pronto.

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

Aperto un bug Chrome per questo: http://code.google.com/p/chromium/issues/detail?id=71305

Answer 2

Quando nascondere, rimuovere l'elemento dal DOM è più veloce rispetto all'utilizzo di hide().

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

E 'ancora lento quando si append() di nuovo al DOM.

Una possibile soluzione è quella di mostrare i primi 10 oggetti quando si fa clic sul pulsante di visualizzazione, quindi setInterval per visualizzarli progressivamente.

---

Edit: Trovato un altro mod:

È necessario impostare il contenitore per overflow: hidden:

#linecontainer { overflow: hidden; } 

Quando nascondere, spostare l'elemento fino alla parte superiore di gran lunga, impostando margin-top a un grande numero negativo.

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

Durante la visualizzazione, reimpostare il valore margin-top.

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

E it shows and hides instantly.

Answer 3

Grazie per la risposta sopra, funziona alla grande e accelera il processo.

Tuttavia non funziona sempre - Funziona bene quando gli elementi di cui ho bisogno sono in cima alla lista. Tuttavia, non li mostra tutti se scelgo qualcosa dal centro della lista.

Credo di sapere perché si comporta male.

Quando il valore di un lungo elenco di elementi è impostato per nascondere/mostrare gli elementi nascosti vengono rimossi dal flusso e posizionati nella parte inferiore della pagina nell'ordine in cui sono stati rimossi.
Ciò rende la rimozione degli elementi notevolmente veloce.

Tuttavia, provare a renderli nuovamente visibili è un problema per il rendering poiché chrome deve ricordare l'ordine in cui questi elementi sono stati inclusi e sembra ricalcolare i valori associati.

Oltre alla maggior parte degli altri browser, lo spot per il componente non viene perso, quindi non si spreca tempo in questo ordinamento non necessario. La risposta di cui sopra funziona molto bene in quanto evita il problema di disordine di Chrome.