JQuery Toggle Method Lent sur 1000+ UL

Question

Je travaille sur un projet où je construis une arborescence et dans certains cas, mon arbre pourrait avoir plus de 1000 nœuds enfants. Le problème est vraiment lent comme une machine IE7.

Je ne fais aucune sorte d'animation ou quoi que ce soit, j'essaie simplement de cacher la prochaine UL dans l'article en utilisant la fonction bascule de JQuery. Quelqu'un at-il des idées sur la façon d'améliorer la performance?

Merci!

Answer 1

Vous pouvez essayer de générer au démarrage votre propre objet arborescence à partir du document DOM. Il suffit de parcourir tous les éléments et de les imbriquer dans les attributs et variables standard. Vous pouvez créer des pointeurs parents et enfants supplémentaires en utilisant $(element).get(0).parent = $(parent).get(0);

Ensuite, si vous souhaitez obtenir des éléments spécifiés, utilisez la fonction $.map. Nous l'avons utilisé pour préparer quelque chose comme firebug sur un projet. Il rebuilded tout portail 5000+ nœuds en 3 sec et a fourni un accès rapide sur IE6 +

Answer 2

Si bascule est lent, vous pouvez définir des styles CSS directement via jquery comme:

$(".tree_item").click(function(){ 
    //check the next ul if it is expanded or not 
    if(this.next('ul:hidden').length == 0){ 
    //if expanded hide it 
    this.next('ul').css('display', 'none'); 
    }else{ 
    //if not shown, show it 
    this.next('ul').css('display', 'block'); 
    } 
}); 

telle approche aiderait. Je ne sais pas si cela fonctionnerait plus vite mais essayez ...

Sinan.

Answer 3

Je ne suis pas surpris du tout que ce soit lent si votre arborescence est si grande. Silverlight 3 gère ce problème avec UI Virtualization.

Vous devrez rouler le vôtre en javascript, mais cela ne devrait pas être si difficile. Il suffit de créer une énorme div vierge qui correspond à la taille de l'arbre rendu et de la placer dans un div défilable, puis de restituer ce qui devrait apparaître. Changez-le sur l'événement onscroll.

Answer 4

J'ai trouvé que .toggle (showOrHide) est rapide. Il a été ajouté dans jQuery 1.3 et fait vraiment la différence sur les grandes collections (plus de 50 éléments) dans IE8 si l'animation n'est pas requise. L'état de visibilité actuel peut être obtenu à partir du premier élément, par exemple:

var isVisible = $('.myClass').first().is(':visible'); 
    $('.myClass').toggle(!isVisible);