ASYNC vs DEFER
This article will explore an interesting Javascript topic. async and defer are attributes used when including external JavaScript files in HTML documents. They affect how the browser loads and executes the script. Let's learn about them in detail.
Default Behaviour
We generally connect our HTML page with external javascript with <script> tag. Traditionally, JavaScript <script> tags were often placed in the <head> section of the HTML document. However, doing so means that the parsing of the HTML is blocked until the JavaScript file is fetched and executed, leading to slower page load times. Nowadays, we mostly prefer to keep the <script> tag after all the contents of the <body> element to the page get loaded first.
<script src="example.js"></script>
Here's how HTML parsing and script execution takes place
Async
When we include a script with the async attribute, it tells the browser to download the script asynchronously while parsing the HTML document. The script is downloaded in the background without blocking the HTML parsing process.
Once the script is downloaded, it's executed asynchronously, meaning it can run at any time, even before the HTML document has finished parsing.
领英推荐
<script src="example.js" async></script>
Defer
If multiple scripts are loaded asynchronously, they will execute as soon as they finish downloading, regardless of their order in the document. It is useful when the script doesn't depend on the DOM being fully loaded or other scripts.
When we include a script with the defer attribute, it also tells the browser to download the script asynchronously while parsing the HTML document. However, the execution of the script is deferred until after the HTML document has been parsed.
<script src="example.js" defer></script>
Scripts with the defer attribute will execute in the order they appear in the document. It is useful when the script relies on the DOM being fully parsed or when script execution order is important.
Conclusion
Both async and defer allow the HTML parsing process to continue without waiting for the script to be downloaded.
The difference lies in when the script is executed: With async, the script executes as soon as it's downloaded, potentially before the HTML document is fully parsed. With defer, the script executes only after the HTML document is fully parsed, but before the DOMContentLoaded event.
One of the important things to note is, that we should only use async when we have scripts that can run independently and don't rely on the DOM structure, and we use defer when we need to maintain script execution order or depend on the DOM structure.