Faster scrolling without onScroll?

Question

I was getting really excited after reading this article about faster scroll effects. I went implementing Warry's method to see if I could spot any difference in performance - compared to using the scroll event listener:

window.addEventListener('scroll', function() {
    console.log('Scrolling: ' + window.pageYOffset);
});

Code from article:

function loop() {
    if (lastPosition == window.pageYOffset) {
        requestAnimationFrame(loop);
        return false;
    } else lastPosition = window.pageYOffset;

    console.log('Scrolling: ' + window.pageYOffset);
    // make sticky calculations...

    requestAnimationFrame(loop);
}
loop(); // start loop

These two pieces of code output the same (Y)offset and seem to be equivalent performance-wise. So my question is: Is the article right?

Also, how does requestAnimationFrame fits in this picture? I know that it tells the browser that it wishes to perform a re-paint. Or... is position fixed simply the way to go? I'm interested in this topic because I'm working on a plugin for sticky elements.

Any info or advice is appreciated!

"*seem to be equivalent performance-wise*" - how did you measure that? — Bergi, Oct 25 '16 at 22:16
The point is about more efficient *effects*. If you're just logging to the console, you won't feel a difference (apart from possible different number or logs). — Bergi, Oct 25 '16 at 22:17
The outputs were the same on each tick. I also toggled all rendering functionalities (Paint flashing, Layer borders, FPS meter and Scroll Performance Issues) on Chrome's DevTools to see how sticky elements would perform. There weren't any noticeable differences. I didn't write tests for this; just curious what others can tell me about this topic. — JasonK, Oct 25 '16 at 22:39

score 6 · Accepted Answer · answered Oct 27 '16 at 13:54

Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent.

It’s important to not only use requestAnimationFrame for your animations, but also to use it in the right way. - html5rocks

Also see https://developer.mozilla.org/en-US/docs/Web/Events/scroll

This is a nice little piece of code to get the right browser prefix. If requestAnimationFrame is unsupported, we fall back to setTimeout(function(){}, 0).

var requestAnimationFrame = window.requestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.msRequestAnimationFrame
    || window.oRequestAnimationFrame
    || function(callback){ setTimeout(callback, 0) };

// Usage
window.addEventListener('scroll', function() {
    requestAnimationFrame(this.scroll); // call scroll event handler
});

Faster scrolling without onScroll?

1 Answers1