HTML · Scripts & Styles

Script Placement

Where to put scripts for best performance

Find videos you like?

Save to resource drawer for future reference!

Where to Place Scripts?

Location affects page loading speed

Script placement is crucial for performance. Scripts block HTML parsing by default, so placing them correctly ensures your page loads fast and works properly.

Best Practice

Place scripts at the end of <body> or use defer in <head>. This prevents blocking page rendering.

Placement Options

Three common locations

Script Locations

Visualizing where scripts can go

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script Placement Options</title>
  </head>
  <body>
    <div class="placements">
      <div class="place-card head">
        <h3>&lt;head&gt;</h3>
        <p>With defer/async</p>
        <code>Non-blocking</code>
      </div>
      <div class="arrow">→</div>
      <div class="place-card body-start">
        <h3>Body Start</h3>
        <p>Rare use case</p>
        <code>Blocks rendering</code>
      </div>
      <div class="arrow">→</div>
      <div class="place-card body-end">
        <h3>Body End ✓</h3>
        <p>Best practice</p>
        <code>HTML ready</code>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Script in <head>

Use with defer or async

Head Placement

Scripts in head with defer attribute

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script in Head</title>
    <!-- Script in head with defer -->
  </head>
  <body>
    <h1>Script Placement</h1>
    <p id="msg">Loading...</p>
  </body>
</html>

Live Preview

Loading preview...

Important

Without defer or async, scripts in <head> block HTML parsing. Always use defer for best results.

Script at End of <body>

Traditional best practice

Body End Placement

Scripts after all HTML content

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script at Body End</title>
  </head>
  <body>
    <h1>Best Practice</h1>
    <p id="result">Waiting...</p>
    <!-- Script at end of body -->
  </body>
</html>

Live Preview

Loading preview...

✓ Advantage: HTML is fully loaded before script runs, no need for defer or DOMContentLoaded.

Async vs Defer

Understanding the difference

Async vs Defer Comparison

Different loading strategies

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Async vs Defer</title>
    <!-- Async: download in parallel, execute ASAP -->
    <!-- Defer: download in parallel, execute after HTML -->
  </head>
  <body>
    <h1>Async vs Defer</h1>
    <p>Check console for execution order</p>
    <div class="info">
      <strong>Async:</strong> Executes immediately when downloaded<br>
      <strong>Defer:</strong> Waits until HTML is fully parsed
    </div>
  </body>
</html>

Live Preview

Loading preview...

Quick Reference

Choose the right approach

End of <body>

When: Simple projects, guaranteed HTML ready

✓ No attributes needed

⚠ Script discovery delayed

<head> with defer

When: Modern best practice

✓ Early download, ordered execution

⚠ Requires defer attribute

<head> with async

When: Independent scripts (analytics)

✓ Fastest execution

⚠ Order not guaranteed

type="module"

When: ES6 modules

✓ Auto defer, strict mode

⚠ Older browsers need polyfill

Previous Topic

Script Element

Next Topic

Style Element

Ask a Question

Have a question about Script Placement? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Scripts & Styles

Script Placement

Where to put scripts for best performance

Find videos you like?

Save to resource drawer for future reference!

Where to Place Scripts?

Location affects page loading speed

Script placement is crucial for performance. Scripts block HTML parsing by default, so placing them correctly ensures your page loads fast and works properly.

Best Practice

Place scripts at the end of <body> or use defer in <head>. This prevents blocking page rendering.

Placement Options

Three common locations

Script Locations

Visualizing where scripts can go

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script Placement Options</title>
  </head>
  <body>
    <div class="placements">
      <div class="place-card head">
        <h3>&lt;head&gt;</h3>
        <p>With defer/async</p>
        <code>Non-blocking</code>
      </div>
      <div class="arrow">→</div>
      <div class="place-card body-start">
        <h3>Body Start</h3>
        <p>Rare use case</p>
        <code>Blocks rendering</code>
      </div>
      <div class="arrow">→</div>
      <div class="place-card body-end">
        <h3>Body End ✓</h3>
        <p>Best practice</p>
        <code>HTML ready</code>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Script in <head>

Use with defer or async

Head Placement

Scripts in head with defer attribute

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script in Head</title>
    <!-- Script in head with defer -->
  </head>
  <body>
    <h1>Script Placement</h1>
    <p id="msg">Loading...</p>
  </body>
</html>

Live Preview

Loading preview...

Important

Without defer or async, scripts in <head> block HTML parsing. Always use defer for best results.

Script at End of <body>

Traditional best practice

Body End Placement

Scripts after all HTML content

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script at Body End</title>
  </head>
  <body>
    <h1>Best Practice</h1>
    <p id="result">Waiting...</p>
    <!-- Script at end of body -->
  </body>
</html>

Live Preview

Loading preview...

✓ Advantage: HTML is fully loaded before script runs, no need for defer or DOMContentLoaded.

Async vs Defer

Understanding the difference

Async vs Defer Comparison

Different loading strategies

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Async vs Defer</title>
    <!-- Async: download in parallel, execute ASAP -->
    <!-- Defer: download in parallel, execute after HTML -->
  </head>
  <body>
    <h1>Async vs Defer</h1>
    <p>Check console for execution order</p>
    <div class="info">
      <strong>Async:</strong> Executes immediately when downloaded<br>
      <strong>Defer:</strong> Waits until HTML is fully parsed
    </div>
  </body>
</html>

Live Preview

Loading preview...

Quick Reference

Choose the right approach

End of <body>

When: Simple projects, guaranteed HTML ready

✓ No attributes needed

⚠ Script discovery delayed

<head> with defer

When: Modern best practice

✓ Early download, ordered execution

⚠ Requires defer attribute

<head> with async

When: Independent scripts (analytics)

✓ Fastest execution

⚠ Order not guaranteed

type="module"

When: ES6 modules

✓ Auto defer, strict mode

⚠ Older browsers need polyfill

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Script Element

Style Element

HTML Code Editor

Building Your Learning Module...

Script Placement

Best Practice

Script Locations

Head Placement

Important

Body End Placement

Async vs Defer Comparison

End of <body>

<head> with defer

<head> with async

type="module"

Script Element

Style Element

HTML Code Editor

Script Placement

Best Practice

Script Locations

Head Placement

Important

Body End Placement

Async vs Defer Comparison

End of <body>

<head> with defer

<head> with async

type="module"