<story><title>How we make 5000 row tables fast in Streak</title><url>http://blog.streak.com/2012/07/butter-performance.html</url></story><parent_chain><item><author>dunham</author><text>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.)&lt;p&gt;This technique (particularly calculating the positions of the rows) requires fixed height rows.  (There is a solution for variable height rows, but it&apos;s a bit more complicated.)&lt;p&gt;I originally got the idea by looking at google books years ago.&lt;p&gt;Here is a quick and dirty example as a self-contained HTML file:&lt;p&gt;&lt;pre&gt;&lt;code&gt;  https://gist.github.com/3086578
&lt;/code&gt;&lt;/pre&gt;
(It constructs a list of 10,000 objects with title/description fields, and then displays that data in a table.)</text></item></parent_chain><comment><author>_sh</author><text>If anyone wants to have a play with this code, &lt;a href=&quot;http://jsfiddle.net/SukX5/1/&quot; rel=&quot;nofollow&quot;&gt;http://jsfiddle.net/SukX5/1/&lt;/a&gt;</text></comment>
<story><title>How we make 5000 row tables fast in Streak</title><url>http://blog.streak.com/2012/07/butter-performance.html</url></story><parent_chain><item><author>dunham</author><text>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.)&lt;p&gt;This technique (particularly calculating the positions of the rows) requires fixed height rows.  (There is a solution for variable height rows, but it&apos;s a bit more complicated.)&lt;p&gt;I originally got the idea by looking at google books years ago.&lt;p&gt;Here is a quick and dirty example as a self-contained HTML file:&lt;p&gt;&lt;pre&gt;&lt;code&gt;  https://gist.github.com/3086578
&lt;/code&gt;&lt;/pre&gt;
(It constructs a list of 10,000 objects with title/description fields, and then displays that data in a table.)</text></item></parent_chain><comment><author>OmarIsmail</author><text>This is awesome. I like your technique a lot better actually!</text></comment>