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

Preface

When you type a URL into a browser and see a webpage, a series of steps occur behind the scenes. The overall process includes DNS resolution, TCP connection establishment, sending an HTTP request, server processing, and browser rendering, followed by connection termination.

DNS resolution: converting a domain name to an IP address.

TCP connection: the three‑way handshake.

Sending an HTTP request.

Server processes the request and returns an HTTP response.

Browser parses and renders the page.

Connection termination: the four‑way handshake.

1. What Is a URL?

A URL (Uniform Resource Locator) identifies a resource on the Internet. Its general form is

scheme://host.domain:port/path/filename

, where:

scheme – protocol type (e.g., http, https, ftp, file). https provides encrypted transmission.

host – the domain host (default for http is www).

domain – the Internet domain name, such as w3school.com.cn.

port – the port number on the host (default for http is 80).

path – the path on the server; if omitted, the document must reside in the root directory.

filename – the name of the document or resource.

2. DNS Resolution

After entering a URL, the browser first resolves the domain name because it cannot directly locate a server by name. DNS translates the domain into an IP address.

1. IP Address

An IP address is a 32‑bit binary number (e.g., 127.0.0.1) that uniquely identifies a host on a network.

Domain names act as a human‑friendly disguise for IP addresses, making them easier to remember.

2. What Is Domain Name Resolution?

DNS provides services to look up an IP address from a domain name and vice‑versa. It stores records that map domain names to IP addresses.

Example:

baidu.com → 220.114.23.56 (IP) : 80 (port)

3. How Browsers Find the IP for a URL

Browser cache: stores recent DNS records.

Operating system cache: consulted if the browser cache misses.

Router cache: routers may have DNS entries.

ISP DNS server: the ISP’s DNS resolves the query.

Root servers: if the ISP’s server cannot resolve, it queries root servers, which perform recursive lookups.

4. Summary

After obtaining the IP address, the browser proceeds to the HTTP request phase, which includes the TCP three‑way handshake, sending the HTTP request, and finally closing the TCP connection.

3. TCP Three‑Way Handshake

Before transmitting data, the client and server perform a three‑way handshake to synchronize sequence and acknowledgment numbers and exchange window size information.

1. Handshake Steps

Client sends a SYN packet with Seq=X.

Server replies with SYN‑ACK (SYN=1, ACK=X+1, Seq=Y).

Client sends an ACK packet with ACK=Y+1, completing the handshake.

2. Why Three Handshakes?

According to Xie Xiren’s "Computer Networks", the purpose is to prevent stale connection requests from being mistakenly processed by the server.

4. Sending the HTTP Request

After the TCP handshake, the client sends an HTTP request composed of a request line, headers, and an optional body.

1. Request Line

Method (e.g., GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, TRACE).

URL (e.g.,

/chapter17/user.html

).

Protocol version (e.g., HTTP/1.1).

<code>POST /chapter17/user.html HTTP/1.1</code>

The above line shows a POST request using HTTP/1.1.

2. Request Headers

Headers convey additional information as key/value pairs, such as Host, Connection, User-Agent, etc.

3. Request Body

The body carries form data or other payloads when needed.

name=tom&password=1234&realName=tomson

This example encodes three parameters: name, password, and realName.

5. Server Processing and HTTP Response

1. Server

A server is a high‑performance computer that listens for client requests and provides services like web pages, file downloads, email, or video streaming. Common web servers include Apache, Nginx, IIS, and Lighttpd.

2. MVC Backend Processing

Most backend frameworks follow the Model‑View‑Controller (MVC) pattern, separating the application into three components:

View : the user interface presented to the client. Model : handles data access and business logic. Controller : receives user input, invokes the model, and selects the view for rendering.

During a request, the controller processes logic and dispatches to the model, which may retrieve data from Redis, MySQL, etc. The rendered result is then sent back as an HTTP response.

3. HTTP Response Message

An HTTP response consists of a status line, response headers, and an optional body.

Status line: protocol version, status code, and description (e.g., 200 OK).

Headers: additional metadata as name/value pairs.

Body: the payload, which may be empty for certain responses.

6. Browser Parsing and Rendering

After receiving the HTML response, the browser renders the page through five main steps:

Parse HTML to build the DOM tree.

Parse CSS to create the CSS rule tree.

Combine DOM and CSS trees to form the render tree.

Layout: calculate geometry for each node.

Paint: draw pixels on the screen.

1. Building the DOM Tree

The browser parses HTML tags depth‑first, constructing nodes. Encountering a

script

tag pauses DOM construction until the script executes.

2. Generating the CSS Rule Tree

CSS parsing also pauses script execution; rendering does not start until the CSS tree is ready.

3. Creating the Render Tree

When both DOM and CSS trees are ready, the browser builds the render tree, which can be optimized by minimizing CSS.

4. Layout (Calculating Geometry)

The layout phase computes the position and size of each render object. Changes that affect layout trigger a reflow.

5. Painting

Paint: the renderer traverses the render tree and draws each object.

Repaint: occurs when visual properties change without affecting layout (e.g., color).

Reflow: occurs when size or position changes, requiring layout recomputation.

After the page is rendered, the TCP connection is closed with a four‑way handshake.

First FIN from the client, entering FIN_WAIT_1.

ACK from the server, client moves to FIN_WAIT_2.

Server sends FIN, entering LAST_ACK.

Client ACKs, enters TIME_WAIT, then the connection closes.