JavaScript Async and Defer: Explained with Examples

JavaScript is a powerful scripting language that adds interactivity and dynamic functionality to web pages. When including JavaScript code in an HTML document, it's important to understand the concepts of async and defer. In this article, we will explore async and defer attributes and how they affect the loading and execution of JavaScript code.

Async Attribute

The async attribute is used in the <script> tag to indicate that the JavaScript code should be loaded and executed asynchronously. When a browser encounters a script tag with the async attribute, it continues parsing the HTML document without waiting for the script to be fully loaded and executed. Here's an example:

<script src="script.js" async></script>

In this example, the script.js file is loaded asynchronously. The browser will continue parsing the HTML document while fetching the external JavaScript file in the background. Once the script is loaded, it will be executed immediately, potentially interrupting the HTML parsing and other script executions.

Defer Attribute

The defer attribute is also used in the <script> tag to indicate that the JavaScript code should be deferred, i.e., it should be executed after the HTML document has been parsed. Unlike async, defer ensures that the script is executed in the order in which it appears in the HTML document. Here's an example:

<script src="script.js" defer></script>

In this example, the script.js file is loaded asynchronously but executed in a deferred manner. The browser will fetch the external JavaScript file in the background while parsing the HTML document. However, the script will be executed only after the HTML document has been fully parsed, ensuring that the execution order is maintained.

Usage Considerations

When deciding whether to use async or defer, consider the following factors:

• Script Dependencies: If your JavaScript code relies on other scripts or the DOM structure, defer is often the preferred option to ensure the correct execution order.
• Execution Timing: If the script needs to be executed immediately and independently of the HTML document's parsing, async can be useful. However, be cautious of potential interruptions to HTML parsing and other script executions.
• Performance: Async and defer can improve the loading performance of your web page by allowing the HTML parsing to proceed independently of script loading. However, keep in mind that async scripts may load and execute in any order, potentially affecting dependencies.

Best Practices

Here are some best practices when using async and defer:

• Minimize Blocking Scripts: Consider using async or defer for external scripts whenever possible to prevent blocking the HTML parsing process.
• Order-dependent Scripts: Use defer when the execution order of scripts is important and they depend on each other.
• Combine and Minify: To reduce the number of HTTP requests, consider combining and minifying your JavaScript files before including them with async or defer attributes.

In conclusion, async and defer attributes provide options for controlling the loading and execution of JavaScript code within HTML documents. Async allows for non-blocking script loading and immediate execution, while defer ensures scripts are executed in the order they appear after HTML parsing. Understanding the differences between async and defer can help optimize script loading and improve the overall performance of your web pages.