почему этот вызов jQuery .animate такой медленный?
-
05-07-2019 - |
Вопрос
Привет всем, у меня довольно простая функция.
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() сообщает о времени 2540 мс и больше.Я думаю, это может быть потому, что модуль 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');});
}
});
});
}
Решение
После некоторого трудного поиска неисправностей я разыскал это, чтобы быть проблемой с циклом обнаружения браузера в методе отключения:
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');});
}
});
Комментируя этот блок, вывели все на скорость. Я чуть не вырвал свои волосы после попытки оптимизировать все остальное.
Другие советы
Вы пробовали просто переупорядочить их?
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
module.data("disabledShield").remove();
module.removeClass('disabled');
module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');});
(Видеть http://docs.jquery.com/Internals/jQuery.data для документа $.data
)