为什么这个jQuery .animate调用这么慢？

Question

大家好我有一个很直接的功能

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

动画的自我，不透明度的变化，非常快，但有一个延迟调用它。 console.time（）报告的时间为2540MS及更高。我想这可能是因为div＃模块和它的孩子一起被动画了？但这个剂量有意义，因为我有另一个功能“disableModule”它以相反的方式做同样的事情并以合理的速度运行。

这是禁用模块功能，相当多，但返回时间约为242毫秒

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

经过一些艰苦的故障排除后，我将其跟踪为禁用方法中浏览器检测循环的问题：

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

评论这个区块让一切都变得快速。在尝试优化其他所有内容之后，我几乎把头发拉了出来。

Answer 2

您是否尝试过简单地重新定位它们？

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

动画是异步发生的， find 和 remove 方法可能会消耗资源（特别是因为 find 遍历DOM树），否则曾经用于动画。

此外，由于您正在动态创建“禁用的盾牌”，在 disable 方法中，您可以将其保存

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

并在 enable 方法中使用该引用以避免DOM walk

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

（参见 http://docs.jquery.com/Internals/jQuery.data for doc on $ .data ）