async vs defer attributes in javaScript

In JavaScript scripting language, the async and defer attributes have a great support. So, let’s see how these attributes works.

So, first of all we need to know how script works without any attributes. At first, the HTML file is parsed until the script file comes. Then, parsing stops and fetches the file and script executes before parsing is resumed.

This is how <script> works.

Let’s see when using async in a <script>.

During HTML parsing, async downloads the file and pause the HTML parser for executing it when it has finished the downloading.

<script src="async.js" async></script>

And here’s how defer works in script.

During HTML parsing, defer downloads the file and execute in a order that they are appearing in the document after completion of parser.

<script src="defer.js" defer></script>

Support:

As below IE9 have some bugs for implementation of defer then, for supporting defer, including your scripts with no attribute may help if execution of order matters.

Read Also: Tips and Tricks for powerful developers

But people are confused where to use and not. Let’s try with some basic points:

• Use async for modular script and if this does not rely on any scripts.
• Use defer if script relies upon or by another script.
• For small script which is relied upon by an async script, then using inline script with no attributes placing above the async scripts works better.