Introduction

Yes, a deferred script can execute before an async script. The deciding factor is not the order of the attributes alone, but when each script finishes downloading and whether HTML parsing has already completed.

What defer Means

A script with defer is downloaded in parallel with HTML parsing, but execution is postponed until parsing is complete. Deferred scripts also preserve document order relative to other deferred scripts.

Example:

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

Even if app.js downloads first, vendor.js still executes before it because deferred scripts run in document order after parsing finishes.

What async Means

A script with async is also downloaded in parallel, but it executes as soon as the download is ready. It does not wait for HTML parsing to finish, and it does not preserve order with other async scripts.

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

If analytics.js finishes early, it can run in the middle of parsing. If it finishes late, it can run after the document is parsed and after deferred scripts have already executed.

So Can defer Beat async

Yes. Consider this page:

<script async src="/js/large-analytics.js"></script>
<script defer src="/js/small-app.js"></script>

Possible timeline:

1. Browser starts parsing HTML
2. Both files start downloading
3. small-app.js downloads quickly
4. HTML parsing finishes
5. Browser executes deferred scripts
6. large-analytics.js finishes later and executes after that

In this sequence, the deferred script runs first.

The reverse can also happen:

1. Browser starts parsing HTML
2. large-analytics.js is actually cached and downloads immediately
3. Browser executes the async script as soon as it is available
4. Parsing continues
5. Deferred script waits until parsing is complete

In that case, the async script runs first.

The Correct Mental Model

Do not think of async as "always before" and defer as "always after." Think of them like this:

• 'async: execute as soon as ready'
• 'defer: execute after parsing, in document order'

That is why async is good for isolated scripts such as analytics, while defer is good for application code that depends on DOM structure or on other deferred scripts.

Important Limits

These attributes matter only for external scripts with src. Inline scripts do not meaningfully use defer or async in the same way.

Also, if an async script depends on a deferred script, the page is brittle by definition. The browser is allowed to execute them in either relative order depending on network timing.

A Safe Example

Use defer for ordered app files:

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

Use async for independent telemetry:

<script async src="https://example-cdn.test/analytics.js"></script>

This keeps dependency-sensitive code deterministic while letting noncritical tracking load opportunistically.

Common Pitfalls

• Assuming async preserves script order. It does not.
• Loading dependent application bundles with async and then debugging random race conditions.
• Assuming a deferred script must always run after an async script. Network timing can make the opposite happen.
• Forgetting that inline scripts do not benefit from defer the way external scripts do.

Summary

• A deferred script can execute before an async script if parsing finishes before the async script is ready.
• 'defer waits for parsing and preserves order among deferred scripts.'
• 'async runs as soon as it finishes downloading and does not preserve order.'
• Use defer for dependent app code and async for independent scripts.
• The execution race between async and defer is determined by timing, not by a simple fixed priority.