Networking and resource loading
How the browser discovers resources
Understand how the HTML parser and preload scanner discover stylesheets, scripts, images, fonts, and other dependencies.
8 minute lesson
As HTML arrives, the parser creates nodes and discovers referenced resources.
For example, a stylesheet link, script source, and image source expose their URLs directly:
<link rel="stylesheet" href="/styles.css">
<script src="/app.js" defer></script>
<img src="/hero.webp" alt="Mountain trail">Browsers also use a speculative preload scanner. It can look ahead for obvious URLs while the main parser waits on blocking work.
The scanner cannot discover a URL that JavaScript constructs later. A hero image inserted only after a client-side render may start much later than one present in the initial HTML.
Open the Network panel and inspect the Initiator column. Parser-discovered resources should point back to the document. Script-discovered requests show a JavaScript initiator.
Keep critical resources visible in initial HTML when early discovery matters. Do not add preload hints before checking whether normal markup already discovers the resource soon enough.
Exercise: load one image from HTML and create another after DOMContentLoaded. Compare their start times and initiators.
Lesson completed