Javascript OnScroll性能比较

更新：类似的问题，给出了一个非常好的答案，展示了如何以有用的方式使用requestAnimationFrame和scroll：

---

假设我想在我的网站上添加一些由滚动触发的昂贵操作。例如，我在JSFIDLE中使用视差效果

现在我一直在读，它不能直接绑定到事件，有时后面会有一些更好的片段。举几个例子：

他们说的基本上是不要这样做：

  // Bad guy 1
  $(window).scroll( function() {
    animate(ex1);
  });

还是这个

  // Bad guy 2
  window.addEventListener('scroll', onScroll, false);
  function onScroll() {
    animate(ex2);
  }

但是使用超时、间隔、requestAnimationFrame等等，例如：

  // Good guy
  $(window).scroll( function() {
   scrolling1 = true;
  });

  setInterval( function() {
    if (scrolling1) {
      scrolling1 = false;
      animate(ex3);
    }
  }, 50 );

因此，我将在上面的链接中找到的选项添加到一个JSFIDLE中，该JSFIDLE试图通过为每种方法添加一个计数器来比较它们，如下所示：

  // Test
  $(window).scroll( function() {
    counter = counter + 1;
    // output result of counter
    animate(ex1);
  });

最好检查完整版本或将其用于旧浏览器：（相同，只是不在JSFIDLE上）

结果：一切顺利进行的计算数量大致相同。如果我能忍受波涛汹涌的效果，也许我能获得一些资源。与我读到的所有东西相反，这在我看来是合乎逻辑的

第一个问题： 我是遗漏了什么还是这是一个有效的测试？如果它是无效的，我如何才能正确测试？ 编辑：为了澄清这一点，我想测试上述任何一种方法是否可以节省性能

第二个问题： 如果它是有效的，为什么每个人都对onscroll感到紧张？如果流体动画需要在整个场地上进行5000次计算，那么无论如何都无法更改它

---

（嗯，有时我会使用检查来确定对象是否在视口中，但老实说，我甚至不知道这些检查是否没有被阻止的代码本身那么昂贵，特别是如果它们涉及五个不同的变量，例如偏移量、窗口高度、滚动时间、getBoundingClientRect和outerHeight…）

我不能完全确定我是否正确理解了您的问题和所有陈述，但我将尝试给您一个答案：

• 我是遗漏了什么还是这是一个有效的测试？如果它是无效的，我如何才能正确测试

如果您正在测量一个函数被调用的次数，这是一个有效的测试，这当然取决于浏览器，因此，如果GPU得到了增强，并且您的问题中已经对一些其他基准参数进行了注释，那么这是一个有效的测试

如果我们认为测量是正确的，那么可以说，通过使用超时或请求动画框架>强>可以< /强>节省时间，因为我们基本上遵循以下原则：基本上，我们不希望请求或调用函数的次数超过需要的次数。在计时器的情况下，我们将队列更少的函数调用，在的情况下，因为它在重新绘制之前将队列调用，并将顺序执行它们。在超时情况下，如果计算量很大，可能会发生计算重叠

我在解释浏览器中动画的主要问题时找到了更好的答案，如剪切、闪烁或帧跳过。它还包括一个很好的演示

我认为您的测试方法是正确的，您也应该正确地解释它，可能由于您的硬件和引擎的原因，调用接近相同的数字，但是正如所说的，去抖动和节流是一种性能缓解

。（免责声明：本文来自2011年，浏览器以不同的方式处理滚动优化）

• 为什么每个人都对onscroll感到紧张？如果流体动画需要在整个场地上进行5000次计算，那么无论如何都无法更改它

我不认为在性能上有什么紧张的地方，但是对于上面提到的动画问题，用户体验将是最糟糕的，因为你的滚动覆盖可能会导致这些问题，或者即使你的计时器出现了不同步，你仍然可能会遇到同样的“性能”问题。人们只是建议保存通话以滚动，因为： 人类的视觉持久性不需要超高的帧速率，因此尝试更频繁地显示图像是无用的。

---

对于更复杂的计算或繁重的动画，浏览器已经在进行优化，如您所检查的，其中一些与2年、3年或6年前您所公开的文章相比。

因此，@sirpleople已经正确地回答了您的第一个问题，这确实是一个很好的测试，看看动画函数被调用的频率，但是比较不同代码片段的性能是一个糟糕的测试

这是执行的性能记录：

该函数

animate

一点也不贵。我拍摄了一张性能记录（下一张照片），显示在我观察的一次迭代中（第1-5点），它需要0.64ms到1.29ms之间的时间。一旦函数完成，重新绘制就不需要任何时间（第6点），这可能是因为页面几乎没有内容。当我们看一看时间，我们可以看到所有五个动画功能和重绘在不到10毫秒的时间内发生，这在正常情况下，意味着我们可以得到60帧/秒的流体动画（第7点）

此外，如果我们想比较onscroll事件侦听器，我们需要单独测试每个侦听器并比较结果。如果其中一个侦听器真的被阻塞了，它将对整个页面产生影响，如果没有性能调试，您将不知道是哪一个

我做了两个jsfiddle和一个jsfiddle。而且，令我惊讶的是，两者似乎没有任何区别

为什么人们会担心这一点

正如您在上面链接的jsfiddles中所看到的，如果事件处理程序太大，整个页面都会延迟

现在怎么办

我自己也不是表演大师，但是：

• 也许其他解决方案之一是正确的
• 我们可以将您的事件侦听器标记为被动，尽管在我的示例中，它并没有真正改善
• 我们可以通过消除视差效应来优化事件侦听器
• 还有这个