title: Javascript OnScroll performance comparison
body: <p><strong>Update</strong>: Similiar question with a very good answer that shows how to use requestAnimationFrame with scroll in a useful way:
  <a href="https://stackoverflow.com/questions/41740082/scroll-events-requestanimationframe-vs-requestidlecallback-vs-passive-event-lis">scroll events: requestAnimationFrame VS requestIdleCallback VS passive event listeners</a></p>
  <hr />
  <p>So let's say I want to add some expensive action on my site triggered by scrolling. For example, I'm using parallax effects in my jsfiddle.</p>
  <p>Now I keep reading it must not be bound to the event directly, sometimes followed by snippets that are meant to be better. Just some examples:</p>
  <ol>
  <li><a href="https://benmarshall.me/quit-attaching-javascript-handlers-to-scroll-events/" rel="nofollow noreferrer">Attaching JavaScript Handlers to Scroll Events = BAD!</a></li>
  <li><a href="http://joji.me/en-us/blog/how-to-develop-high-performance-onscroll-event" rel="nofollow noreferrer">How to develop high performance onScroll event?</a></li>
  <li><a href="https://gist.github.com/Warry/4254579" rel="nofollow noreferrer">How to make faster scroll effects?</a></li>
  <li><a href="https://gist.github.com/paulmillr/3118943" rel="nofollow noreferrer">60FPS onscroll event listener</a></li>
  </ol>
  <p>What they say is basically don't do this:</p>
  <pre><code>  // Bad guy 1
    $(window).scroll( function() {
      animate(ex1);
    });
  </code></pre>
  <p>or this</p>
  <pre><code>  // Bad guy 2
    window.addEventListener('scroll', onScroll, false);
    function onScroll() {
      animate(ex2);
    }
  </code></pre>
  <p>But use timeouts, intervals, requestAnimationFrame and whatnot, for example:</p>
  <pre><code>  // Good guy
    $(window).scroll( function() {
     scrolling1 = true;
    });
  
    setInterval( function() {
      if (scrolling1) {
        scrolling1 = false;
        animate(ex3);
      }
    }, 50 );
  </code></pre>
  <p>So, I went and added the options I found in the links above to a jsfiddle that tries to compare them by adding a counter to every approach, like so:</p>
  <pre><code>  // Test
    $(window).scroll( function() {
      counter = counter + 1;
      // output result of counter
      animate(ex1);
    });
  </code></pre>
  <p>Best to check the complete <a href="https://jsfiddle.net/fxqkt2eu/" rel="nofollow noreferrer">jsfiddle</a></p>
  <p><strong>Outcome</strong>: Everything that works smooth is about the same number of calculations. If I can live with choppy effects, maybe I can safe some resources. And against everything I read, this seems logical to me!</p>
  <p><strong>First question:</strong>
  Am I missing something or is this a valid test? If it's invalid, how could I test correctly?
  <em>Edit: To clarify, I want to test whether any of the above methods save performance at all.</em></p>
  <p><strong>Second question:</strong>
  If it is valid, why is everyone nervous about onscroll? If fluid animations require 5000 calculations over the complete site, there's no way to change it anyway?</p>
  <p>(Well, sometimes I use checks to determine whether an object is in the viewport or not, but honestly I don't even know if those checks aren't as expensive as the prevented code itself, especially if they involve five different variables such as offset, windowHeight, scrolltTop, getBoundingClientRect and outerHeight...)</p>