Skip to main content

Script Handling

Normal <script>​

<script src="normal.js"></script>

The parser pauses:

  • Fetches and executes normal.js
  • Only then continues parsing HTML below

This is why <script> tags often go at the end of <body> — to avoid blocking HTML parsing.

<script defer>​

<script src="defer.js" defer></script>
  • Parser continues parsing HTML (non-blocking)
  • Script is executed after HTML parsing is complete

<script async>​

<script src="main.js" async></script>
  • Script is downloaded in parallel
  • Executes as soon as it’s ready
  • Might execute before or after parsing finishes

Multiple Script Handling​

When you include multiple scripts using <script> tags without type="module", all of them run in the same global scope (the window object in browsers).

<script src="./js/src/declare.js"></script>
<script src="./js/src/index.js"></script>

Scripts are executed in the order they appear in the HTML (unless using async or defer).

Multiple file share data which are in the same global scope, but the run independently.

When Scripts Do NOT Share Data

If you use the module system (i.e., <script type="module">), each file runs in its own module scope, not the global scope.

<script type="module" src="./js/src/declare.js"></script>
<script type="module" src="./js/src/index.js"></script>
  • When we want to use import/export we have to use type="module"