How to execute a script asynchronously in HTML5 ?
Last Updated :
17 Mar, 2021
In this article, we will learn how to execute a script asynchronously on a webpage. This can be used in situations where loading the content is important as heavy scripts can cause the page to wait for it to load thereby making the page appear incomplete. Asynchronously loading would solve this issue of blocking DOM rendering.
The script tag is used to implement external and external scripts inside the webpage. To make the scripts run asynchronously, we have two attributes, the first is async and the second is defer. These are boolean type attributes and both load scripts asynchronously without blocking the DOM rendering.
The main difference between the both is the async attributes asynchronously executes the script just after loading without waiting for the DOM to finish rendering but the defer attribute executes the script when the DOM content is fully loaded. The async attribute is not supported by the older browsers, but defer is supported by older browsers.
When async and defer are both used, then the defer attribute is ignored by the browser. However, if the browser is old and async is not supported then the defer attribute will work.
Example 1: In this example we have four elements, the first is a <p> element which is the content before the script, the second is the <script> element that contains the script to be loaded, the third is another <p> element which is the content after the script, and the fourth is the <button> element to refresh the page. We will be loading the script asynchronously and putting the script in the middle of the code to see if it is blocking the DOM rendering or not.
HTML
<html>
<body>
<p>Content before script</p>
<script async
src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<p>Content after script</p>
<button onclick="window.location.reload()">
Refresh
</button>
</body>
</html>
Output:
Without using the async attribute, the second <p> element loads after some time:
Using the async attribute, the script loads asynchronously without blocking the DOM rendering
Example 2: This example is the same as the previous one, however we are using defer instead of async. In this case, the script get loaded after all the DOM content is rendered.
HTML
<html>
<body>
<p>Content before script</p>
<script defer src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<p>Content after script</p>
<button onclick="window.location.reload()">
Refresh
</button>
</body>
</html>
Output:
Without using the defer attribute, the second <p> element loads after some time:
Using the defer attribute, the script loads after the DOM rendering finishes:
Similar Reads
How to create an Asynchronous function in Javascript? JavaScript is a single-threaded and synchronous language. The code is executed in order one at a time. But Javascript may appear to be asynchronous in some situations. Example: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title
6 min read
How to chain asynchronous functions in JavaScript ? JavaScript is a single-threaded, asynchronous programming language. Thus, some time-consuming operations like I/O, accessing the database, network calls, etc. are performed asynchronously so that it does not interrupt things in the only JS thread. This can be done by asynchronous code like promises
2 min read
How to define a client-side script in HTML5 ? To define a client-side script in HTML5, we can do <script> tag or adding external script file by src attribute to the HTML file. <script> tag contains the JavaScript to be added for the client-side scripting. Syntax: <script> // JavaScript goes here console.log('GeeksforGeeks');
1 min read
How to Add JavaScript in HTML Document? To add JavaScript in HTML document, several methods can be used. These methods include embedding JavaScript directly within the HTML file or linking an external JavaScript file.Inline JavaScriptYou can write JavaScript code directly inside the HTML element using the onclick, onmouseover, or other ev
3 min read
How to call JavaScript function in HTML ? In HTML, you can easily call JavaScript functions using event attributes like onclick and onload. Just reference the function name within these attributes to trigger it. You can also call functions directly within script blocks using standard JavaScript syntax. Let's create an HTML structure with so
2 min read
JavaScript - How Does Asynchronous Code Work? Asynchronous code in JavaScript allows to execute code in the background without blocking the main thread. Asynchronous JavaScript is mainly used for handling tasks like network requests, file operations, and API calls. To understand how asynchronous code works, it's important to first know the conc
4 min read