HTML defer Attribute

HTML defer Attribute

The HTML defer attribute is a Boolean attribute used with external classic <script> elements. It tells the browser to fetch the script without blocking HTML parsing and execute it after the document has finished parsing.

Syntax

The defer attribute is placed on an external classic <script> element that uses the src attribute.

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

The browser can fetch the script while it continues parsing the HTML document. The deferred script is executed after parsing has finished and before the DOMContentLoaded event fires.

Boolean Attribute

The defer attribute is a Boolean attribute. Its presence represents true, and its absence represents false.

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

Writing defer="false" does not turn the attribute off. Because the attribute is present, it is still considered true.

<!-- The defer attribute is still enabled -->
<script src="script.js" defer="false"></script>

To omit deferred behavior, remove the defer attribute.

Elements That Use the defer Attribute

The defer attribute applies to the <script> element. Its deferred execution behavior is relevant to external classic scripts.

How defer Works

Without async, defer, or type="module", an external classic script encountered during HTML parsing normally causes the browser to pause parsing while the script is fetched and executed.

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

Adding defer allows the browser to fetch the external script while HTML parsing continues. The script waits to execute until the document has been parsed.

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

This is useful for scripts that need to work with HTML elements appearing later in the document.

Script Execution Order

Multiple deferred classic scripts execute in document order after parsing has finished, even when their files finish downloading at different times.

<script src="first.js" defer></script>
<script src="second.js" defer></script>
<script src="third.js" defer></script>

In this example, first.js executes before second.js, and second.js executes before third.js. Deferred scripts also finish executing before the DOMContentLoaded event fires.

defer and async

The defer and async attributes both allow an external classic script to be fetched without blocking HTML parsing during the fetch, but they differ in when the script executes.

Use defer when an external classic script needs the document to be parsed first or when multiple scripts need to maintain their document order.

defer and Module Scripts

The defer attribute has no effect on module scripts. Module scripts are deferred by default unless their behavior is changed with async.

<script type="module" src="module.js"></script>

There is therefore no need to add defer to a normal type="module" script.

Common Mistakes

Do not use defer="false" to disable deferred execution. The defer attribute is Boolean, so its presence represents true.

Do not expect defer to affect a classic inline script without a src attribute. The attribute has no effect on an inline classic script.

Do not add defer to a module script expecting it to change its normal execution behavior. Module scripts are already deferred by default, and the defer attribute has no effect on them.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The defer attribute on HTML <script> elements is widely supported in current core browsers. Support for similarly named behavior in SVG should not be assumed to match HTML.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the defer Attribute

The example loads an external JavaScript file with the defer attribute. The script can access the paragraph in the document because it does not execute until after the HTML has been parsed.

Summary

The HTML defer attribute is a Boolean attribute for external classic scripts. It allows the browser to fetch a script while HTML parsing continues and delays execution until the document has finished parsing. Deferred classic scripts execute in document order and before DOMContentLoaded fires. The attribute has no effect on inline classic scripts or module scripts.