HtmlComparisonBeginner · 3 min read

Async vs Defer in HTML: Key Differences and Usage

The async attribute loads the script asynchronously and executes it as soon as it’s ready, potentially before HTML parsing finishes. The defer attribute also loads the script asynchronously but delays execution until after the HTML document is fully parsed.

⚖️

Quick Comparison

Here is a quick side-by-side comparison of async and defer attributes for script loading in HTML.

Factor	async	defer
Loading	Script downloads asynchronously while HTML parses	Script downloads asynchronously while HTML parses
Execution timing	Executes immediately when downloaded, may interrupt HTML parsing	Executes after HTML parsing is complete
Execution order	Scripts execute as soon as ready, order not guaranteed	Scripts execute in order they appear in HTML
Use case	Good for independent scripts not relying on DOM or other scripts	Good for scripts that depend on DOM or other scripts
Browser support	Supported by all modern browsers	Supported by all modern browsers

⚖️

Key Differences

The async attribute tells the browser to download the script file while continuing to parse the HTML. Once the script is downloaded, it executes immediately, which can interrupt the HTML parsing. This means scripts with async run as soon as possible but without guaranteed order if multiple async scripts exist.

In contrast, the defer attribute also downloads the script asynchronously but waits to execute it until the entire HTML document is fully parsed. This ensures scripts run in the order they appear in the HTML and only after the DOM is ready, making it safer for scripts that rely on the page structure.

Both attributes improve page load performance by not blocking HTML parsing, but defer is better for scripts that need the DOM, while async suits independent scripts like analytics or ads.

⚖️

Code Comparison

Example using async to load a script:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Async Script Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" async></script>
</head>
<body>
  <h1>Async Script Loading</h1>
  <p>Check the console to see when the script runs.</p>
  <script>
    window.onload = () => {
      if (typeof _ !== 'undefined') {
        console.log('Lodash loaded:', _.VERSION);
      } else {
        console.log('Lodash not loaded yet');
      }
    };
  </script>
</body>
</html>

Output

Page shows heading and paragraph; console logs 'Lodash loaded: 4.17.21' if script loaded before window.onload

↔️

Defer Equivalent

Example using defer to load the same script:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Defer Script Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" defer></script>
</head>
<body>
  <h1>Defer Script Loading</h1>
  <p>Check the console to see when the script runs.</p>
  <script>
    window.onload = () => {
      if (typeof _ !== 'undefined') {
        console.log('Lodash loaded:', _.VERSION);
      } else {
        console.log('Lodash not loaded yet');
      }
    };
  </script>
</body>
</html>

Output

Page shows heading and paragraph; console logs 'Lodash loaded: 4.17.21' after HTML parsing completes

🎯

When to Use Which

Choose async when your script is independent and does not rely on the DOM or other scripts, such as analytics or ads. It loads and runs as soon as possible, improving speed but without guaranteed order.

Choose defer when your script depends on the DOM or other scripts, like UI libraries or code manipulating page elements. It ensures scripts run in order after the page is fully parsed, preventing errors.

✅

Key Takeaways

async scripts run as soon as downloaded, possibly interrupting HTML parsing.

defer scripts run after HTML parsing, preserving script order.

Use async for independent scripts, defer for DOM-dependent scripts.

Both improve page load by downloading scripts without blocking HTML parsing.

Modern browsers support both attributes reliably.