Оптимизация кода наведения jQuery для повышения производительности (более плавная анимация) - PullRequest
Новая
       6

Оптимизация кода наведения jQuery для повышения производительности (более плавная анимация)

2 голосов
/ 07 октября 2009

В последнее время я трачу некоторое время на чтение советов по оптимизации jQuery, которые, безусловно, помогли повысить производительность моих скриптов.

Тем не менее, у меня есть специальный раздел новостей на моем сайте, который при наведении курсора мыши перемещает дополнительную информацию на место, и этот раздел не очень хорошо работает ни в одном браузере, кроме Safari (и, вероятно, Chrome тоже).

Причина этого, я полагаю, заключается в том, что перед анимацией происходит довольно много обхода DOM и вычислений для каждого события mouseover / mouseout.

У меня простой вопрос: есть ли способ оптимизировать приведенный ниже код, чтобы анимация работала более плавно? 

$('#featuredSide .featuredBox,#featuredBottom .featuredBox,#archiveVideos .featuredBox').hover(function(){ 
var boxHeight = parseInt($(this).css('height'))-8;
var bottomOrSide = $(this).parents("div[id^='featured']").attr("id")
var captionPos = 76;
var captionHeight = parseInt($(this).find(".videoCaption").css('height'));
var animateTo = boxHeight-captionHeight;

$(".videoCaption", this).stop().animate({top:animateTo + 'px'},{queue:false,duration:160});
}, function() {
$(".videoCaption", this).stop().animate({top:captionPos},{queue:false,duration:100});
});

Поскольку сайт, над которым я работаю, еще не опубликован, я загрузил снимок экрана с разделом новостей , чтобы дать вам представление о том, как он выглядит.

Спасибо!

Ответы [ 3 ]

2 голосов
/ 07 октября 2009

Для начала можно сделать Устранение общего подвыражения , например, вместо вызова 

$(this)

несколько раз, сохраните этот объект в переменной и используйте вместо него эту переменную. 

var current = $(this);

С другой стороны, переменные одноразового использования могут быть встроенными. Некоторые могут назвать их преждевременной оптимизацией, но поскольку уже заявлено, что код медленный, я не думаю, что он преждевременный.

Кажется, здесь не используется переменная bottomOrSide.

Что касается селектора, можно заменить всю длинную вещь этим? 

$('.featuredBox')
2 голосов
/ 07 октября 2009

Другое решение было бы запомнить все вычисления.

Не вызывайте hover напрямую, используйте «каждый», рассчитайте, а затем примените «hover».
Таким образом (я попытался изменить код как можно меньше): 

$('#featuredSide .featuredBox,#featuredBottom .featuredBox,#archiveVideos .featuredBox').each(function(){ 
  var boxHeight = parseInt($(this).css('height'))-8;
  var bottomOrSide = $(this).parents("div[id^='featured']").attr("id")
  var captionPos = 76;
  var captionHeight = parseInt($(this).find(".videoCaption").css('height'));
  var animateTo = boxHeight-captionHeight;

  var params = {top:animateTo + 'px'};
  var options = {queue:false,duration:160};
  var target = $(".videoCaption", this);

  $(this).hover(function () {
    target.stop().animate(params, options);
  });
}

Это решение сделает мой предыдущий ответ несколько спорным (они не будут иметь большого значения, хотя все еще применимы). Не забудьте профиль, хотя.

1 голос
/ 07 октября 2009

Вы выполняете часть работы несколько раз, что причинит вам боль. Сложно сказать, но попробуйте это ... 

var el = $(this);
var vid = $(".videoCaption", this);
// use el.blar() instead of $(this) and vid.blar() instead of $(".videoCaption", this).blar()

Также похоже, что ваша структура dom должна быть разной во всех разных местах, где используется эта панель, так как ваш код, похоже, должен проделать большую работу, чтобы найти подходящие биты dom для использования. Если возможно, я бы рекомендовал сделать структуру DOM одинаковой во всех разных местах, а затем использовать эту структуру в коде.

Если это невозможно, попробуйте написать уникальную версию этой функции для каждого местоположения - не идеально, но если это решит вашу проблему с производительностью, это может стоить того.

...