[apologies for the self-response]
On Jun 7, 2009, at 11:08 PM, Ravi Narayan Sarma wrote:
In the hope that a public recounting of my adventures will be of
some edifying value, perhaps in the archives, an update:
Some details that I forgot to add. I used Safari/WebKit's profiler to
see what was going on with my app. Since my app first loads the entire
200+ row table using JavaScript, I did not start the profiler until
after that loading was complete (since I am not, right now, interested
in performance issues during initial load). What emerged once I
started the profiler was that a large amount of time 60+% was spent in
livequery() related activities. Which surprised my naive
understanding: I had presumed that livequery() worked magically by
watching the DOM (somehow!) and upon addition of an element with a
matching selector (that livequery() had been configured to act upon),
it attached the corresponding event to that element. By this
understanding, livequery() should have no part to play once the DOM
was loaded up and ready to go. Clearly, my understanding is wrong,
somewhere.
Anyway, a couple of additional links that discuss Event Delegation and
the clone(true) approach:
http://www.learningjquery.com/2008/03/working-with-events-part-1
http://www.learningjquery.com/2008/05/working-with-events-part-2
--ravi
=============
Background:
My problem: performance of my newbie jQuery based app with a table
with 100s of rows consisting of 1000s of form elements slowed to an
unusable level when the number of rows crossed about 200. I have
been struggling to figure out how to overcome the problem. One
obvious option is to redesign a UI that consists of 1000s of form
elements ;-). Other options?
My entire table is created dynamically on load using AJAX GETs. I
clone a template row that is hidden in the page to add rows to the
table. I use livequery() (the plugin) to add event handlers to form
elements in each row.
=============
One option that I came across was to call clone(true) when adding my
table rows, so that I do not rely on livequery() to attach event
triggers (see http://bit.ly/Y6ZFe for one livequery() performance
discussion). That's the one I am currently exploring.
However, the more I read, the more it seems that Event Delegation (http://bit.ly/Wr3Gr
) is really the safest approach, though it nullifies a good bit of
the advantages of using jQuery like syntax/constructs to add event
handlers. For those who are even more newbie than I am (if such is
possible), Event Delegation is the idea that you do not add event
handlers to each little DOM element of interest, but instead, you
let those mouseclicks and what not "bubble" up, and then use if()
style checking at some high-level to figure out the element that has
been clicked on and act accordingly.
I will complete my code changes to replace my use of livequery()
with clone(true), just to see the effect on performance. Once I have
that information, I will most likely switch to an Event Delegation
approach for the bulk of my event handlers. I will report back with
my findings.
In the meantime, if any list guru has advice for me that would
alleviate my stumbling around like a goof, I am gratefully receptive
to it!
--ravi
