Correct order of files in head tag?

JavaScript
1

In general, is it best place to external JavaScript and jQuery files in the head tags or before the closing body tag. I’ve read opinions that present arguments for both, so I’m confused as to which is the best way to go. I think the correct order is: (1) css stylesheet(s), (2) link to jQuery (e.g., https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js), and then (3) JavaScript files. (See also example below). Is this correct? Thanks!

EXAMPLE
<head>
<title>This is my Sample Page</title>

<!-- CSS goes before JavaScript –>
<link rel=“stylesheet” type=“text/css” href=“main1.css” />
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script type=“text/javascript” src=“myScript.js”></script>

<script>
$(document).ready(function() {
//JavaScript programming goes here
});
</script>

</head>

2

JavaScript shouldn’t be in the <head> at all. The best place for JavaScript is immediately before the </body> tag. The only exception to this is where you have a script that needs to prevent the page loading at all if certain conditions apply - eg. a framebreaker script that will stop the page loading in the frame and send a request to the server to load the page in the entire browser instead.

Any part of the page not yet rendered when JavaScript loads has to wait for the JavaScript to finish loading before it renders - just in case the script contains document.write statements. The async and defer attributes that are intended to bypass the rebdering delay are not yet supported by all browsers so placing the JavaScript at the bottom of the page avoids the rendering delays.

Also that ready command will get the script to run as soon as the HTML finishes loading in some browsers but in others it will delay until all the files have loaded even though the JavaScript doesn’t reference them. By moving the script to the bottom and deleting the ready test you can run the script sooner in those browsers that would otherwise wait for all the files to load.

The jQuery file has to be attached before the other JavaScript files that reference jQuery.

3

thanks for the response. Two quick follow-up questions: (1) so should I remove the $(document).ready entirely? and (2) should I also put the link to jQuery down near the bottom before the closing body tag as well - e.g., <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script> Thanks!

4

It isn’t needed, but I don’t think it does any harm, either. 'Sup to you.

should I also put the link to jQuery down near the bottom before the closing body tag as well

Yes.

5

Thanks!

6

Having it there would slow the script running in those browsers that can’t detect when the HTML has loaded and which therefore have to wait for the load event to be triggered instead. So if there are lots of images in the page and you have a significant number of visitors using old browsers then getting rid of it might speed things up a bit.

7

Yes, I’ve also seen problems with jQuery not working, which seemed to be caused by linking to jQuery in the head and having scripts at the bottom of the page. Moving the library to the bottom of the page fixed the problem, so I can only assume that was the problem.