When to use "async" and when "defer" in script tag?

The async and defer attributes in the <script> tag are used to optimize script loading and execution in HTML. Both attributes allow scripts to load without blocking the rendering of the page, but they have key differences in how they handle execution.

1. async Attribute

• How it Works:

  • The script is loaded asynchronously, meaning it downloads in parallel with other resources (like CSS or images).
  • The script executes as soon as it is downloaded, which may happen before, during, or after the HTML parsing is complete.

• Best for:

  • Independent scripts that do not rely on or interact with other scripts.
  • Examples:
  • Analytics scripts (e.g., Google Analytics).
  • Advertising or tracking scripts.
  • These scripts do not depend on the HTML or other scripts to run correctly.

• Example:
  
  

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

• Use Case: When script execution timing does not need to follow the document parsing order or depend on other scripts.

2. defer Attribute

• How it Works:

  • The script is downloaded in parallel with other resources, just like async.
  • The script is executed only after the entire HTML document has been parsed.

• Best for:

  • Scripts that depend on the complete DOM structure being available.
  • Scripts that interact with or depend on other scripts in a specific order.
  • Examples:
  • Frameworks or libraries (e.g., jQuery, Angular).
  • Inline scripts that manipulate DOM elements.

• Example:
  
  

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

• Use Case: When the script should execute only after the HTML document is fully parsed and you need to maintain execution order among multiple scripts.

Key Differences Between async and defer

Summary

• Use async for:

  • Independent scripts that don’t depend on other scripts or the DOM.
  • Performance-critical tasks like analytics or advertising.

• Use defer for:

  • Scripts that rely on the DOM being fully loaded.
  • Multiple scripts that must execute in a specific order.