Page 1

Page loads
│
├── index.html  → downloaded immediately (you requested the page)
├── main.js     → downloaded immediately (script tag in HTML)
└── worker.js   → NOT downloaded yet

Then when you click "Start Worker":

worker = new Worker('./worker.js');  // ← THIS line triggers the network request

Only at this moment does the browser go fetch worker.js and spin up the second thread.

Why This Makes Sense

The browser has no reason to download worker.js upfront — it doesn't know if you'll ever click that button. It's just a JS file sitting on the server doing nothing until your code explicitly asks for it.

Same logic applies to:

// none of these files are fetched until the code runs
import('./some-module.js')          // dynamic import
new Worker('./worker.js')           // web worker
fetch('/api/get-posts')             // API call
var img = new Image(); img.src = '...'  // dynamic image

All of these are on-demand — the browser only goes to the network when that line of code executes.

What You'll See After Clicking

Go click "Start Worker" now and check the Network tab — you'll see worker.js appear with:

Field	Value
Type	`script`
Initiator	`main.js` (the line with `new Worker(...)`)
Status	`200` (first time) or `304` (if cached)

That network request is the moment the second thread is born.