Challenge in Asynchronous Javascript Loading

Background: I'm working on a GWT based application which is deployed on Google App Engine. My application uses a custom library, which requires 6-7 big core javascript files (~3 MB total size) to be loaded up front. So to even load my application's home page, it takes anywhere from 20-40 secs depending upon the bandwidth. Recently I set upon the task to address the slow page load issue.

I made a plain HTML home page, without any GWT or custom library's components. This home page contains a login button and a simple jQuery based image slider. I'm using Google Accounts based authentication. On the home page, I use "asynchronous ordered" Javascript loading technique presented here: http://stevesouders.com/efws/loadscript.php?t=1303979716 to load all the core .js files. So while the user is looking at the home page or interacting with the image slider, the .js files quietly download in the background. After the user logs in, the control is redirected to the Main HTML file, which retrieves the .js files from the cache, and loads the app. This time the loading of the app is significantly faster. So, the home page loads up in 2-5 secs and the main app also loads up pretty fast.

It's exactly what I need. But there's an 开发者_如何学编程issue.

ISSUE: If the user clicks on the Login button too fast (i.e. before all the asynchronous .js file downloads are complete), the asynchronous downloads break. In fact, as soon as the user navigates away from the home page (to the Google Accounts sign-in page or any other page), all the asynchronous downloads break. Now when the main app is displayed, it retrieves the partially downloaded .js files from the cache and reports "Unexpected end of line" errors.

I could do one thing to address the problem - disable the login button until the asynchronous downloads complete. This is slightly better than the current situation because it allows the user to at least see the home page and interact with the image slider. But it's not ideal.

Ideally I'm looking for a way to check the hash (or file size) of the .js files in the Main HTML, to see whether they are correct. If there's a mismatch, download the files again. But I'm not a Javascript expert by any means and not even sure whether that's possible. So, I'm looking for help from experts here. This might be a common problem that people have addressed in other ways. So, I'm also open to other alternatives.

Thanks.

UPDATES:

1. I have multiple (6-7) .js files to be loaded.
2. The .js files are independent and need to be loaded in a particular order.

3MB of Javascript files is pretty crazy. Do you really need that much? If so you should look to concatinating / minifying them using jsmin or uglifyjs. This will reduce the size by at least 50%. Next you ensure gzipping is enabled on the server hosting these files. That should reduce the size by another 50%.

Lastly you should use an expires header to ensure this file caches clientside forever. To uncache update a query param on the src:

<script src="compressed.js?v=1"></script>

As for checkinging hash of filesizes, not exactly possible, though you could check for the existence of certain variables your libs are introducing into the global namespace. For example:

jQueryLoaded = !!window.jQuery;

In this case, considering we have around 3 MB of javascript to be loaded, I would construct a loading page, with a progress bar, that downloads all the javascript, and shows the progress before showing the actual site. This does not limit user experience to any significant degree, it rather gives you an opportunity to show updates, news (even feeds), help messages while loading. Also have a timer on the loading page, to detect if it takes too long and give them an option to do something else if it does take too long, for example showing the login page with login disabled till scripts are downloaded. I have found scripts that do this here and here

You can actually compress, include versions, minify and bundle the js files this reduces footprint by more than 80%. Have a look at Yahoo's Coding horror. You can do all these using jawr