How to reliably load required JavaScript files?

Question

I came across the problem when due to internet connection problems, some of the required JavaScript files are not loading. Body onload event gets fired however classes required for logic of the page are not present.

One more thing, problem which I want to fix is not in the website, it is in web application which does not have any image or CSS files. Just imagine a JavaScript code running in iframe. Thus, I have problems only with scripts.

Here are my ideas how to fix this, please comment/correct me if I'm wrong:

1. Obfuscate and combine files into when pushing to live so overall size of the files will be decreased and task will come to reliably loading 1 file
2. Enable gzip compression on server. So again resulting file size will be much smaller
3. Put proper cache headers for that file, so once loaded it will be cached in browser/proxy server
4. Finally, even having all this, there could be a case that file will not be loaded. In this case I plan to load that file dynamically from JavaScript, once page is loaded. There will be "Retry failed load" logic with maximum 5 attempts for example

Any other ideas?

Answer 1

Your points are valid for script loading, but you must also consider the website usage.

If the scripts are not loading for whatever reason, the site must be still completely usable and navigable. The user experience come first before everything else.

The scripts should be loaded after the website interface has been loaded and visualized by the browsers, and should contain code to enhance user experience, not something you must absolutely rely on.

This way even when the connection is really slow, I will still be able to read content and choose to change page or go somewhere else, instead of having a blank page or a page with only the header displayed.

This to me is the most important point.

Also, are you sure about a retry approach? It causes more requests to the server. If the connection is slow or laggy then it may be best to not run the script at all, expecially considering users may spend little time on the page and only need to fast read at content. Also, in the connection is slow, how much time would you set for a timeout? What if the script is being downloaded while your timeout fired and you retry again? How can you effectively determine that amount of time, and the "slowness" of the connection?

EDIT

Have you tried out head.js? Is a plugin aimed at fastest possible sripts loading, maybe it will help.

Answer 2

I don't personally think it's worth it to try to redo the logic that the browser has. What if the images in your page don't load? What if the main page doesn't load. If the user has internet connection problems, they need to fix those internet connection problems. Lots of things will not work reliably until they do.

So, are you going to check that every image your page displays loads properly and if it didn't load, are you going to manually try to reload those too?

In my opinion, it might be worth it to put some inline JS to detect whether an external JS file didn't load (all you have to do is check for the existence of one global variable or top level function in the external JS file) and then just tell the user that they are having internet connection problems and they should fix those problems and then reload the site.

Answer 3

1 - Correct but double check if JavaScript functions from different files don't overlap each other.
2 - Correct - this should be always on.
3 - Correct but the Browser will still try to get a HTTP 304: Not Modified code from the server.
4 - Correct, consider fallback to a noscript version of the website after 1 or 2 failed attempts (5 is too much).

Answer 4

If the "retry" script fails to grab the required dependencies, redirect to a "no script" version of the site, if one is available. Or try to have a gracefully degrading page, so even if all steps fail, the site is still usable.