The async attribute in HTML is used with the <script> tag to control how external JavaScript files are loaded and executed.
Definition and Usage
➔ The async attribute is a boolean attribute, meaning the value is either true or false.
➔ When present, it specifies that the external script will be executed asynchronously as soon as it becomes available, without blocking parsing of the HTML document.
➔ The async attribute only applies to external scripts, meaning it must be used with the src attribute in the <script> tag.
➔ Async scripts are executed as soon as they are ready, regardless of their order in the HTML document, and do not depend on the order of the scripts in the DOM.
➔ Async can significantly improve page load times and perceived performance. But if there is a dependency between the script and the HTML DOM element access, use defer to fully load the HTML and then load the script to read or write to the DOM.
Example
<script src="path_to_script.js" async></script>
➔ The defer attribute allows scripts to be downloaded asynchronously, but the scripts will only be executed after the HTML document has been fully parsed or loaded.
➔ The defer attribute is especially useful for scripts that rely on the DOM or need to be executed in a specific order, and ensures that scripts can access and manipulate the DOM without encountering errors.
➔ If both the async and defer attributes are present, the async attribute takes precedence over the defer attribute.
Example
<script src="path_to_script.js" defer></script>
➔ Load internal script file
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML script tag async Example</title>
<style>
input[type='text'] {
border: 1px solid rgb(19, 18, 18);
border-radius: 5px;
background-color: #d1e0ff;
padding: 5px;
margin-top: 10px;
width: 200px;
height: 23px;
}
input[type='button'] {
border: 1px solid rgb(19, 18, 18);
border-radius: 5px;
background-color: #d1e0ff;
padding: 5px;
margin-top: 10px;
width: 120px;
height: 42px;
}
input[type='button']:hover {
background-color: #c1d0ff;
}
</style>
</head>
<body>
<h2>HTML script tag async Example</h2>
<table>
<tr>
<td>Script1 loading time:</td>
<td><input type="text" id="p1" name="p1"></td>
</tr>
<tr>
<td>Script2 loading time:</td>
<td><input type="text" id="p2" name="p2"></td>
</tr>
<tr>
<td>Script3 loading time:</td>
<td><input type="text" id="p3" name="p3"></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btn1" value="Click"></td>
</tr>
</table>
<script>
const button = document.getElementById("btn1");
function f1() {
const d1 = new Date();
document.querySelector("#p1").value = d1.toISOString();
}
function f2() {
const d2 = new Date();
document.querySelector("#p2").value = d2.toISOString();
}
function f3() {
const d3 = new Date();
document.querySelector("#p3").value = d3.toISOString();
}
button.addEventListener("click", f1);
button.addEventListener("click", f2);
button.addEventListener("click", f3);
</script>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML script tag async defer Example</title>
<style>
label {
padding: 5px;
margin-top: 10px;
width: 580px;
height: 280px;
}
input[type='text'] {
border: 1px solid rgb(19, 18, 18);
border-radius: 5px;
background-color: #d1e0ff;
padding: 5px;
margin-top: 10px;
width: 200px;
height: 23px;
}
input[type='button'] {
border: 1px solid rgb(19, 18, 18);
border-radius: 5px;
background-color: #d1e0ff;
padding: 5px;
margin-top: 10px;
width: 120px;
height: 42px;
}
input[type='button']:hover {
background-color: #c1d0ff;
}
</style>
</head>
<body>
<h2>HTML script tag async defer Example</h2>
<p>Refresh page to see the loading sequence of the script files</p>
<table>
<tr>
<td>Script1 loading time:</td>
<td><input type="text" id="p1" name="p1"></td>
</tr>
<tr>
<td>Script2 loading time:</td>
<td><input type="text" id="p2" name="p2"></td>
</tr>
<tr>
<td>Script3 loading time:</td>
<td><input type="text" id="p3" name="p3"></td>
</tr>
</table>
<script async src='script1.js'></script>
<script async src='script2.js'></script>
<script async src='script3.js'></script>
</body>
</html>
Click on the "Try it Now" button to see how it works.