Infinite scrolling: reusing DOM nodes


(Karan Misra) #1

Sencha documented their effort in making the Facebook app and were very clear on how they managed to get smooth scrolling with their infinite implementation.

From: http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story/

It started with the implementation of an Infinite List Component that handles items with unknown sizes. Only a very small set of DOM nodes is actually created to fill in the actual visible screen area. They will then be constantly recycled to render next / previous data on-demand. As a result, memory footprint is kept minimal, regardless of the amount of data in the Store. Making this work is the easy part. Making it fast with the complexity and variety of items such as News Feed stories is the real challenge. The bottleneck lies within the core processes that a browser has to perform: layout and compositing.

Since we are aiming for the Discourse app to work across a multitude of devices, would it be worthwhile putting some effort into this? This might help with the scrolling performance on large pages too… (it shudders at times on my MBP when on HD3000 graphics.)

What say @sam @eviltrout @codinghorror ?


(Sam Saffron) #2

Its interesting, but to be honest I think there are much more basic things we can do first before going this route.

  • We should be unloading old stuff from the DOM … scroll down 100 posts, we should unload post 1 (or something like that)

  • We should extensively profile our existing implementation to ensure there are no low hanging fruit (is there CSS that is hurting us? is there JS that can be optimised?)

I am not categorically against doing radical stuff, its just that I want to make sure we do all the basic stuff first. Also I want to have a VERY high level of confidence a move to a “recycle” DOM element approach will result in a significant perf improvement. So, a demo (even outside of discourse) demonstrating the advantage of recycle over load/unload is going to be a required first step here.


(Régis Hanol) #3

@eviltrout has recently introduced this feature and has even blogged about it:

http://eviltrout.com/2014/01/04/hiding-offscreen-ember.html


Editing topic (or topic title) removes the click-count badge for links in that topic
(Karan Misra) #4

Awesome :D… so this is essentially the unload/load (clock/uncloak) approach


(Régis Hanol) #5

This topic was automatically closed after 12 hours. New replies are no longer allowed.