Build some kind of preloading mecanism

[mgcrea]

Playing with a long list (500+) facebook friends list with pics & buttons on each li.

The scroll feeling is only perfect when i have first scrolled down entirely. Before that i have some rectangles that render a bit late. Maybe (with an option) it could be possible to "pre-load / pre-scroll the list", displaying some kind of opaque loading msg over it.

[jasonwinn]

Have you tried using -webkit-transform: translate3d(0,0,0); on your li elements?

[joehewitt]

I've tried that, didn't see a difference.

For really long lists, I think the only way we're going to get good performance is to create and destroy elements dynamically as you scroll, the way the Cocoa UITableView class works in iOS.

[tilomitra]

Do you mean remove and re-append to DOM? I don't think the DOM changes will be able to keep up with the scrolling speed. Is there a way to scroll through the list very quickly, thus putting all the elements in JS memory, to allow for good scrolling feel later?

[mgcrea]

About long lists & buffering, here is some interesting code from a sencha-touch Ext.List plugin addressing this specific point. Looks like it does indeed DOM manipulation.

http://www.sencha.com/forum/showthread.php?121225-High-Performance-Large-List-component-UxBufferedList https://github.com/Lioarlan/UxBufList-Sench-Touch-Extension/blob/master/UxBufList.js