小编use*_*091的帖子

所以,假设我想在滚动触发的网站上添加一些昂贵的操作.例如,我在我的jsfiddle中使用视差效果.

现在我继续阅读它不能直接绑定到事件,有时后面的片段应该更好.只是一些例子:

1. 将JavaScript处理程序附加到滚动事件=不好!
2. 如何开发高性能onScroll事件？
3. 如何制作更快的滚动效果？
4. 60FPS onscroll事件监听器

他们说的基本上不这样做:

  // 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 );

所以,我把上面链接中找到的选项添加到jsfiddle,试图通过在每个方法中添加一个计数器来比较它们,如下所示:

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

最好先检查完整的jsfiddle或使用旧的浏览器:Scrolltest(相同,只是没有上的jsfiddle)

结果:一切顺利运行的计算数量大致相同.如果我可以忍受波涛汹涌的效果,也许我可以保护一些资源.对于我读到的所有内容,这对我来说似乎合乎逻辑! …