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
