JavaScript async defer simplified
So recently I came across a question on StackOverflow where the user had a doubt regarding when to use async and when to use defer attribute with the script tag.
So that was the inspiration behind this post.
Why do we need those attributes in the first place?
Typically when the browser detect javascript(script tag) while parsing HTML,
The Browser immediately stops parsing and makes a network call to get the javascript from the server, and the browser will wait until javascript arrives
Once the browser receives the JS it’ll execute the code within JS.
After that DOM creation will resume.
Now, this is the default behavior of any browsers from the dawn of the browsers and javascript, that was nice and dandy until we millennials decided that we can’t wait and stare at screens while it loads something for us, we need everything fast and performant, and why not?
Rise of async|defer
So nice people at W3 decided to give the developer a chance to improve the performance, obviously, they had to think about the backward compatibility, so instead of changing the default behavior they gave us two new attributes async|defer
async and defer in the action
async|defer are attributes for script tags, either of them can be used at times
<script src="..." async></script>Or:
<script src="..." defer></script>but what is the difference?
ASYNC: now when you use async with the script tag and the browser encounters it,
The browser will make a request for Javascript to the server, but it’ll keep on parsing the HTML, once JS arrives it’ll pause the HTML parsing and it’ll execute the JS.
DEFER: when you use defer with the script tag and the browser encounters it,
The browser will make a request for Javascript to the server but it’ll keep on parsing the HTML, once JS arrives browser will keep it aside, and when HTML parsing is completed then the browser will execute the JS.
TOO many words, this image will sum it up
Image Credits: growingwiththeweb
Order Of Execution(multiple scripts):
- no attributes (synchronous)
- defer (synchronous) (Ofcourse after HTML parsing is completed)
- async(asynchronous)
now, this is important to note that script tags with async attributes can execute in any order so if you have two dependent javascript you can’t put them in async because you can’t predict which will be executed first.
When to use which?
Now we have 3 options available to us
- using async
- using defer
- plain old nothing😉
using defer
A great example would be the chat with us plugin JS, you don’t need it for DOM rendering and user interaction won’t be affected if this script gets executed at the end, (surely we millennials can wait for few seconds before we decide to chat with someone from marketing 😉)
using async
this should be your go-to guy every time you want to add a script tag that is part of your application and is not responsible for DOM creation or first paint of your application. a valid example for this would be BootStrap.js if you’re using bootstrap you know bootstrap CSS will do all the heavy lifting for the first paint, but when user wants to interact with bootstrap specific components let say navbar they need a BootStrap.JS, so yes we can delay its execution but we should wait until Complete DOM is parsed.
If you’re using jQuery with Bootstrap.js and if you mark jQuery as async as well that’ll be a bad idea, why? because you can’t control which of them will come first but you need jQuery first as BootStrap.JS is dependent on jQuery
plain old nothing
when your JS deals with user experience or dom creation you should consider going to this option, in ideal scenarios you shouldn’t need this oldie.
Conclusion:
Deciding which attribute to use when is a bit tricky decision and highly influenced by your need/requirement at hand, so you have to be very careful while deciding because the wrong choice may break your application and will cause more bad than good. at the end be a millennial and start experimenting with your script tags😉
Say Hi to Author: