HTML defer Attribute

Posted in HTML Tutorial

Updated on Jan 26, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

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

<!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

<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.