Javascript execution blocking rendering/scrolling in IE 8

I'm having a bit of trouble with IE 8 (and probably all previous versions). Firefox and Chrome/Webkit are seemingly fine.

Something is causing page rendering, scrolling, and basically all page interaction to become blocked. As best I can tell, Javascript execution is causing this to happen.

Specifically, I think there are two major responsible parties in my specific situation - Google Maps API (v3) and Facebook Connect.

In both cases, I am using the asynchronous load methods provided by both Google and Facebook.

I've tried a couple of things so far, to no avail:

1. Delaying execution with jQuery's $(document).ready(). This just prevents the locking until slightly later in the page load. Actually, since I use gzip compression, I'm not really sure it does anything - I'm not clear on how that works.
2. Delaying execution with window.onload. Same situation - the whole page loads, then it locks up while it grabs and executes the Facebook Connect code.
3. Using setTimeout(function(){}, 0). I'm not 100% clear on how this is supposed to actually work - as I understand it, it essentiall开发者_如何学运维y is supposed to force the execution of the function's code to wait until the stack is clear. Unfortunately, this doesn't seem to do much of anything for me.

I think the problem is especially exaggerated for me because I am on a slow connection.

I can't think of any specific oddities with my site that would be a factor, but I won't rule that out.

So, my question:

Are there any best practices or existing solutions to this issue?

Is there something that I am obviously doing wrong?

The offending site is at: http://myscubadives.com/, if anyone would be willing to take a look at the specific implementation.

Thank you in advance for your time and help.

Sam

Yes, the browser (at least IE) suspends itself while Javascript is being executed. This makes things a bit faster, because it doesn't have to redraw and recalculate layout every time you make a change. However if your Javascript takes a long time to execute, this will seem like freezing. Synchronous XMLHttpRequests also count.

Unfortunately there is no pretty workaround. The typical advice is to use window.setTimeout() function with timeout set to 0 (or something very small) to split the workload in several parts. Inbetween the browser can manage to redraw itself and respond to some user interaction, so it doesn't seem frozen. The code gets ugly though.

In case of lengthy XMLHttpRequests you have no choice but to use the asynchronous version.

Added: Ahh, I see that you already know this. Should read more carefully. :P Did you also know that IE8 has Developer tools built in (Press F12 to activate) and that the Javascript tab has a profiler? I checked it out, and 2 seconds were spent exclusively in jQyery's get() method. Which gives me a strong suspicion that something is still using synchronous XMLHttpRequests.

Function: get
Count: 10
Inclusive time: 2 039,14
Exclusive time: 2 020,59
Url: http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js
Line: 127