Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Topics

HTML defer Attribute

Posted in HTML Tutorial
Updated on Nov 22, 2024
By Mari Selvan
👁️ 76 - Views
⏳ 4 mins
💬 1 Comment
HTML defer Attribute

Photo Credit to CodeToFun

🙋 Introduction

The defer attribute in HTML is used with the <script> element to indicate that the script should be executed after the HTML document has been completely parsed.

This attribute is especially useful for optimizing web page loading performance by deferring the execution of scripts until the document structure is fully loaded.

🎯 Purpose of defer

The primary purpose of the defer attribute is to improve page load times by preventing scripts from blocking the HTML parsing process.

When a script is marked as "defer," it will be downloaded in the background while the HTML parsing continues. The script is then executed in order, once the parsing is complete.

💎 Values

The defer attribute accepts a boolean value:

  • defer: When set, it indicates that the script should be executed after the HTML document has been parsed. This is the value that activates the defer attribute.
  • (absence of the defer attribute): If the defer attribute is not present, or if its value is anything other than "defer," the script will be executed immediately, potentially blocking HTML parsing.

📄 Example

Let's look at a simple example of how to use the defer attribute with a script element:

defer.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Defer Attribute Example</title>
  <script defer src="myscript.js"></script>
</head>
<body>
  <!-- Your HTML content here -->
</body>
</html>

🧠 How it Works

In this example, the defer attribute is added to the <script> element, indicating that the script in myscript.js will be deferred until after the HTML document is parsed.

🔄 Dynamic Values with JavaScript

Similar to the autocomplete attribute, you can dynamically set the defer attribute using JavaScript.

This can be useful when you want to conditionally load scripts based on certain criteria. Here's an example:

defer.html
Copied
Copy To Clipboard
<script>
  // Dynamically set defer for a script element
  var scriptElement = document.createElement("script");
  scriptElement.src = "dynamicScript.js";
  scriptElement.defer = true;
  document.head.appendChild(scriptElement);
</script>

🧠 How it Works

In this script, a new <script> element is created dynamically, and the defer attribute is set to true. This can be beneficial when you need to load a script dynamically and ensure it doesn't block the HTML parsing process.

🏆 Best Practices

  • Use the defer attribute for scripts that don't need to execute before the HTML document is fully parsed.
  • Avoid using defer for scripts that are essential for the page's functionality and need to execute immediately.
  • Always test the behavior of scripts with and without the defer attribute to ensure proper functionality.

🎉 Conclusion

The defer attribute is a valuable tool for optimizing web page loading performance by deferring the execution of scripts until after the HTML document has been parsed.

By using this attribute judiciously, you can strike a balance between script execution and page load speed.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
9 months ago

If you have any doubts regarding this article (HTML defer Attribute), please comment here. I will help you immediately.

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy