HTML async Attribute

Last Updated : 09 Jan, 2025

The HTML <script> async attribute is used to load and execute external scripts without blocking the rest of the page from loading. This speeds up page load times. It only works with external scripts (when the src attribute is present).

Syntax:

<script src="path-to-script.js" async></script>

html

<!DOCTYPE html>
<html >
  <body>
    <h1>Welcome to My Website</h1>
    <p>This page demonstrates loading an external script asynchronously.</p>
    <script src="external-script.js" async></script>
  </body>
</html>

JavaScript (external-script.js):

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  console.log('External script loaded asynchronously.');
});

The <script> tag includes the async attribute, instructing the browser to download and execute the external-script.js file asynchronously.
The JavaScript file contains a simple console.log statement that runs when the DOM content is fully loaded.

Note:

async only works with external scripts (src is required).
It improves page loading speed by running scripts in parallel with the rest of the page’s content.

More Example of HTML async Attrribute

Dynamically Adding an Asynchronous Script with JavaScript

HTML

<html lang="en">
  <body>
    <p>This page demonstrates adding a script asynchronously using JavaScript.</p>
    <script src="dynamic-loader.js"></script>
  </body>
</html>

JavaScript (dynamic-loader.js):

JavaScript

let script = document.createElement('script');
script.src = 'dynamic-script.js';
script.async = true;
document.head.appendChild(script);

JavaScript (dynamic-script.js):

console.log('Dynamic script loaded asynchronously.');

In this example:

The dynamic-loader.js script creates a new <script> element, sets its src to dynamic-script.js, and assigns the async attribute to load it asynchronously.
The dynamic-script.js file contains a console.log statement indicating it has been loaded.

Loading Multiple Scripts with async Attribute

HTML

<html>
<body>
	<p>This page demonstrates loading multiple external scripts asynchronously.</p>
	<script src="script1.js" async></script>
	<script src="script2.js" async></script>
	<script src="script3.js" async></script>
</body>
</html>

JavaScript (script1.js):

console.log('Script 1 loaded.');

JavaScript (script2.js):

console.log('Script 2 loaded.');

JavaScript (script3.js):

console.log('Script 3 loaded.');

In this example:

Three external scripts are included in the HTML, each with the async attribute.
Each script contains a console.log statement indicating its loading.
The scripts will load and execute asynchronously, and their execution order is not guaranteed.

Best Practices for HTML async Attribute

Use async for independent scripts that don’t rely on other scripts or the DOM, such as analytics or advertising scripts.
Avoid using async for scripts that depend on the DOM or other scripts to ensure proper execution order.

HTML autocomplete Attribute

shubham_singh

Improve

Article Tags :

HTML async Attribute

Syntax:

Dynamically Adding an Asynchronous Script with JavaScript

Loading Multiple Scripts with async Attribute

Best Practices for HTML async Attribute

Similar Reads

Thank You!

What kind of Experience do you want to share?