# Async vs Defer Script Attributes: How They Affect HTML Parsing and Execution

> Understand how async and defer script attributes impact HTML parsing and execution. Learn to optimize your web pages for faster loading and better performance.

- Repository: [H5BP/Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions)
- Tags: interview-questions
- Published: 2026-03-05

---

**The `async` attribute downloads scripts in parallel with HTML parsing and executes them immediately when ready, potentially before parsing completes, while `defer` also downloads in parallel but delays execution until after the entire document is parsed and before the `DOMContentLoaded` event fires.**

Understanding the distinction between `async` and `defer` script attributes is essential for optimizing web page performance and controlling JavaScript execution timing. These attributes, documented in the `h5bp/Front-end-Developer-Interview-Questions` repository within [`src/questions/html-questions.md`](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/src/questions/html-questions.md), determine how browsers handle external script resources relative to HTML document parsing. Both attributes modify the default blocking behavior of script tags, but they differ significantly in execution timing and order guarantees.

## Default Script Loading Behavior

Without any attributes, a standard `<script src="...">` tag forces the browser to halt HTML parsing until the script is downloaded, parsed, and executed. This synchronous blocking can delay page rendering and create performance bottlenecks, particularly for large scripts or slow network connections.

## The Async Attribute

The `async` attribute enables parallel downloading of script resources while the browser continues parsing the HTML document.

**Download and execution timing**: Execution begins **as soon as the download completes**, regardless of whether the HTML parser has finished processing the remaining document. This means `async` scripts can run at any point during parsing, potentially interrupting the construction of the DOM.

**Execution order**: Multiple `async` scripts **do not guarantee execution order**—each runs immediately upon availability. This behavior makes the attribute suitable for independent, non-dependent resources such as analytics trackers or advertisement scripts.

## The Defer Attribute

The `defer` attribute similarly allows parallel downloading, but delays execution until the HTML document is fully parsed.

**Execution timing**: Deferred scripts run **after the entire HTML document has been parsed** and just before the `DOMContentLoaded` event fires. This ensures the complete DOM is available before script execution begins.

**Order preservation**: Unlike `async`, multiple `defer` scripts **maintain their execution order** according to their position in the markup. This characteristic makes `defer` ideal for scripts that depend on each other or require access to the complete DOM structure.

## Critical Differences Between Async and Defer

Both attributes only function with **external scripts** that include a `src` attribute—inline scripts ignore these attributes entirely. The key distinctions include:

- **Blocking behavior**: `async` pauses HTML parsing only briefly during script execution, while `defer` allows uninterrupted parsing throughout the entire document loading process.

- **Execution sequence**: `async` executes immediately upon download completion without guaranteeing order; `defer` waits for parsing to finish and preserves markup sequence.

- **Use cases**: `async` is appropriate for standalone utilities like analytics, whereas `defer` supports dependent scripts that rely on DOM readiness.

## Practical Implementation Examples

According to the source code analysis in [`src/questions/html-questions.md`](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/src/questions/html-questions.md) from the h5bp repository, here is how to implement these attributes:

```html
<!-- Async: runs immediately when loaded, order not guaranteed -->
<script src="analytics.js" async></script>

<!-- Defer: runs after DOM is ready, preserves execution order -->
<script src="app.js" defer></script>
<script src="utils.js" defer></script>

```

In this example, [`analytics.js`](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/analytics.js) may execute at any time during or after parsing, while [`app.js`](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/app.js) and [`utils.js`](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/utils.js) will always execute after the DOM is fully constructed, with [`app.js`](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/app.js) running before [`utils.js`](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/utils.js) due to their markup order.

## Summary

- Both `async` and `defer` enable parallel script downloading without blocking HTML parsing during the download phase.

- `async` executes scripts immediately upon download completion without guaranteeing execution order.

- `defer` delays execution until after HTML parsing completes and maintains the original markup order for multiple scripts.

- Neither attribute affects inline scripts—only external scripts with `src` attributes respond to these modifiers.

- Choose `async` for independent resources like tracking codes; use `defer` for scripts requiring DOM readiness or specific execution sequences.

## Frequently Asked Questions

### Do async and defer attributes work with inline JavaScript?

No, both `async` and `defer` attributes are ignored for inline scripts lacking a `src` attribute. According to the `h5bp/Front-end-Developer-Interview-Questions` source, these attributes are only effective for external scripts.

### Which attribute maintains script execution order?

The `defer` attribute preserves execution order among multiple scripts, running them sequentially in the order they appear in the markup. In contrast, `async` scripts execute as soon as they load without any guarantee of sequence.

### When exactly do deferred scripts execute relative to DOMContentLoaded?

Deferred scripts execute **after the entire HTML document has been parsed** but just before the `DOMContentLoaded` event fires. This timing ensures the DOM is fully constructed while allowing scripts to initialize before event listeners trigger.

### What happens if a script tag has neither async nor defer attributes?

Without either attribute, the script **blocks** HTML parsing until it is fetched, parsed, and executed. This synchronous behavior can delay page rendering and should be avoided for performance-critical applications.