HTML defer Attribute
The HTML defer attribute specifies that a script is executed when a page has finished the parsing. Read and find out how to use it on the <script> element.
The HTML defer attribute is a boolean attribute on the <script> element that tells the browser to download the script in parallel with HTML parsing, but to wait and execute it only after the whole page has finished parsing — right before the DOMContentLoaded event fires.
It works only with external scripts: it has effect only when the src attribute is present and is ignored on inline scripts (a <script> whose JavaScript sits between the tags).
Why the defer attribute exists
A plain <script src="..."> is render-blocking. When the parser reaches it, it stops building the page, downloads the file, runs it, and only then continues. If the script is in the <head>, the user stares at a blank page until it loads.
The classic workaround was to put <script> tags at the very end of the <body>, so the HTML parses first. defer makes that hack unnecessary: you can keep your scripts in the <head> (good for readability and so the browser discovers and downloads them early), while the script still runs only after the DOM is fully built. Because the DOM is guaranteed to be ready, deferred scripts can safely query elements without wrapping everything in a DOMContentLoaded listener.
defer vs async
Both defer and async let the browser download the script in the background without blocking HTML parsing. The difference is when and in what order the scripts run:
| Behavior | defer | async |
|---|---|---|
| Blocks HTML parsing while downloading | No | No |
| When the script runs | After parsing completes, just before DOMContentLoaded | As soon as it finishes downloading (may interrupt parsing) |
| Execution order with other scripts | Preserved — runs in document order | Not guaranteed — first to download runs first |
| DOM guaranteed ready | Yes | No |
Use defer when scripts depend on the DOM or on each other (the order matters). Use async for independent, self-contained scripts such as analytics or ad tags, where order does not matter and you want each to run the moment it arrives.
If neither async nor defer is present, the script is fetched and executed immediately, blocking the parser at that point.
In HTML 4.01 the behavior of defer was implementation-dependent, whereas HTML5 standardized it. In XHTML, defer must be written as <script defer="defer"> because attribute minimization is forbidden.
Syntax
<script src="example.js" defer></script>Example of the HTML defer attribute
The script below is placed in the <head>, yet because it is deferred it runs only after the paragraph exists in the DOM — so document.getElementById finds it:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
defer
></script>
<noscript>Sorry, your browser doesn't support JavaScript!</noscript>
</head>
<body>
<h1>Example</h1>
<p id="demo">Waiting for the deferred script...</p>
<script defer>
// This deferred external script (jQuery) is already loaded,
// and the DOM is fully parsed, so the line below works.
document.getElementById("demo").textContent =
"jQuery version " + jQuery.fn.jquery + " ran after parsing.";
</script>
</body>
</html>Note:
deferon the inline<script>above is ignored — inline scripts always run in place. It still works here only because it is the last element and the deferred external script has already finished. To guarantee that a deferred external library is loaded before your own code, move your code into its own externaldeferfile too, since deferred scripts execute in document order.