Networking and resource loading
From a URL to a page
Follow the browser from an entered URL through address resolution, connection setup, an HTTP exchange, and the first bytes of HTML.
8 minute lesson
Entering a URL starts several connected systems.
The browser parses the URL, applies navigation rules, and checks whether a cached response can be reused. If it needs the network, it resolves the hostname, establishes a connection, negotiates TLS for HTTPS, and sends an HTTP request.
The server returns a status, headers, and response bytes. The browser does not normally wait for the final HTML byte. It can decode and parse the stream while more data arrives.
The parser builds the DOM and discovers stylesheets, scripts, images, and fonts. CSS contributes to calculated styles. The browser then determines layout, records paint instructions, rasterizes pixels, and composites the final frame.
JavaScript can pause parsing, change the DOM, or schedule later work. This is why loading, parsing, rendering, and script execution overlap rather than forming one simple queue.
Open DevTools, select Network, and reload a page. Find the document request, then inspect its Timing and Initiator information. The first image on screen may begin loading before the document request has finished downloading.
Exercise: write down the chain from URL to first pixels. Mark which steps can use cached data and which steps can overlap.
Lesson completed