What is defer?🤔
In HTML, the defer attribute in the <script> tag is used to specify that the script should be executed after the document has been parsed, but before firing the DOMContentLoaded event. This means that the script will be loaded in parallel with other resources, such as images and stylesheets, but it will not block the parsing of the HTML document.
Why use defer?🙄
Improved Page Load Performance:
By using defer, you can ensure that JavaScript files are downloaded in parallel with other resources like images and stylesheets, without blocking the parsing of the HTML document. This can lead to faster page load times, especially for larger scripts or scripts that are not essential for rendering the initial content of the page.
Orderly Execution:
Scripts with the defer attribute are executed in the order they appear in the document, but after the HTML document has been parsed and before the DOMContentLoaded event is fired. This means that you can maintain control over the order in which scripts are executed, ensuring dependencies are met while still allowing for asynchronous loading.
Access to DOM:
Deferred scripts have access to the entire DOM tree, so you can manipulate the DOM freely within these scripts. This can be useful if you have scripts that need to interact with or modify the HTML content of the page.
Better User Experience:
By deferring non-essential scripts, you can prioritize the loading and rendering of critical content, leading to a smoother and more responsive user experience. Users can start interacting with the page sooner, even if some scripts are still loading or executing in the background.
How defer works?💻
When a browser encounters a
<script>tag with the defer attribute, it will download the script file in parallel with other resources while continuing to parse the HTML document.Once the HTML parsing is complete, the browser will then execute the deferred script in the order they appear in the document.
Importantly, the execution of deferred scripts occurs before the DOMContentLoaded event fires, which means that they have access to the entire DOM tree.
Example📝
Without defer keyword
With defer keyword
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
<button id="btn1">click</button>
</body>
</html>
index.js
const id = document.getElementById('btn1');
id.addEventListener('click', () => {
console.log('hello');
alert('Button was clicked');
});
Browser Compatibility💪🏻
The defer attribute widely supported across all modern browsers, but in some browser (older versions) it won't work.
Full Support:
- Google Chrome (all versions)
- Mozilla Firefox (all versions)
- Safari (all versions)
- Microsoft Edge (all versions)
- Opera (all versions)
Partial Support:
- Internet Explorer: Versions 10 and above support defer. Versions 9 and below do not support it.
- Opera Mini: Support may vary or be limited.
Alternative: You can add <script /> tag at the end of body tag, if it not supports browser.
<body>
<button id="btn1">click</button>
<!-- Other DOM -->
<script src="index.js"></script>
</body>
Final Thoughts🙌🏻
Connect with me @ Linktree
Happy Coding!🚀
Thanks for reading!🤗
Top comments (0)