Adam Adam - 2 months ago 17
jQuery Question

Script Tag - async & defer

I have a couple of questions about these 2 options for the

<script>
tag.

I have a site that has 2 external js scripts that currently sit just above the
</body>
tag.

The first is jquery sourced from google and the second is a local external script I've put together.

I understand these 2 options (async & defer) only work in HTML5 browsers.

With respects to site load speed:

Is there any advantage in adding 'async' to the 2 scripts I have at the bottom of the page?

Would there be any advantage in adding the 'async' option to the 2 scripts and putting them at the top of the page in the
<head>
- would this mean they download as the page loads? I assume this would cause delays for HTML4 browsers, but would it speed up page load for HTML5 browsers?

Could I move the 2 scripts into the
<head>
and then use 'defer' to get the same affect as having the scripts before
</body>
? once again I assume this would slow up HTML4 browsers.

If I have 2 scripts with 'async' enabled would they download at the same time or one at a time with the rest of the page? Does the order of scripts then become a problem - eg: one depends on another so if one downloads faster, the second one might not execute correctly etc.

Finally am I best to leave things as they are until HTML5 is more commonly used?

Answer

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.

Here's an article that explains the difference between async and defer: http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/.

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.

Comments