HTML defer Attribute

Last Updated : 18 Dec, 2024

The defer attribute can be added to <script> elements that point to an external JavaScript file. It ensures that the script is executed only after the HTML document has been completely loaded and parsed, but before the DOMContentLoaded event is fired.

It ensures that scripts do not block HTML parsing.
By deferring the script, the browser can render content faster.
The defer attribute only works with external scripts, not inline ones.

html

<html>
<body>
    <script id="myGeeks"
            type="text/javascript"
            src="my_script.js"
            defer>
    </script>
    <br>
    <button type="button" onclick="myFunction()">Submit</button>
</body>
</html>

JavaScript

function myFunction() {
    alert("Script works");
}

In this example:

The script my_script.js is linked in the <body>, but its execution is deferred until after the HTML document is parsed.
The page content will be rendered first, and once the HTML is fully loaded, the script will execute.

Syntax

<script src="script.js" defer></script>

How It Works

When the browser encounters a <script> tag with the defer attribute:

The script is downloaded in parallel to the HTML parsing.
The script's execution is deferred until the HTML parsing is complete.
The script executes in the same order as it appears in the document.

Example Without defer (Blocking Script):

HTML

<html>
<head>
    <script src="script.js"></script>
</head>
<body>
    <h1>This text is delayed!</h1>
         <button type="button" onclick="myFunction()"> Submit </button>
</body>
</html>

JavaScript

function myFunction() {
    alert("Script works");
}

The browser halts HTML parsing to download and execute script.js.
The <h1> element rendering is delayed until the script executes.

Example With defer:

HTML

<html>
<head>
  <script src="script.js" defer></script>
</head>
<body>
    <h1>This text loads without delay!</h1>
         <button type="button" onclick="myFunction()">Submit</button>
</body>
</html>

JavaScript

function myFunction() {
    alert("Script works");
}

The browser parses and renders the HTML first.
The script executes only after the entire document is parsed.

Why Use the defer Attribute?

Improved Performance: By deferring the script execution, the browser can parse and render the HTML without waiting for the script to load and execute.
Better User Experience: Deferring JavaScript allows the page content to load and become interactive sooner, reducing perceived load times.
Avoids Render-Blocking: Without defer, scripts placed in the <head> can block the browser from rendering the page until the script is fully loaded and executed.

Key Features of the defer Attribute

Scripts with defer are downloaded during the parsing of the HTML but are executed only after the entire document has been parsed.
Deferred scripts are executed in the order they appear in the document, ensuring predictable behavior.
The defer attribute works only with external JavaScript files (specified using the src attribute). Inline scripts will ignore defer.
A script cannot have both async and defer attributes. If both are present, async takes precedence, and defer is ignored.

HTML defer Attribute

Vijay Sirra

Improve

Article Tags :

HTML defer Attribute

Syntax

How It Works

Example Without defer (Blocking Script):

Example With defer:

Why Use the defer Attribute?

Key Features of the defer Attribute

Similar Reads

Thank You!

What kind of Experience do you want to share?