What techniques should I use when implementing infinite scrolling on a website?

Question

I am currently working on a website which implements infinite scrolling on it's search page (the results themselves coming from Elastic search) and, unsurprisingly, the more you scroll the slower things get.

This is especially prominent on mobile devices, and in particular lower cost devices (which most people use).

We have put a lot of work into making the site responsive on mobile devices from an HTML/CSS perspective, but inevitably as you add more items to the DOM, things slow down.

I see that sites like Twitter and Facebook do a good job at avoiding this problem, but how? I am guessing it is some form of DOM garbage collection, and items are loaded not just as you scroll down, but up also, and items not in view are GC'd?

Adding to the complexity, we are using the headroom.js library to have the menu needed to alter the search options always available by just scrolling up slightly, and we notice that this action gets slower and more jarred as you scroll down and have more search results to scroll through.

Each search result consists of not just text, but an image also.

Also, the search results are refreshed without a reload of the page, we use two way binding provided by AngularJS for this purpose (pushing search results into, and popping them out of an array which ng-repeat uses to populate the view), but I suspect that users of other libraries (such as Ember.js) face the same problem.

Can somebody elaborate on how we should be approaching this? We have the infinite scrolling aspect (loading more items into the DOM as you scroll) nailed, but on lower end smart phones, things slow down quickly so I am guessing there another aspect to this problem which we have missed.

I assume the trick is to only load items into the DOM that the user can see while keeping the scrollbar as is, and responding to scroll events to load the items the user was expecting to see, but how would we go about this? Are there any libraries available for this purpose?

Thanks

Asking for a library is off topic, but directly asking how to do it might be on topic. As for how to do it, you might read the slickgrid source code for some ideas, though there are other libraries out there as well. — psr, Jul 11 '14 at 02:38
Are you also removing items from the DOM that have scrolled out of view, or does the DOM only grow with new items? — Bart van Ingen Schenau, Jul 11 '14 at 06:15
Oh, haha. I didn't notice this question was over a year old. — Andy, Oct 25 '15 at 16:21

score 3 · Answer 1 · answered Jul 27 '15 at 12:39

See this: ClusterizeJS

This plugin makes it possible to scroll a huge number of items while keeping DOM lean and small. It removes out of the view items and replaces them with dummy elements that are dynamically resized so scroll positioning is retained as expected.

Facebook doesn't do it this way though, but I suppose this is the best way to have good performance on slow devices.

An additional note on Angular

You should also be aware that pure HTML+CSS pages are much simpler to handle than DHTML that run additional javascript. Angular is particularly hungry in this regard as it has to dirty check model and view to keep them in sync and execute any code related to changes. When your DOM contains a lot of bindings (they say the number is somewhere about 2000) your page suffers. Try using one time bindings implemented in Angular to speed things up especially if your views only display data without users changing the model.

What techniques should I use when implementing infinite scrolling on a website?

1 Answers1

An additional note on Angular