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.
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
