What Really Happens When You Type a URL? From DNS to Rendering

URL Parsing and Encoding

The browser first parses the URL and performs percent‑encoding because the URL specification only allows a limited set of characters; otherwise characters like = in query parameters could cause ambiguity.

Why does a URL need encoding?

Only letters, digits and a few symbols are allowed; others must be escaped.

UTF‑8 is the standard encoding for URLs, and encodeURIComponent is used for parameter encoding while encodeURI is for the whole URL.

DNS Resolution and Front‑End DNS Optimization

When a user types https://www.baidu.com, the OS checks the hosts file, then the local DNS cache, then the configured DNS resolver, and finally the root DNS servers in a non‑forwarding mode to obtain the IP address.

Front‑end developers can hint browsers to pre‑fetch DNS using the following tags:

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

TCP Three‑Way Handshake

First handshake: client sends a SYN packet with a random sequence number.

Second handshake: server replies with SYN‑ACK containing its own sequence number and the client’s sequence+1.

Third handshake: client acknowledges with ACK, establishing the connection.

Why can’t a two‑handshake protocol work?

Without the third step the server cannot be sure the client received the acknowledgment, leaving the connection vulnerable to attacks.

From Network Card to Server (OSI Model)

Data leaves the LAN, reaches the switch (ARP may be used to resolve MAC addresses).

The switch forwards the frame to the router, which performs IP routing (often with NAT).

The router forwards the IP packet to the destination server.

On the server, the transport layer (TCP) delivers the segment to the appropriate service based on the port.

The application layer (HTTP/HTTPS) processes the request and generates a response.

Caching Mechanisms

When a resource is first fetched, the browser stores the response headers (especially Date) for later cache validation.

Strong cache : Controlled by Cache‑Control (e.g., max‑age) or Expires. If still fresh, the browser serves the resource from local storage without a network request.

Negotiated cache : The browser sends If‑None‑Match (ETag) and If‑Modified‑Since headers. The server returns 304 Not Modified if the resource is unchanged, otherwise a fresh 200 with a new ETag.

Heuristic cache : When no explicit freshness information is present, browsers estimate freshness as 10% of the time difference between Date and Last‑Modified.

// Approximate freshness
response_is_fresh = max(0, (Date - Last-Modified)) % 10

Cache lookup order:

1. Check memory cache; if found, use it.
2. If not in memory, check disk cache; if found, use it.
3. If not on disk, issue a network request.
4. Store the fetched resource in both memory and disk caches.

HTML Parsing and Rendering Pipeline

Build DOM tree from HTML.

Build CSSOM tree from stylesheets.

Execute JavaScript.

Construct render tree by combining DOM and CSSOM.

Layout: compute geometric positions for each node.

Painting: rasterize each node onto layers.

Page Rendering Optimisation Tips

Keep HTML hierarchy shallow (no deeper than six levels).

Place scripts at the end of the body or use async/defer.

Inline critical CSS for the first paint.

Simplify CSS selector specificity.

Cache DOM queries and avoid frequent style reads that trigger reflows.

Prefer toggling CSS classes over direct style changes.

Animate only transform/opacity on positioned elements.

Pause animations when off‑screen.

Cache frequently accessed DOM nodes.

Use DNS pre‑connect for third‑party domains.

Diagnosing Rendering Performance

Use Chrome DevTools: the Network panel to inspect request/response details and the Performance panel to analyse paint, layout, scripting, and other timing metrics.