Astuces pour optimiser les performances de certaines commandes Jquery dans IE

Afficher/masquer la grille du pouce est très lente dans IE8.Astuces pour optimiser les performances de certaines commandes Jquery dans IE

J'ai un pouce qui fonctionne avec un attribut de catégorie sur chaque pouce et certains bascule pour montrer les différentes catégories. Le code ci-dessous gère les pouces d'affichage/de masquage, mais cela est extrêmement lent dans IE et lance parfois l'avertissement «Un script est lent». Je suppose qu'il n'est pas nécessaire de dire que cela fonctionne très bien dans tous les autres navigateurs.

Ma question est: pouvez-vous nous aider avec quelques conseils de performance? Peut-être même des indices à savoir s'il est logique de réécrire ce bit au Javascript pur?

$('#cat-tab .categories-list a').live('click', function() { 
     var $this = $(this); 
     var $target = $('#cat-tab .video-results'); 
     var $text = $.trim($('span', $this).text()); 
     $scroll = $(window).scrollTop(); 

     $('#cat-tab .categories-list a').removeClass('active'); 
     $this.addClass('active'); 

     $('#cat-tab .video-results .channel').removeClass('hidden'); 
     if($text != 'All') { 
      $('#cat-tab .video-results .channel[rel!="'+$text+'"]').addClass('hidden'); 
     } 
     $.rePage(true); 

     return false; 
    });

Source

2010-11-29 Jens Sogaard

Quels plugins utilisez-vous avec jQuery, comme je le vois '$ .rePage()' là. – Orbling

Essayez de commenter certaines parties du script pour déterminer quelles parties causent la lenteur (je ferais d'abord un commentaire sur '$ .rePage (true)'). De combien d'éléments parlons-nous? (Combien d'éléments '$ target',' $ ('# cat-tab .categories-list' ') 'etc correspondent-ils?) – Matt

Cela n'a pas beaucoup de sens pour moi que ce code fonctionne lentement. Comment savez-vous * que c'est ce code? Je mettrais du code temporel dedans (créez une date au début et juste avant 'return' et vérifiez la différence) pour vous assurer, car (sauf si la page est vraiment énorme, combien de ces résultats .video. canal "éléments sont là?) il n'y a tout simplement pas beaucoup de travail en cours. – Pointy

Au lieu de trouver laborieusement et se cacher chaque élément de pouce individuel à partir du script, tirer parti des feuilles de style en faisant le travail pour vous:

#categories .channel { display: none; } 
#categories.category-all .channel { display: block; } 
#categories.category-1 .channel-1 { display: block; } 
#categories.category-2 .channel-2 { display: block; } 
#categories.category-3 .channel-3 { display: block; } 
#categories.category-4 .channel-4 { display: block; }

Maintenant, vous pouvez simplement définir le className de l'élément ancêtre #categories, et tous les pouces à l'intérieur vont montrer/cacher selon qu'ils ont une classe correspondante pour cette catégorie.

Source

2010-11-29 14:56:51 bobince

Les gens pensent généralement que c'est dégoûtant, mais une approche qui fonctionne quand il y a 200 "canaux" différents (pour utiliser cet exemple) est d'avoir ce style "display: none" dans un bloc statique de CSS, et ensuite avoir le le code met à jour un élément séparé '

Astuces pour optimiser les performances de certaines commandes Jquery dans IE

Répondre