How a script loads in HTML

Where the tag sits and which attribute it carries decide when the parser stops.

<!-- Blocks the parser: only for something the page cannot render without -->
<script src="/critical.js"></script>

<!-- Runs after parsing, in document order -->
<script src="/analytics.js" defer></script>

<!-- Runs as soon as it arrives, in no particular order -->
<script src="/beacon.js" async></script>

<!-- Deferred, scoped, and able to import -->
<script type="module" src="/app.js"></script>
<script nomodule src="/legacy.js"></script>

How it works

A plain script blocks parsing while it downloads and runs.
defer runs after parsing, in order; async runs whenever it lands.
type="module" is deferred by default and gets its own scope.

The run, in numbers

Lines: 12
Characters to type: 445
Tokens: 60
Three-star pace: 80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 45 seconds.

Type this snippet

Step 1 of 3 in Scripts & embeds, step 10 of 13 in Interactive HTML.

← Previous Next →