How to force IE to show page content before finishing all Javascript execution?

Question

On a Ruby on Rails development environment, a page will be shown after 30 seconds on Firefox, but takes 90 seconds on IE 8 (with IE 7 Compatibility Mode).

Further investigation shows that it should be Javascript that slowed down the page, because if Javascript is turned off, then the page content will also show in 30 seconds.

Because there are probably 7 or 8 jQuery plugins, Facebook scripts, and Google Analytics script, it would take quite some time to move all the Javascript code to the end of the HTML file, (which should speed up the page content view so that content is shown after 30 seconds, just like Firefox), is there a way to force IE to show page content before finish executing all the Javascript code?

I think IE might be waiting for all Javascript code to finish first, because what if there are document.write() statements, which should be within the HTML... Firefox or Chrome doesn't wait for that but display the content right away.

(on the production server, the page will be displayed on Firefox after 5 to 7 seconds, because a lot of the "partials" (HTML sub-components) are cached. IE 8 takes a lot longer too, about 40 seconds or so.)

P.S. A strong reason why the Javascript is embedded throughout the HTML may be that, say if there is an "Image Carousel", then the HTML code is in a "partial", which is an HTML file generated by an HAML file, and all the HTML as well as the Javascript code are in this file, for better encapsulation, instead of having HTML in one file, and the Javascript in another file, but I wonder what if all these Javascript code blocks only use jQuery's $(document).ready(function() { ... }), then will these code block slow down the page display on IE?

Answer 1

Unfortunately it's safe to assume that your jQuery plugins are all waiting for the dom to fully load in IE. One solution is to try to speed up the page load. Here are some good ways to do that:

1. Don't host jQuery yourself. Load it from either Google or the Microsoft CDN. That will result in one less connection tied to your web server.
2. Dynamically load content via jQuery. It's hard to rewire stuff after the fact, but it certainly will allow you to progressively load content and create the impression that the page is loading faster.
3. Put all the javascript at the bottom of the page if possible.
4. Eliminate calls to document.ready in jQuery where possible.
5. Lazy load images using this jQuery plug-in: http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin It'll result in less downloading of content during the initial display of the page.
6. Use a third party CDN for hosted scripts and images, or in the least another domain. Loading off the same domain is a bottleneck