The defer attribute is a boolean attribute on <script src="..."> elements. It tells the browser to download the script in parallel with HTML parsing, then execute it after the document has been fully parsed—without blocking page rendering. Deferred scripts run in document order, which makes defer ideal for app logic that depends on the DOM.
Parse HTML first.
Requires src URL.
Presence = defer.
Scripts run in sequence.
Compare loading.
script.defer = true.
deferWithout defer or async, a classic script in the <head> can block HTML parsing while it downloads and runs. The defer attribute improves page load performance by letting parsing continue while the script file downloads in the background. Execution is postponed until the HTML document is fully parsed.
Because deferred scripts run in the order they appear in the document, you can safely load a library first and an app script second. Deferred scripts typically run before the DOMContentLoaded event fires.
defer applies to <script src="..."> only. It has no effect on inline scripts without a src attribute.
Add defer to an external <script> element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script defer src="app.js"></script>
</head>
<body>
<!-- HTML content -->
</body>
</html>defer alone or as defer="".src attribute pointing to an external JavaScript file.<script> elements.defer and async on the same tag (async wins).The defer attribute is a boolean attribute. It has no meaningful string values:
async is used).<!-- Deferred external script -->
<script defer src="analytics.js"></script>
<!-- Equivalent boolean form -->
<script defer="" src="analytics.js"></script>| Item | Details | Notes |
|---|---|---|
| Element | <script src="..."> | External scripts only |
| Type | Boolean attribute | Presence = deferred |
| Download | Parallel with parsing | Non-blocking fetch |
| Execution | After HTML parsed | Before DOMContentLoaded |
| Order | Document order preserved | Unlike async |
| JS property | scriptElement.defer | true or false |
| Element | Supported? | Notes |
|---|---|---|
<script src="..."> | Yes | Primary and standard use |
<script> inline (no src) | No effect | defer is ignored without src |
<link>, <img> | No | Not valid on these elements |
| Module scripts | Deferred by default | type="module" behaves like defer |
| Behavior | defer | async |
|---|---|---|
| Download | Parallel with parsing | Parallel with parsing |
| When it runs | After HTML is fully parsed | As soon as download completes |
| Execution order | Preserved (document order) | Not guaranteed |
| Best for | App scripts that need the DOM | Independent widgets, analytics |
| Both on same tag | Avoid — async takes precedence; defer is ignored | |
<!-- Independent analytics: async -->
<script async src="analytics.js"></script>
<!-- App logic that needs DOM and order: defer -->
<script defer src="utils.js"></script>
<script defer src="app.js"></script>Basic deferred scripts, dynamic JavaScript loading, and preserved execution order.
A script in the <head> with defer does not block HTML parsing:
<head>
<script defer src="app.js"></script>
</head>
<body>
<h1>Page content</h1>
</body>The browser downloads app.js while continuing to parse the body. Once parsing finishes, the script executes and can safely access DOM elements.
When creating scripts dynamically, set the defer property before inserting the element:
<script>
var scriptElement = document.createElement("script");
scriptElement.src = "app.js";
scriptElement.defer = true;
document.head.appendChild(scriptElement);
</script>The dynamically created script inherits deferred behavior when defer is set to true before the element is appended to the document.
Multiple deferred scripts run in the order they appear in the HTML:
<script defer src="utils.js"></script>
<script defer src="app.js"></script>Even if app.js finishes downloading first, the browser waits until parsing completes and runs utils.js before app.js.
Starts downloading the file in parallel.
Page content renders without waiting for the script.
Deferred scripts run in document order.
Scripts run after HTML is ready without blocking rendering.
The defer attribute is supported in all modern browsers for external scripts. It has been widely available since IE 10.
Chrome, Firefox, Safari, and Edge all support defer on external <script> tags.
Bottom line: Use defer confidently on external scripts in modern projects.
The defer attribute is a valuable tool for optimizing web page loading performance. It lets external scripts download in parallel while HTML parsing continues, then executes them in order after the document is ready.
Use defer for application logic that depends on the DOM. Use async for standalone scripts that do not depend on order or DOM readiness. Never combine both on the same tag.
deferBookmark these before your next script tag.
Requires src URL.
ScopePresence = defer.
SyntaxRuns when DOM ready.
TimingUnlike async.
BehaviorPick the right one.
Comparedefer only applies to <script> elements with a src attribute.async runs when ready (order not guaranteed). defer waits until HTML is parsed and preserves script order.async takes precedence and defer is ignored.scriptElement.defer = true on dynamically created script elements before appending them.Practice the defer attribute with external scripts and preserved execution order in the Try It editor.
3 people found this page helpful