script tags in `head`

[jsms90]

script tags in `head`

[dangerdak]

@jsms90 The link says "The current state-of-the-art is to put scripts in the tag and use the async or defer attributes. This allows your scripts to be downloaded asap without blocking your browser." at the bottom of the first answer

[finnhodgkin]

I know project time is over but I just noticed this issue.

It's not as clear-cut as "use async because it's the current state-of-the-art". For one thing async isn't supported by IE8.

Other answers in that post include some examples of issues with the async property:

<script src="jquery.js" async></script>
<script>jQuery(something);</script>
/*
  * might throw "jQuery is not defined" error
  * defer will not work either
*/

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
/*
  * might throw "jQuery is not defined" error (no guarantee which script runs first)
  * defer will work in sane browsers
*/

The above example is particularly relevant. If dom.js was downloaded and executed first it would cause all sorts of problems.

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
/*
  * might not locate #header (script could fire before parser looks at the next line)
  * defer will work in sane browsers
*/

Putting multiple scripts at the end of the body may not be the best solution but it's definitely the simplest, especially when you have a set of script files that each rely on the last. Async is a great property (especially for below the fold content - both css and js) but shouldn't be used unless you're sure the order of execution doesn't matter.

Further reading (bit old so I'm not sure if it's all still relevant...):
https://www.html5rocks.com/en/tutorials/speed/script-loading/

[finnhodgkin]

(I haven't actually read into this that much so I may be completely wrong 😉)

[dangerdak]

Ah ok thanks 👍 . We started using it because we saw this issue from a previous week (which refers to the same stackoverflow thread) but probs should have actually read into it rather than assuming we should always use it!