Appending a huge number of table rows using jQuery
Showing comments 1 to 4 of total 4 on page 1 of 1
sureshccRank: 10
I have come to find that using jquery to create html client-side can be a huge performance booster if done properly. I use ajax returning json to retrieve dynamic content and then I build the relevant html and insert it using jquery. The first time I messed with this technique I found that the string concatenator in IE's javascript performed really slowly so that building a dynamic table with more than 50 or so rows performed terribly.
var shtml = '';
for(var i=0;iA bunch of content ';
shtml += '
';
$('#myTable').append(shtml);
Then I found a technique for string concatenation that changed everything. Instead of using the sting += operator use arrays to do concatenation;
var shtml = [''];
for(var i=0;iA bunch of content ');
shtml.push('
');
$('#myTable').append(shtml.join(''));
I found that performance improved significantly. Now, however, there is a ceiling of about 100 rows before I start to see the browser itself struggle with dynamically inserting so much content at once. Does anyone have any pointers or techniques that can be used to help me achieve the next performance boost for large sets of dynamic html?
maheshRank: 36
You would probably get better performance if you do the HTML generation on the server side, and then use Ajax to retrieve the html and append it to your DOM. (I'm assuming you're getting all the data from the server using Ajax anyway.)
cheetahRank: 255
Have you considered using a templating library? PURE has very good performance, for instance (try out the 500 row example).
donymoul...Rank: 110
i was messing around with appending large amounts of html yesterday. i think rendering on server side and inserting is the way to go, also i may add, that not using jquery is faster by 50-100ms in my tests, which are here:
http://programmingdrunk.com/playground
you will need to enable firebug console to see speed results