Try giving this post a read for tips on inserting large amount of data into the DOM: http://groups.google.com/group/jquery-en/browse_thread/thread/9889ebd5e10c9122
As for having many form elements, are these elements hidden by default? Usually the page becomes slower as you add more content on the page, as it has to keep all that info in memory. And when more elements are visible, it'll be even slower since more graphical processing has to be put into that rendering. Depending on what you're trying to achieve, it might be a better solution to just spread all those rows across several pages. On Jun 5, 7:13 am, ravi <ravi-li...@g8o.net> wrote: > On Jun 5, 2009, at 1:04 PM, ravi wrote: > > > > > > > Hello all, > > > a newbie question: > > > In a web page, I have a table with 300+ rows each with 15 or so form > > elements, adding up to 4500+ form elements in that single page. The > > table is created and maintained dynamically using jQuery+AJAX. Each > > element has a class associated with it and I have used 'livequery' > > to attach actions to these classes. Typically the actions are: on > > click, display additional information for the row and make all > > fields in the row editable, on change, use AJAX to update the change > > field values to the DB. > > > At about 50 rows, the performance is synchronous with user actions. > > At 100 rows a small tolerable delay accompanies each user action > > (even trivial ones like scrolling). At 200 rows it gets annoying > > (again, including simple scrolling). At 300 or more rows it is > > unusable. > > A clarification: the user actions I am using to test are only clicks, > not changes. i.e., I am not altering fields, so the issue is not AJAX > GET/response. > > --ravi > > > I have used various tips found online to improve efficiency of my > > selectors (e.g: used ID as much as possible). I have also attempted > > to minimise superfluous effects, mouseover/out type actions, etc. I > > need to consider design improvements. Perhaps load and display form > > fields dynamically and incrementally as needed. Also, I can paginate > > my table and display the data in chunks (which would break one of > > the requirements I was given, but sometimes users need education ;-)). > > > In the meantime, I was wondering if any of you could advice me on: > > > (a) what is a legitimate expectation (from HTML, JavaScript and > > jQuery perspectives for Firefox 3.x and Safari 3/4) when it comes to > > such a large number of form elements. I have done some simple hacks > > like commenting out some of the fields and reducing the number to 5 > > or 6 and that does improve performance a good bit. Is this the path > > I should take (which would of course involve a redesign of my UI)? > > > (b) what newbie errors I might be doing... unnecessary event > > bubbling? Poor selector usage? etc. I am puzzled by why even > > scrolling slows down, at start of scroll, with jQuery active for the > > page. > > > Any comments, thoughts, suggestions will be deeply appreciated. > > Thank you, > > > --ravi
