Difference between Defer and Async keywords?

@Yomesh Gupta

What are the differences between the keyword async and defer?

<p>Hello World</p>

<script type="text/javascript" src="/script2.js" async></script>
<script type="text/javascript" src="/script1.js" defer></script>
<script type="text/javascript" src="/script3.js" defer></script>
<script type="text/javascript" src="/script4.js" async></script>
Option 1
No Difference at all. Both keywords does exactly the same thing!
Option 2
Defer:
1. Execute after the document is loaded and parsed (they wait if needed), right before DOMContentLoaded.
2. Order of execution matters.
3. Does not blocks parsing of the page.
4. Used for scripts that need the whole DOM and/or their relative execution order is important.

Async:
1. May load and execute while the document has not yet been fully downloaded.
2. Load first order -- executes which ever scripts loads first.
3. Blocks Parsing of the page.
4. Used for independent scripts, like counters or ads. And their relative execution order does not matter.
Option 3
Async:
1. Execute after the document is loaded and parsed (they wait if needed), right before DOMContentLoaded.
2. Order of execution matters.
3. Does not blocks parsing of the page.
4. Used for scripts that need the whole DOM and/or their relative execution order is important.

Defer:
1. May load and execute while the document has not yet been fully downloaded.
2. Load first order -- executes which ever scripts loads first.
3. Blocks Parsing of the page.
4. Used for independent scripts, like counters or ads. And their relative execution order does not matter.
Do you see value in our efforts?

Devtools Tech is a free platform for Frontend Engineers. It takes a lot of time, effort, and finanical resources to keep the platform running. If you see any value in our work and would like to support us then you can do using the following options.

InternationalDomestic