Async vs Defer attributes in JavaScript
The async and defer attributes for the <script> element have great support now, so it’s time to learn exactly what they do!
<script>
Let’s start by defining what <script> without any attributes does. The HTML file will be parsed until the script file is hit, at that point parsing will stop and a request will be made to fetch the file (if it’s external). The script will then be executed before parsing is resumed.
<script async>
async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.
<script defer>
defer downloads the file during HTML parsing and will only execute it after the parser has completed. defer scripts are also guaranteed to execute in the order that they appear in the document.
When should I use what?
Typically you want to use async where possible, then defer then no attribute. Here are some general rules to follow:
- If the script is modular and does not rely on any scripts then use async.
- If the script relies upon or is relied upon by another script then use defer.
- If the script is small and is relied upon by an async script then use an inline script with no attributes placed above the async scripts.
Example:-
Asynchronous loading of JavaScript is a type of sync loading. It means that your website loads in a multi-streamed way.
When the browser finds the string with <script src="some.js"></script>, it will stop creation of DOM and CSSOM models while the JavaScript is executed. This is why most JavaScript code is located after the main HTML code.
To understand this point a little better, take a look at this code:
<html>
<head>
<script src="big.js"></script>
</head>
<body>
This text will not be present until big.js is loaded.
</body>
</html>
Instead, you can add an async tag to the JavaScript so that creation of the DOM model happens in parallel, and won’t be interrupted while the JavaScript is loading and executed.
<html>
<head>
<script src="big.js" async></script>
</head>
<body>
This text will be present and it’s not dependent with big.js loading progress.
</body>
</html>
Use caution if your JavaScript must make some manipulations to the HTML or CSS, or if you’re loading a script in a strong order (e.g., jQuery-dependent libraries).
For example, if you’re using the very popular bxSlider on your website and like CDN for jQuery, to add bxSlider you could add this code to your HTML:
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
As you can see, jQuery is loading from the Google CDN but bxSlider is local. If we add async tag to the string, which includes jQuery, it may create errors with the bxSlider if jquery.bxslider.min.js is loaded before jquery.min.js. In this case, order is very important so another tag is needed: defer.
If the browser sees a defer tag with JavaScript code, it will not stop loading the DOM and CSSOM models. All scripts with a defer tag will be loaded and run immediately after the DOM and CSSOM models are completed. Any scripts will be loaded in the order you code.
<script src="1.js" defer></script>
<script src="2.js" defer></script>
In this case, 2.js will not be loaded until 1.js is loaded, and so on.
Important! Defer and Async tags are available only for external scripts (with src=”” tag). If you will try to use them for internal scripts like <script>…</script> tags, defer and async will be ignored.
Author- Diwaker Mishra