javascript - Is it practically good to put JS files at the bottom of webpage?

Question

It is widely recommended that JS files should be put at the bottom of page to allow html codes to be loaded first. In this case, visitors will see something when waiting for full load of the page. However, I think this is disadvantageous for these reasons:

1. Modern design mainly depends on JS. This means before loading JS, the page will look ugly.

2. If interrupting the connection during the load (not loading JS at all), visitors will miss some of the website features (probably very important); and they will not understand that this is the problem of load (to re-load the page).

3. If the server-side script die (due to an error) at the very end of script before footer (e.g. in PHP), visitors will miss the whole page functionality (by JS); but if loading JS at the top, they will only miss the footer or half the page.

4. If loading JS first, browser will load other stuff (like images) in parallel; but if loading JS last, it may increase the load time. Because JS files are large (e.g. JQuery and JQuery UI), and all tiny stuffs (like images) have been loaded and we are loading a large file, last in line.

UPDATE: 5. Since jQuery library should be loaded before codes; if loading the jQuery library in footer (e.g. footer.php), you cannot add custom jquery codes for different pages (within the body).

Please correct me if I'm wrong! Is putting JS files in footer still beneficial?

Answer 1

Script tags in the header block all other requests. If you have let's say 10 tags like this:

<script src="http://images.apple.com/home/scripts/promotracker.js"></script>

...they will be executed sequentially. No other files will concurrently be downloaded. Hence they increase page load time.

Check out HeadJS here as a sample solution.