JavaScript: эффективный способ обработки событий (специфично для Firefox)

Question

Я запускаю событие прокрутки, которое запускает анимации TweenMax, и я замечаю, что, хотя он выглядит хорошо в Chrome, в Firefox наблюдается значительное отставание. У кого-нибудь есть предложения о том, как обработать это событие прокрутки максимально эффективно? Кроме того, есть ли что-то в рендеринге Firefox, о котором я не знаю, что может быть причиной этого? Любые выводы будут оценены!

Суть в том, что я ищу контейнеры на своей странице под названием "клиенты", каждый из которых содержит три отдельных элемента "клиент". Когда div, который соответствует "customer", прокручивается в представление, запускается анимация TweenMax и добавляется класс с именем "animated", который предотвращает последующую реанимацию элемента.

Вот скрипка с основной демонстрацией: http://jsfiddle.net/epp37jsq/

РЕДАКТИРОВАТЬ

Чтобы уточнить, скрипка только демонстрирует поведение моей функции анимации. Лаг там не происходит, потому что размер файла довольно мал. На самом сайте у меня 11 групп по 3 "клиента". Изображение то же самое, но потянуто в 33 раза. В будущем изображения будут уникальными. По сути, анимация вызывается для каждой из этих 11 групп. Я ищу предложения о том, как улучшить скорость моей страницы.

И мой код:

var scrollTimer = null;
  $(window).scroll(function () {
      if (scrollTimer) {
          clearTimeout(scrollTimer);   // clear any previous pending timer
      }
      scrollTimer = setTimeout(handleScroll, 500);   // set new timer
      console.log("fired!");
  });

  function handleScroll() {
    scrollTimer = null;
    $('.customers').each(function() {
      if (!$(this).hasClass('animated')) {
        if ($(this).isOnScreen(0.45, 0.45)) {
          TweenMax.staggerFromTo($(this).find('.customer'), 0.3, {
              y: 50,
              opacity: 0
          }, {
              y: 0,
              opacity: 1,
              ease: Power2.easeOut
          }, 0.15);
          $(this).addClass('animated');
        }
      }
    });
  }

Answer 1

Обычно с Firefox, перевод на x или же y ось может вызвать рывок. Иногда добавляя небольшое rotation:0.001 чтобы ваша анимация могла помочь сделать вашу анимацию более гладкой в ​​Firefox.

http://jsfiddle.net/pwkja058/

Также с помощью специального свойства GSAP autoAlpha вместо opacity может помочь увеличить производительность

 TweenMax.staggerFromTo($(this).find('.customer'), 0.3, {
     y: 200,
     rotation:0.01, /* add a slight rotation */
     autoAlpha: 0 /* use instead of opacity */
 }, {
     y: 0,
     rotation:0.01, /* add a slight rotation */
     autoAlpha: 1, /* use instead of opacity */
     ease: Power2.easeOut
 }, 0.15);

autoAlpha является частью CSSAPlugin GSAP:

http://greensock.com/docs/

autoAlpha - идентичен непрозрачности, за исключением того, что когда значение достигает 0, свойство видимости будет установлено как "скрытое", чтобы повысить производительность рендеринга в браузере и предотвратить клики / интерактивность на цели. Если значение равно 0, видимость будет установлена ​​как "наследовать". Он не установлен на "видимый", чтобы соблюдать наследование (представьте, что родительский элемент скрыт - если явно установить дочерний элемент для видимого, он появится, когда, вероятно, это не то, что предполагалось). А для удобства, если видимость элемента изначально установлена ​​на "скрытый" и непрозрачность равна 1, предполагается, что непрозрачность также должна начинаться с 0. Это упрощает запуск вещей на вашей странице как невидимых (установите видимость css: скрытый), а затем затушевывайте их, когда захотите.