JavaScript：处理事件的有效方法（特定于 Firefox）答案

【问题标题】：JavaScript: An efficient way to handle events (Firefox-specific)JavaScript：处理事件的有效方法（特定于 Firefox）
【发布时间】：2015-10-26 17:58:07
【问题描述】：

我正在运行一个触发 TweenMax 动画的滚动事件，我注意到，虽然它在 Chrome 上看起来不错，但在 Firefox 上存在相当大的延迟。有没有人有关于如何尽可能有效地处理这个滚动事件的建议？此外，我不知道 Firefox 的渲染是否有某些原因可能会导致这种情况？任何线索将不胜感激！

要点是我正在我的页面上寻找名为“customers”的容器，每个容器都包含三个单独的“customer”元素。当匹配“customers”的 div 滚动到视图中时，触发 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');
        }
      }
    });
  }

【问题讨论】：

我看不到你的 jsFiddle 与 FireFox 有任何滞后。对我来说，它的运行方式似乎与 Chrome 相同。你在什么操作系统上？
我正在编辑我的帖子，提到小提琴只演示了这种行为。实际网站在 Firefox 上落后。
你试过 lagSmoothing() greensock.com/docs/#/HTML5/GSAP/TweenMax/static_lagSmoothing
我还没看到，我试试看，谢谢！

标签： javascript jquery firefox gsap

【解决方案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 是GSAP CSSPlugin 的一部分：

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

autoAlpha - 与 opacity 相同，只是当值达到 0 时，visibility 属性将设置为“隐藏”，以提高浏览器呈现性能并防止目标上的点击/交互。当值不是 0 时，可见性将设置为“继承”。为了尊重继承，它没有设置为“可见”（想象父元素被隐藏 - 将子元素显式设置为可见会导致它出现，而这可能不是预期的）。并且为方便起见，如果元素的可见性最初设置为“隐藏”并且不透明度为 1，它将假定不透明度也应该从 0 开始。这使得在页面上将内容设置为不可见变得简单（设置您的 css 可见性：隐藏)，然后随时淡入。

【讨论】：