
When you enter a URL, the browser first checks whether the requested resource already exists in local cache and is still valid.
Typical steps:
This step exists to speed up repeat visits and reduce unnecessary network work.
If the resource is not served from cache, the browser parses the URL and extracts the key pieces of information needed for the request:
This gives the browser the target host, resource path, and transport method needed for the next stages.
The browser then needs an IP address for the hostname.
Typical DNS flow:
This is how a human-friendly domain name becomes a machine-usable address.
Once the IP address is known, the browser establishes a TCP connection with the server using the well-known three-way handshake:
SYNSYN + ACKACKThe purpose is to confirm that both sides are ready and to synchronize sequence numbers before data starts flowing.
If the request is HTTPS, there is also an additional TLS handshake after TCP is established.
After the connection is ready, the browser constructs an HTTP request:
GET /index.html HTTP/1.1Host, User-Agent, and AcceptPOSTThe request is then sent across the established connection.
On the server side:
This may also include redirects, cookies, permission checks, and caching behavior.
The browser first checks the HTTP status code:
2xx for success3xx for redirects4xx for client errors5xx for server errorsIt then reads metadata such as:
Depending on the Content-Type, the browser chooses a different path:
text/html: parse HTMLtext/css: parse CSSapplication/javascript: execute JavaScriptapplication/json: parse JSONapplication/octet-stream: download binary dataIf the response is HTML, the rendering pipeline begins.
The browser tokenizes the HTML and builds DOM nodes in tree form.
The browser parses stylesheets and builds a CSS object model.
The browser combines the DOM and CSSOM into a render tree that contains only visible renderable nodes plus their computed styles.
The browser calculates positions and sizes for all render objects.
The browser draws text, colors, images, borders, and other visual primitives.
Different layers are combined in the correct stacking order and sent to the screen.
If JavaScript later changes the DOM or CSS:
This is how the page stays interactive after the first render.
When the response is complete, the connection may be reused or closed depending on protocol and keep-alive behavior.
If the connection is closed, TCP uses the four-way termination flow:
FINFINFrom the user's point of view, entering a URL feels instant. Under the hood, it usually involves cache lookup, URL parsing, DNS resolution, connection setup, request dispatch, server-side processing, response parsing, rendering, and later incremental updates.
That full chain is why frontend performance is never just about one line of code.