Pourquoi cet appel jQuery .animate est-il si lent?

Question

Salut Tout ce que j'ai une fonction assez simple

enableModule : function(moduleName){ 
     var module = $('div#'+moduleName); 
     console.log('enabling '+moduleName); 
     console.time('animate'); 
     module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');}); 
     module.find('.disabled_sheild').remove(); 
     module.removeClass('disabled'); 
     console.log('end of enable Module'); 
    } 

L'animation de son auto, le changement d'opacité, est très rapide, mais il est comme un retard à l'appeler. le fichier console.time() indique des temps de 2540MS et plus. Je pense que c'est peut-être parce que le module div # est animé avec ses enfants? mais ce dosage a du sens car j'ai une autre fonction "disableModule" qui fait la même chose en inverse et s'exécute à une vitesse raisonnable.

est ici la fonction de désactivation du module, beaucoup plus de choses, mais retourne fois d'environ 242ms

disableModule : function(moduleName){ 
     $('div#'+moduleName+', div.'+moduleName).each(function(){ 
     var module = $(this); 
     module.prepend('<div class="disabled_sheild"></div>'); 
     var sheild = module.find('.disabled_sheild'); 
     sheild.css({'position' : 'absolute', 'z-index' : '200'}); 
     sheild.width(module.width()); 
     sheild.height(module.height()); 
     jQuery.each(jQuery.browser, function(i) { 
      if($.browser.msie){ 
       //module.css("display","none"); 
       //if using ie give sheild a transparent background layout 
      }else{ 
       console.time('animate'); 
       module.animate({'opacity' : '0.5'}, function(){ console.timeEnd('animate');}); 
      } 
      }); 
     }); 
    } 

Answer 1

Après un certain dépannage difficile i dépisté vers le bas pour être un problème avec la boucle de détection de navigateur dans le procédé de désactivation:

jQuery.each(jQuery.browser, function(i) { 
     if($.browser.msie){ 
     //module.css("display","none"); 
     //if using ie give sheild a transparent background layout 
     }else{ 
     console.time('animate'); 
     module.animate({opacity : 0.5}, 200, function(){console.timeEnd('animate');}); 
     } 
    }); 

Au sujet de ce bloc sur tout apporté à la vitesse. J'ai presque arraché mes cheveux après avoir essayé d'optimiser tout le reste.

Answer 2

Avez-vous essayé simplement les re-Ording?

module.find('.disabled_sheild').remove(); 
module.removeClass('disabled'); 
module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');}); 

animation se et les méthodes de manière asynchrone find et remove pourrait être consomme des ressources (en particulier depuis find promenades l'arbre DOM) qui pourraient être utilisés pour l'animation.

En outre, étant donné que vous créez dynamiquement le « bouclier désactivé » dans la méthode disable, vous pouvez l'enregistrer hors

module.data("disabledShield", module.prepend('<div class="disabled_sheild"></div>')); 

et il suffit d'utiliser cette référence dans votre méthode enable pour éviter les DOM marcher

module.data("disabledShield").remove(); 
module.removeClass('disabled'); 
module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');}); 

(Voir http://docs.jquery.com/Internals/jQuery.data pour doc sur $.data)