Difference between async and defer in script tags?
Understanding async vs defer in <script> tags
When including JavaScript in HTML using the <script> tag, the async and defer attributes control how and when the script is loaded and executed relative to HTML parsing.
Key Differences Between async and defer
async:
- The script is downloaded asynchronously while the HTML is being parsed.
- Execution happens as soon as the script is ready, potentially before HTML parsing is complete.
- Scripts with async do not guarantee execution order if multiple async scripts are included.
- Ideal for independent scripts that do not rely on the DOM or other scripts.
defer:
- The script is also downloaded asynchronously, but execution is deferred until the HTML parsing is complete.
- Maintains the order of execution if multiple defer scripts are included.
- Ideal for scripts that depend on the fully parsed DOM.
Example Usage
In short: Use async for independent scripts where execution order doesn’t matter, and defer for scripts that need the DOM fully loaded and/or must execute in a specific order.