Améliorer les performances de ce script jquery

Question

Cela fonctionne vite par rapport à d'autres. Mais je ne sais pas à quelle vitesse il serait sur les ordinateurs lents .. Le code filtre les résultats dymanically. Les critères sont définis dans la classe css ..

$(document).ready(function() 
{ 


    $("#filters a").click(function(event) 
    { 
     event.preventDefault(); 
     event.stopPropagation(); 
     if($(this).hasClass("checked")) 
     { 
      $(this).removeClass("checked"); 
     } 
     else if(!$(this).hasClass("disabled")) 
     { 
      $(this).addClass("checked"); 
     } 
     else 
      { 
       return false; 
      } 


     var results=$("#products li"); 
     results.hide(); 
     $("#filters li.filtersGroup a").removeClass("disabled"); 
     $("#filters li.filtersGroup").each(function(index) { 
      var classes=""; 

      $(this).find("a.checked").each(function(index) { 
       classes=classes+ "." + $(this).attr("id") +","; 
      }); 
      if(classes=="") return true; 

      results=results.filter(classes.substr(0,classes.length-1)); 
//periorismos 
       $("#filters li.filtersGroup").not($(this)).each(function (index){ 
        $(this).find("a").each(function(index) { 


       if(results.filter("." + $(this).attr("id")).length<=0) { 
         $(this).removeClass("checked").addClass("disabled"); 
        } 

      }); 



     }); 
    }); 
    results.show(); 



}) 
}); 

Des idées pour l'améliorer? Aussi Que puis-je faire preventDefault (itsnot en considération si le isnt tout document chargé, car cela peut être un problème pour les personnes impacient ..

Answer 1

Une chose que je remarque est que vous faites un beaucoup d'appels inutiles à $() :.

if($(this).hasClass("checked")) 
    { 
     $(this).removeClass("checked"); 
    } 
    else if(!$(this).hasClass("disabled")) 
    { 
     $(this).addClass("checked"); 
    } 
    else 
    { 
     return false; 
    } 

Chaque fois que vous faites $(this), il y a plusieurs appels de fonctions sous-jacentes et quelques allocations de mémoire en jeu, il est tout à fait unnecssary Il suffit de faire:.

var $this = $(this); 

... au début, puis:

if($this.hasClass("checked")) 
    { 
     $this.removeClass("checked"); 
    } 
    else if(!$this.hasClass("disabled")) 
    { 
     $this.addClass("checked"); 
    } 
    else 
    { 
     return false; 
    } 

Ce (sans jeu de mots) applique à chaque fois que vous appelez $(), non seulement $(this), mais vous devez être sûr que vous ne cache le résultat aussi longtemps comme il sera vraiment inchangé (car cela varie en fonction du sélecteur ou de l'élément que vous passez). Sans passer en revue avec un peigne à dents fines, par exemple, vous pouvez probablement mettre en cache le résultat de $("#filters li.filtersGroup") dans au moins un endroit plutôt que de faire de nouveau jQuery.

Answer 2

Dans T.J. Réponse de Crowder

Vous pouvez également nettoyer vos références à $("#filters li.filterGroup") comme celui-ci

var $filtersGroup = $("#filters li.filtersGroup"); 
$("a", $filtersGroup).removeClass("disabled"); 
$filtersGroup.each(function(index) { 
    ..... 
)}