Performance issues inserting/replacing/removing large amounts of data
I've been trying to optimize a page that inserts, replaces and removes
large amounts of data (> 2000 elements). The data is retrieved via
Ajax and inserted into a div using elem.html(data); Each inserted
element requires a click event to be bound.
I had been using LiveQuery to handle the "automatic" event binding,
but I found that by removing it (and manually handling binding/
unbinding) I was able to improve the speed of the initial insertion of
data. However, there was still a big lag when removing the data
(either through replacing, clearing, or leaving the page).
I think that I narrowed it down to the way jQuery handles removing
data. There are two things that I did that seem to make things much
faster:
1) Removing data: Manually unbind the click event and set the
innerHTML to "", as opposed to using the jQuery empty(); method. I
also did this when replacing data.
2) Leaving the page: Added an onbeforeunload event that manually
unbinds the click event. This significantly shortened the lag when
leaving the page.
A similar question[1] was asked on the jQuery mailing list and while I
responded with my findings, there weren't any other comments or
suggestions. I'd like to know what others have done and if the
workarounds that I used are "OK" or if they create any issues that I
am unaware of.
Here are some test pages that I created to demonstrate the issue and
what I did to speed things up:
http://www.ericmmartin.com/code/profile/
For this page, I'm considering adding the JavaScript inline...but was
hoping to avoid that ;)
Thanks,
Eric
[1] http://groups.google.com/group/jquery-en/browse_thread/thread/1ce305290c6874dc/e931887eb08e23ea