Appending a huge number of table rows using jQuery

Posted in Help the coder! on Feb 22, 2009 at 13:12 IST (about 1 year ago). Subscribe to this post Bookmark and Share Email
Showing comments 1 to 4 of total 4 on page 1 of 1
Post reply
« Previous1Next »

sureshcc
Rank: 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;i';
shtml += '
A bunch of content
'; $('#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;i');
shtml.push('
A bunch of content
'); $('#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?

Posted by sureshcc on Sunday, February 22, 2009, 1:12 pm
  • Currently 0.00/5

0 votes

Thank this userFlag this comment

mahesh
Rank: 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.)

Posted by mahesh on Monday, February 23, 2009, 8:41 am
  • Currently 0.00/5

0 votes

Thank this userFlag this comment

cheetah
Rank: 255

Have you considered using a templating library? PURE has very good performance, for instance (try out the 500 row example).

Posted by cheetah on Tuesday, February 24, 2009, 12:24 am
  • Currently 0.00/5

0 votes

Thank this userFlag this comment

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

Posted by donymoulder on Tuesday, February 24, 2009, 12:45 pm
  • Currently 0.00/5

0 votes

Thank this userFlag this comment
Pages: « Previous1Next »

Post your comment (No registration required)

  Add my comment  

TechieDesi Community

Not signed in (Sign-in or Register)
Be a true TechieDesi!
Top 10 Users
Spread the word
Invite your friends
Fan stuff
Help us improve
Need Help
FAQ's
Search tips
Found a bug? Report!
Feeds and letters
Subscribe via RSS
Archives
Subscribe to newsletter
Unsubscribe e-mail
Miscellaneous
Privacy policy
Visit rootnerve
About us
About us
Support the development
Official Blog
Advertise with us
Careers
Copyright (c) 2008, TechieDesi.com. All rights reserved | About us | Do-Not-Disturb registry | Powered by rootnerve | Page rendered in 0.350 seconds