4

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

Improve this question
5
  • 1
    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. Commented Jul 11, 2014 at 2:38
  • 1
    Are you also removing items from the DOM that have scrolled out of view, or does the DOM only grow with new items? Commented Jul 11, 2014 at 6:15
  • Please don't do this. People hate it. Commented Oct 25, 2015 at 15:50
  • @Andy We figured that out :) Commented Oct 25, 2015 at 16:19
  • Oh, haha. I didn't notice this question was over a year old. Commented Oct 25, 2015 at 16:21

1 Answer 1

Reset to default
3

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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.