async is new(ish), but defer has been part of IE since IE4. defer was added to other browsers much more recently, but older versions of those browsers tend to hang around a lot less.
– AlohciMay 29 '12 at 23:53

7 Answers
7

Keep your scripts right before </body>. Async can be used with scripts located there in a few circumstances (see discussion below). Defer won't make much of a difference for scripts located there because the DOM parsing work has pretty much already been done anyway.

Your HTML will display quicker in older browsers if you keep the scripts at the end of the body right before </body>. So, to preserve the load speed in older browsers, you don't want to put them anywhere else.

If your second script depends upon the first script (e.g. your second script uses the jQuery loaded in the first script), then you can't make them async without additional code to control execution order, but you can make them defer because defer scripts will still be executed in order, just not until after the document has been parsed. If you have that code and you don't need the scripts to run right away, you can make them async or defer.

You could put the scripts in the <head> tag and set them to defer and the loading of the scripts will be deferred until the DOM has been parsed and that will get fast page display in new browsers that support defer, but it won't help you at all in older browsers and it isn't really any faster than just putting the scripts right before </body> which works in all browsers. So, you can see why it's just best to put them right before </body>.

Async is more useful when you really don't care when the script loads and nothing else that is user dependent depends upon that script loading. The most often cited example for using async is an analytics script like Google Analytics that you don't want anything to wait for and it's not urgent to run soon and it stands alone so nothing else depends upon it.

Usually the jQuery library is not a good candidate for async because other scripts depend upon it and you want to install event handlers so your page can start responding to user events and you may need to run some jQuery-based initialization code to establish the initial state of the page. It can be used async, but other scripts will have to be coded to not execute until jQuery is loaded.

thankyou very much for taking the time to explain that to me... appreciated.!!
– AdamMay 29 '12 at 23:57

1

Defer should run them in order still, but run before dom-contentloaded. Doesn't that mean putting it in head would be faster, since it can start downloading them BEFORE The body html is parsed?
– KevinSep 18 '13 at 23:13

5

You said putting scripts in head and setting them to defer won't be any faster than putting them before </body>, but from what I've read that is incorrect. Think about it -- if you put the scripts in <head>, then they will start downloading immediately, whereas if they are right before </body> then all the other elements download first.
– NateAug 4 '14 at 17:43

5

@Nate - It won't make your document load any faster which is my point. You are correct that it could improve loading the script sooner, but it also could slow down loading of the document and it's contents because you're using some of your bandwidth and using one of the limited connections the browser will make to a given server to load the script while it's also trying to load your content.
– jfriend00Aug 4 '14 at 17:49

2

"If your second script depends upon the first script... then you can't make them either async or defer" -- that's not true, with defer they execute in order.
– DisgruntledGoatDec 9 '14 at 2:33

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script.

The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. Whereas the defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.