How to improve JS scroll performance?

Question

I'm working on revamping my website, and the new one can be found on http://beta.namanyayg.com/

There are mainly two things related to scroll on the site:

• To check on which 'page' the user is on, by calculating the top offset and scroll position, then adding a class to the page.
• To smooth scroll on menu click.

I've written code for both, but there is a lot of lag .

The first one almost always results in lagging. The second one, as a result, lags too. I have included a boolean to check if it's smooth scrolling and disabled the normal scroll events then, but there's not much change.

Do you have any advice on how to improve performance so there is no (or at least, less) lag? Thank you in advance! :)

...Or is it not related to JS at all? I've optimized everything else...

EDIT: Unminified JS at http://beta.namanyayg.com/js/main.js

Answer 1

如果你使用下划线 ，它有一个很棒的_.debounce函数，非常适合这种事情。

Answer 2

To check how much the user has scrolled from the top of the page (ie on which 'page' he is at the moment) can be achieved with:

$(window).scroll(function () { 
    var scrollAmount = $(window).scrollTop(); // in pixels

    if(scrollAmount > SOME_AMOUNT)
    {
       // add required css class
    }
});

To scroll smoothly, to some id for example, you could use:

$("html, body").animate({ scrollTop: $("#someID").scrollTop() }, 1000);

These are both jQuery solutions, so you should have jquery library included. There is also a nice jQuery plugin called waypoints that performs these calculations. It might prove useful to you and it has some other nice features and examples.

Answer 3

I have the same problem. I have a scrollable div with thousands of smaller divs. Every time I call scrollTop to get the scroll-position or set it, it sometimes waits at least 1 second.

I read these slides: http://www.slideshare.net/nzakas/high-performance-javascript-2011 (especially slides 138-139) and now I realize that every call to scrollTop, even as a getter, makes javascript relayout the page. This is most likely the cause of delay, but unfortunately I have not found a solution yet, as in a way to call scrollTop without causing relayouts.

Note: I've only been testing on Chrome.

Also read 'Browsers are smart' section of this article: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

Answer 4

I've found an easy solution to the lag with getting scrollTop, just call it inside a scroll-handler and save the result in a variable.

for example in jQuery:

var scrollPos = 0,
    element = $('.class');

element.scroll(function(){
    scrollPos = element.scrollTop();  
});

For the second problem, setting the scrollTop, I reduced the amount of DOM elements by only showing the visible elements. In your case make sure only the visible page(s) are added to the DOM. when scrolling to the next page, in the scroll handler remove the top one (use jQuery .detach) and append the next one to the DOM.