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