Practice Questions

What is the role of deferred scripts in JavaScript?

MediumIntermediateJavascript

By FrontendAtlas Team · Updated Jan 30, 2026

Preparing for interviews?

Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.

Explore interview tracks Browse company questions Open JavaScript prep path

Quick Answer

Deferred scripts are JavaScript files that load in parallel with HTML parsing but execute only after the document has been fully parsed. They help improve page load performance by preventing render-blocking behavior.

Answer

The Core Idea

Normally, when the browser encounters a <script> tag during HTML parsing, it stops rendering, fetches the script, and executes it immediately before continuing. This behavior blocks the page rendering process and slows down the perceived load time.

Deferred scripts solve this problem by allowing the browser to continue parsing HTML while downloading the script in the background — executing it only after the entire document is parsed.

HTML

<!-- Regular script (blocks rendering) -->
<script src="main.js"></script>

<!-- Deferred script (non-blocking) -->
<script src="main.js" defer></script>

Attribute	When It Executes	HTML Parsing	Use Case
No Attribute	Immediately, as soon as it's downloaded.	Blocks HTML parsing until execution finishes.	Small scripts or inline JS that must run early.
defer	After HTML parsing completes (in order).	Does not block HTML parsing.	Scripts that depend on the DOM being ready.
async	As soon as it's downloaded (not ordered).	Does not block HTML parsing, but order is unpredictable.	Independent scripts like analytics or ads.

Comparison of normal, async, and deferred script loading.

How Deferred Scripts Work Internally

The browser encounters a <script defer> tag while parsing HTML.
It starts downloading the script in parallel with HTML parsing.
The script is queued for execution after the document has been fully parsed.
Deferred scripts preserve their order — if multiple scripts are marked as defer, they will execute sequentially in the order they appear in the document.

This makes defer especially useful for including multiple dependent scripts without blocking page rendering.

HTML

<!-- Both scripts load in parallel but run after HTML parsing -->
<script src="lib.js" defer></script>
<script src="app.js" defer></script>
<!-- Guaranteed: lib.js runs before app.js -->

Why Deferred Scripts Are Important

They improve performance by eliminating render-blocking delays.
The DOM is fully available when they execute, meaning no need to wait for DOMContentLoaded manually.
Execution order is preserved, unlike with async.
They are ideal for application scripts that depend on the DOM or other scripts.

Deferred scripts effectively allow your HTML, CSS, and JS to load concurrently without competing for render time.

JAVASCRIPT

// main.js (loaded with defer)
console.log(document.readyState); // 'interactive' or 'complete'

window.addEventListener('DOMContentLoaded', () => {
  console.log('DOM fully parsed before script ran!');
});

Key Considerations

The defer attribute only works for external scripts (those with src attributes).
Inline scripts cannot use defer.
In old browsers (pre-HTML5), support for defer was inconsistent, but it’s now standard in all major browsers.
Combining defer and async on the same script is invalid — only one behavior applies.

Still so complicated?

Think of defer like scheduling a meeting after you've finished your main work — the script is downloaded while you’re busy, but it only executes once your workspace (HTML) is ready. It keeps everything efficient and orderly.

Summary

defer allows scripts to load without blocking HTML parsing.
Deferred scripts execute only after the DOM is fully parsed.
Execution order is maintained as per their order in the document.
Perfect for DOM-dependent scripts or modular JavaScript bundles.
Leads to faster, smoother user experiences and better performance scores (like in Lighthouse).