Devtools Tech Logo
0
0
0

Difference between Defer and Async keywords?

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.