We link a javascript file to an HTML document by using script tag.
But there are few different options we can choose depending on script tag’s position and property.
I thought it would be helpful for those who just started learning javascript.
End of head
First case is using script at the end of the head .
When user enters web page, browser starts to read HTML document line by line for example from line 1 to line 12 in here.
As soon as browser reads line number 7, browser stops parsing HTML and then start fetching app.js
HTML document has no choice but to wait until every single line of code in app.js is executed.
What would be problem?
Having huge size of JS file or slow internet may lead bad user experience since user won’t see anything for a long time until JS file is executed
End of body
In this case, Browser reads code inside of body and then starts to read script.
Unlike what we saw in the first case, browser doesn’t stop parsing HTML anymore. Now app.js file starts to fetching after all HTML document is parsed.
Is this always nice?
Imagine your web page highly depends on your JS file. For example, if your web page is intended to show lots of data that will be fetched from app.js or you add lots of interaction.
In this situation, web page will not work as intended until JS file is fetched and executed.
End of head — async
As you can see, browser doesn’t stop parsing HTML when fetching JS file. Browser starts parsing and fetching at the same time. This is outstanding characteristic that we haven’t seen at the first and second case.
Pros & Cons
This can definitely save downloading time. But if DOM that JS file want to use is not defined yet, web page won’t work as intended.
Also user have to wait until JS file is executed to see entire content.
End of head — defer
Browser fetches JS file while parsing HTML and then, unlike async, browser doesn’t execute JS when fetching finished. Instead, waiting until all HTML document is parsed
You might know this is the best option we can choose. Defer not only have pros of async (short downloading time), but also improves the cons of async (executing JS file after all HTML document is parsed)
async vs defer
When we download multiple script with async option, JS file that is fetched earlier is executed (app2.js -app1.js -app3.js) regardless of the order of script (app1.js -app2.js -app3.js).
If your javascript file depends on the order, you should not use async since you can not control the order of executing.
What if we download multiple script using defer option?
As you can see, all scripts are downloaded during HTML parsing process. And then each script are executed respectively in order.
Conclusion
After taking a look 4 kinds of options, we can easily find out that using script inside of head tag with defer option is the most efficient and secure way we can choose!!
In fact, i have used defer option in the past without knowing how exactly it works.
I hope this post was helpful for someone to understand the reason why we use defer.
reference : https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2
