事件之外的JavaScript缓慢

Question

How do I diagnose web page performance problems if none of my JavaScript events seem to be the cause?

I have a web application using jqGrid . Clicking on the grid causes a 2-3 second freeze before anything happens (including any click events being hit). Clicking anywhere else on the page is fine (instant response). Removing rows reduces the delay (50 rows is very slow, but 5 rows yields an instant response).

Unbinding all events on the page à la $('*').add(document).unbind() doesn't fix the problem, which leads me to believe there are events I'm missing.

I don't see this slow behavior if I save the page source to my desktop and open that HTML file in my browser. That seems to indicate that this is in fact a JavaScript issue.

I'm testing with Firefox 3.6.8 and the latest version of Firebug. The problem also affects other browsers, but less so in the fast ones (Safari and Chrome).

Update : IE7 doesn't seem to suffer from this lag, surprisingly. I put an alert at the very beginning of the jqGrid click event, and the event box appeared immediately after I click on the grid. Firefox still has a multi-second lag, and Chrome and Safari have a very short lag (not quite as short as IE, but still very short).

Update #2 : I'm fairly confident this may be a bug in Firefox. Even though I'm unbinding/die'ing all events, I'm guessing that Firefox isn't properly cleaning up everything. I removed all other events and added a single click event to the grid table and started the profiler. I then clicked once on the table and ended the profiler. I got back a "No activity to profile." message.

Answer 1

The best tool I can recommend for this is dynaTrace AJAX Edition , it's a profiler for IE (typically the slowest in JS performance, so actually a good test environment for starting optimization).

It'll give you a full breakdown, show you repeated method calls, the call tree and where your CPU cycles are going. Check out their tutorials on usage/features to get started.

Oh yeah, it's free :)

Answer 2

Are you using live() with all those click events? Sometimes live() can really slow down page performance if there are too many instances on a particular page. Especially Ajax relaced content that contains link that live has to rebind to.

See here for more info:

Does jquery live slow down websites?