4 ms·
We do something similar to render large tables, but we use divs to layout our data. We establish the height of the scrollable area with a large div, and then a
by dunham 14y ago
We do something similar to render large tables, but we use divs to layout our data. We establish the height of the scrollable area with a large div, and then absolutely position the rows within it. We have just enough real physical rows to fill the screen, plus a buffer of a few rows. The virtual rows are assigned to physical rows via modular arithmetic, so only a couple of rows change their data on scroll. (And are repositioned accordingly.)
This technique (particularly calculating the positions of the rows) requires fixed height rows. (There is a solution for variable height rows, but it's a bit more complicated.)
I originally got the idea by looking at google books years ago.
Here is a quick and dirty example as a self-contained HTML file:
https://gist.github.com/3086578
(It constructs a list of 10,000 objects with title/description fields, and then displays that data in a table.)
- kellysutton 14y agoThis sounds pretty similar to how UITableView on the iPhone keeps its performance up. If I recall correctly, iOS actually recycles a small number of discrete cells for use in the table and shuffles in the necessary data.
- georgemcbay 14y agoI'm always surprised (though it happens fairly frequently) when I run into a UI toolkit with any kind of fixed-size item list view that doesn't recycle the child widgets and handle the actual item list as a sliding-window data provider. Not to take anything away from any of the mentioned projects, but this pattern is not new or novel.
- ralfn 14y agoNo, its not. Its even more relevant for Javascript, because creating a dom node is way more expensive, thsn just altering it.
- OmarIsmail 14y agoThis is awesome. I like your technique a lot better actually!
- saurik 14y agoSadly--and please correct me if I'm wrong on this--there is no way to use that same trick on Android/iOS without painfully-and-likely-poorly reimplementing the browser's scrolling mechanism (as you don't get events and cannot render while the user is manipulating the native viewport).
- ralfn 14y agoQooxdoo, my favorite opensource RIA tool, has virtual lists and grids as core building blocks in both the desktop and mobile variants. However, i would not be surprised to find out, that they emulate their own scroll containers. But it is indeed possible and works well. See http://qooxdoo.org http://qooxdoo.org
- saurik 14y agoJust checked that one out, and I'm somewhat floored that it isn't obvious to you that it reimplemented the scrolling behavior: the rubber-banding and acceleration curves are wrong, and it scrolls to logical pixel boundaries (the native scrolling can move one physical pixel, while this framework moves by two as the minimum step). It is much better than what I've seen previously, though; makes me wonder if the CPU on the 4S combined with the latest WebKit+Nitro really is now enough to emulate scrolling well (assuming someone attended better to the details). Thanks!
- ralfn 14y agoIt was quite obvious it emulates the scrollbars on the desktop, but i have no iphone, and made no such assumption about what it actually does on mobile. Ive been following Qooxdoo for quite some time, and the level of browser normalisation ( from keyboard events to how scrollbars render ) is insane. And so is the performance, and the tricks they pull. For example: they recyle dom nodes. They have different array looping constructs based on the target platform. They emulate their own event bubbling system. There is a whole range of performance tests you can try on their website as well. The real question is, can we get this kind of performance with more idiomatic html/css.
- deleted 14y ago
- _sh 14y agoIf anyone wants to have a play with this code, http://jsfiddle.net/SukX5/1/ http://jsfiddle.net/SukX5/1/
- invisible 14y agoWe actually did the exact same thing (concept from Slickgrid but modular rows using backbone models and what we call Modules for the view of that row).
- jbredeche 14y agoThis is really great, thanks. Could you shed some light on the variable height row solution? Do you still use absolutely positioned rows, or do you do something different?