What is JavaScript Defer?
JavaScript is a powerful scripting language that can enhance the functionality and interactivity of websites. When a web page contains JavaScript code, it is typically placed within the HTML document’s <script> tags. By default, the browser will pause the HTML parsing process and execute the JavaScript code immediately, which can sometimes lead to slower page load times.
JavaScript defer is an attribute that can be added to the <script> tag to instruct the browser to defer the execution of the JavaScript code until after the HTML parsing is complete. This can help improve the performance of your website by allowing the browser to continue parsing and rendering the HTML content without interruption.
How to Use JavaScript Defer
To use the JavaScript defer attribute, simply add the defer keyword to the <script> tag:
<script src="script.js" defer></script>
By including the defer attribute, you are telling the browser to load the JavaScript file asynchronously while still deferring its execution until after the HTML parsing is complete.
Benefits of JavaScript Defer
Using JavaScript defer offers several benefits:
- Improved Page Load Time: By deferring the execution of JavaScript, the browser can continue parsing and rendering the HTML content, resulting in faster page load times.
- Reduced Render Blocking: JavaScript can sometimes block the rendering of a web page. By deferring its execution, the browser can render the page without waiting for the JavaScript code to complete.
- Order of Execution: When multiple JavaScript files are included with the defer attribute, they will be executed in the order they appear in the HTML document.
Examples of JavaScript Defer
Let’s take a look at a couple of examples to understand how JavaScript defer works:
Example 1:
In this example, we have a simple HTML document with a JavaScript file included using the defer attribute:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Defer Example</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
The JavaScript code in the “script.js” file will be loaded asynchronously, allowing the browser to continue parsing and rendering the HTML content. Once the HTML parsing is complete, the JavaScript code will be executed.
Example 2:
In this example, we have multiple JavaScript files included with the defer attribute:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Defer Example</title>
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
In this case, both “script1.js” and “script2.js” will be loaded asynchronously. However, the order of execution will be maintained. The browser will execute “script1.js” first, followed by “script2.js”.
Conclusion
JavaScript defer is a useful attribute that can improve the performance of your website by deferring the execution of JavaScript code until after the HTML parsing is complete. By using defer, you can enhance page load times, reduce render blocking, and ensure the proper order of execution for multiple JavaScript files. Consider implementing JavaScript defer in your web development projects to optimize the user experience and overall performance of your website.