Skip to content

Commit 661bedd

Browse files
committed
doc(Interview Question): Difference between async and defer
Signed-off-by: cankush625 <cankush625@gmail.com>
1 parent 4465433 commit 661bedd

File tree

1 file changed

+26
-0
lines changed

1 file changed

+26
-0
lines changed

Notes/InterviewQuestions.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
## Difference between async and defer in JavaScript
2+
3+
When we include the scripts directly into the HTML, then when HTML parse reach to the line where <br>
4+
JS scripts are included then it will first stops the HTML parsing and download the script and start executing them. <br>
5+
After the scripts are fully executed, it will resume the HTML parsing. This will make the HTML parsing slow in browser.
6+
```
7+
<script src="" />
8+
```
9+
10+
To overcome above issue we use async and defer.
11+
12+
### async attribute
13+
The `async` attribute will load the scripts and do the HTML parsing in parallel. But as soon as JS scripts are downloaded,
14+
it will stop the HTML parsing, execute the JS scripts completely and then resume the HTML parsing. <br>
15+
The `async` attribute does not gurantees the order of execution of the scripts.
16+
```
17+
<script async src="" />
18+
```
19+
20+
### defer attribute
21+
The `defer` attribute is best of the both worlds. When we use defer, the downloading of JS scripts and HTML parsing will
22+
happen in parallel. Once the HTML parsing is completed, it will execute the JS scripts. <br>
23+
The `defer` attribute guarantees the order of execution of the scripts.
24+
```
25+
<script defer src="" />
26+
```

0 commit comments

Comments
 (0)