porque é que esta chamada .animate jQuery tão lento?

Question

Oi Eu tenho uma função bastante simples

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');
    }

A animação a sua auto, a mudança de opacidade, é muito rápido, mas não é como um atraso em chamá-lo. o console.time () está relatando tempos de 2540MS e maior. Eu estou pensando que pode ser porque o módulo div # está sendo animada, juntamente com seus filhos? mas esta dosent faz sentido, porque eu tenho outra função "disableModule", que faz a mesma coisa em corridas reversa e a uma velocidade razoável.

Aqui é a função Módulo desativar, consideravelmente mais acontecendo, mas retorna vezes de cerca de 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

Depois de alguma solução de problemas árdua i rastrearam a ser um problema com o circuito de detecção de navegador no método disable:

  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');});
      }
    });

Comentando este bloco para fora tudo o trouxe até a velocidade. Eu quase puxou meu cabelo para fora depois de tentar otimizar tudo o mais.

Answer 2

Você já tentou simplesmente re-Ording eles?

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

Animação acontece de forma assíncrona e os métodos find e remove poderia estar consumindo recursos (especialmente desde find anda a árvore DOM) que poderiam ser utilizados para a animação.

Além disso, como você está criando dinamicamente o "escudo desativado" no método disable, você poderia salvar-lo

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

e usar apenas essa referência em seu método enable para evitar a caminhada DOM

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

(Veja http://docs.jquery.com/Internals/jQuery.data para doc em $.data)