How Browsers Execute JavaScript: Understanding defer, async, and inline

When you embed JavaScript in HTML, the location and timing of execution will directly affect the page load performance, user experience, and execution order of the code.

Three common methods to include JavaScript are:

• Inline script
• Script with defer
• Script with async

Understanding the differences between these methods is a key skill for any frontend developer.

1. What is Inline Script?

An inline script is a JavaScript code that is written directly within the HTML file, typically inside a <script> tag without the src attribute.

Example:

<script>
  console.log("Hello from inline script");
</script>

Characteristics:

• Executes immediately when the browser parser encounters it.
• Blocks further HTML rendering until the script finishes executing.
• Cannot be cached, as it's directly in the HTML.

When should you use it?

• For small, quick scripts (under 1-2ms).
• For configuration variables that need to be available early (like window.__ENV__ = {...}).
• For tracking scripts that must execute first (like Google Tag Manager snippet).

2. What is a defer Script?

Example:

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

Characteristics:

• Loads in parallel with the HTML parsing.
• Executes after the HTML has been fully parsed.
• Maintains the order of deferred scripts.

In this case, the browser will:

1. Start parsing the HTML.
2. Encounter the <script defer> tag, loading the JS file in parallel.
3. Continue parsing the rest of the HTML.
4. After the HTML parsing is complete, execute the deferred scripts in the order they were encountered.

The main advantage of defer is that it does not block rendering and preserves execution order.

3. What is an async Script?

Example:

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

Characteristics:

• Loads in parallel with HTML, executes as soon as it's loaded, does not wait for the HTML parser to finish.
• Does not maintain order between async scripts.

In this case:

• If analytics.js finishes loading before ads.js, it will execute first, regardless of the order you declared them in.
• While an async script is executing, the HTML parsing pauses, which may cause layout jank.

Use async for independent scripts that don’t rely on the DOM or other scripts.

Comparison of inline, defer, and async

When Should You Use Which?

Bonus: What Does type="module" Do?

Starting from HTML5+, you can use:

<script type="module" src="/app.js"></script>

This implicitly means defer, so:

• Does not block HTML parsing.
• Executes after HTML parsing completes.
• Supports import/export.

type="module" is ideal when using ES Modules and modern bundlers like Vite, Webpack, or Next.js.

Conclusion

Understanding defer, async, and inline allows you to:

• Control the order of script execution.
• Optimize page load performance.
• Avoid bugs caused by scripts executing before the DOM is ready.

Choose the appropriate method for embedding scripts based on the use case to ensure the best possible user experience.