The <script async>
and <script defer>
attributes in HTML are used to control how external JavaScript files are loaded and executed in a web page. They both affect the timing of script execution, but they have distinct differences:
<script async>
:
Asynchronous Loading: When you use the async
attribute in a <script>
tag, the browser will continue parsing and rendering the HTML document while the script file is being fetched in the background. This means that the script download doesn’t block the HTML parsing process.
Execution Timing: The script will be executed as soon as it’s downloaded and becomes available, which may happen before the entire HTML document is parsed or loaded. As a result, the order of script execution may not necessarily match the order in which the <script>
tags appear in the HTML.
Use Cases: <script async>
is commonly used for non-blocking scripts, such as analytics or tracking scripts, where the order of execution is not critical, and you want to minimize page load times.
<script src="script.js" async></script>
<script defer>
:
Deferred Loading: When you use the defer
attribute in a <script>
tag, the script file is also fetched in the background, but it’s guaranteed to be executed only after the HTML document has been fully parsed and before the DOMContentLoaded
event is fired.
Execution Timing: Scripts with the defer
attribute will be executed in the order they appear in the HTML document, maintaining the relative order of execution specified in the page source.
Use Cases: <script defer>
is often used for scripts that rely on DOM elements or need to be executed in a specific order. It ensures that the script won’t interfere with the page’s rendering and can access the DOM elements once they are available.
<script src="script.js" defer></script>
In summary, the key difference between <script async>
and <script defer>
is in when they are executed and how they affect the page load process:
<script async>
loads and executes scripts asynchronously, potentially out of order, while not blocking the HTML parsing.<script defer>
loads scripts asynchronously but ensures they are executed in order after the HTML parsing, just before theDOMContentLoaded
event.
The choice between these attributes depends on your specific use case and the requirements of the JavaScript code you are including in your web page.
Here’s a comparison table highlighting the differences between <script async>
and <script defer>
:
Attribute | Asynchronous (<script async> ) |
Deferred (<script defer> ) |
---|---|---|
Loading | Fetches script asynchronously, doesn’t block HTML parsing. | Fetches script asynchronously, doesn’t block HTML parsing. |
Execution Timing | Executes as soon as the script is available, may not maintain order. | Executes in order of appearance in the HTML document, before DOMContentLoaded . |
Order of Execution | May execute scripts out of order. | Maintains the order of execution as specified in the HTML. |
Dependencies | May not be suitable for scripts with dependencies on other scripts or DOM elements. | Suitable for scripts with dependencies, as they execute after DOM is parsed. |
Use Cases | Typically used for non-blocking scripts where order of execution is not critical. | Suitable for scripts that rely on DOM elements or need to execute in a specific order. |
DOMContentLoaded |
May execute before or after DOMContentLoaded event. |
Executes just before the DOMContentLoaded event. |
Page Load Time | May load scripts faster, potentially leading to faster page rendering. | Slightly slower loading compared to async but ensures predictable order. |
Remember that the choice between async
and defer
should depend on the specific requirements of your JavaScript code and how it interacts with the rest of your web page.
let’s illustrate the difference between <script async>
and <script defer>
with real-world examples:
Example: Analytics Tracking Script
Suppose you have an analytics tracking script that you want to include on your web page. This script doesn’t have any dependencies on other scripts or DOM elements and should load and execute as quickly as possible.
<script async>
:
<script src="analytics.js" async></script>
In this case, you use <script async>
because you want the analytics script to load asynchronously and not block the rendering of your web page. The script will be fetched in the background and executed as soon as it’s available. It may execute before or after other scripts or even before the entire HTML document is parsed, which is acceptable for an analytics script since it doesn’t rely on the page’s content.
<script defer>
:
<script src="analytics.js" defer></script>
If you use <script defer>
, the analytics script will still load asynchronously, but it will be guaranteed to execute after the HTML document is fully parsed and just before the DOMContentLoaded
event. This ensures that the script won’t interfere with the rendering process and will have access to the fully constructed DOM.
Example: JavaScript Code with Dependencies
Now, let’s consider a more complex scenario where you have JavaScript code that depends on other scripts or DOM elements.
<script src="library.js" defer></script> <script src="app.js" defer></script>
In this case, you use <script defer>
for both the library and the application scripts. Here’s why:
- The
library.js
script may contain a library or framework that yourapp.js
script depends on. Usingdefer
ensures thatlibrary.js
is executed beforeapp.js
, maintaining the order of execution. - The use of
defer
also ensures that both scripts execute after the HTML document is parsed, so they can access and manipulate DOM elements without issues.
In summary, you’d use <script async>
when you have non-blocking scripts that don’t depend on the order of execution or DOM elements, and you’d use <script defer>
when you need to ensure the order of execution and when scripts rely on the fully parsed DOM.