Questions
3 of 6
1How does loading="lazy" work for images?
2What is the purpose of <link rel="preload">?
3Difference between async and defer in script tags?
4What is the role of <noscript>?
5What is the Critical Rendering Path? How does HTML impact it?
6How does HTML contribute to web performance?
HTMLHTML
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
03 / 06

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
  1. 1

    async:

  2. 2
    • The script is downloaded asynchronously while the HTML is being parsed.
  3. 3
    • Execution happens as soon as the script is ready, potentially before HTML parsing is complete.
  4. 4
    • Scripts with async do not guarantee execution order if multiple async scripts are included.
  5. 5
    • Ideal for independent scripts that do not rely on the DOM or other scripts.
  6. 6

    defer:

  7. 7
    • The script is also downloaded asynchronously, but execution is deferred until the HTML parsing is complete.
  8. 8
    • Maintains the order of execution if multiple defer scripts are included.
  9. 9
    • 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.