[jQuery] jQuery Performance Dilemma...
I've got a performance dilemma I'm trying to solve and wanted to see what
feedback this list might have to help resolve the problem.
I've got a page that's pretty complex which currently utilizes lots of
jQuery plug-ins (there are about 20 plug-ins in use on the page--all of them
vital to the page.) Since the page can be really DOM heavy at times, it can
take a long time to initialize all the various plug-ins (sometimes 2-3
seconds.)
For this application, speed is of utmost importance, so I really need to
trim down the init time as much as possible.
In order to at least speed up the viewing of the page, I've moved my $.ready
code to fire off with setTimeout(). While this still causes a lag to the
page as the plug-ins are initializing, it at least displays most of the page
and gives the illusion that the page is ready.
Obviously, I've already been trimming down my selectors so that their as
efficient as possible. The problem is several of the plug-ins end up needing
to do a lot of DOM manipulation when their initializing--which is where the
cause of the bulk of overhead.
Right now I'm basically firing off all the initializing in a single
setTimeout().
Since I'm still not getting the performance I want, I'm looking at
implementing some of the following:
1) Breaking each plug-in with a lengthy init time into a separate
setTimeout(). However, I don't really think this will help with the
availability of the page.
2) Since this application does not need unobtrusive JS, I'm thinking about
re-writing the plug-in code so that I can pre-generate the actual DOM
elements on the server (offloading the overhead of the browser needing to do
all the conversion.) Obviously, the less work the browser has to do during
the $.ready, the faster things will be.
Obviously, doing #2 will involve a lot of hacking of plug-ins and really
goes against the jQuery philosophy. However, it's the method that I know I
can get the best performance from (since the JS processing would move from
initializing the behavior to basically just being ondemand.)
So my question are:
Does anyone have any other recommendations?
What have others done when building an applications when lots of behaviors
are required to be attached on $.ready?
Thanks,
Dan