How the Web Works

When you enter a website address, the browser finds the correct server, sends a request, receives resources, and converts them into pixels on the screen.

URL entered
    ↓
Find the server
    ↓
Send the request
    ↓
Receive the response
    ↓
Render the webpage

One-line idea: The web is a request-response system running across connected networks, with the browser turning server resources into a visible interface.

Core Web Concepts

Client and Server

A client requests a resource or service. A server receives that request and returns a response.

Client                     Server
Browser  ---- request ---> Website server
Browser  <--- response --- Website server

Examples of clients:

• web browser
• mobile application
• smart TV application
• another server

A server is any machine that provides data or services to other machines.

The response may contain:

• HTML
• CSS
• JavaScript
• JSON data
• images
• fonts
• other files

The Pizza Analogy

The client-server model is similar to ordering food:

You place an order       -> client sends a request
The shop receives it     -> server receives the request
The shop prepares food   -> server processes the request
Food is delivered        -> server sends the response

The analogy helps explain request and response, but the real data travels digitally through many connected networks.

Internet Connection Path

In a home or office network, the simplified path is:

Phone / Laptop / TV
         ↓ Wi-Fi or Ethernet
       Router
         ↓
       Modem
         ↓ fiber, DSL, or cable
Local Internet Service Provider
         ↓
   Global Internet
         ↓
 Website Server

The response travels back through the network to the device.

Part	Main responsibility
Device	Creates the request and displays the result
Router	Connects devices in the local network and forwards traffic
Modem	Converts data for transmission over the internet connection
ISP	Connects the local network to the wider internet
Server	Processes requests and returns resources or data

Why Devices Use Routers

Connecting every device directly to every other device would require too many physical connections.

For n devices, the number of direct pair connections would be:

n × (n - 1) / 2

Instead, devices connect to a central router or switch using Wi-Fi or Ethernet.

Laptop ─┐
Phone  ─┼── Router ── ISP ── Internet
TV     ─┘

Routers connect local networks to other networks, allowing data to travel toward its destination.

Domain Names and IP Addresses

Humans use domain names such as:

google.com
flipkart.com

Networks use IP addresses to locate destinations.

Domain name -> human-friendly website name
IP address  -> network address used to reach the server

DNS connects these two concepts by resolving a domain name to an IP address.

DNS Hierarchy

The Domain Name System is hierarchical.

For this domain:

mail.google.com.

Level	Part	Meaning
Root	.	Top of the DNS hierarchy
Top-Level Domain	com	Domain category or country level
Second-Level Domain	google	Registered website or organization name
Third-Level Domain	mail	Subdomain under the main domain

Examples of TLDs:

Generic TLDs:      .com, .org, .net
Country-code TLDs: .in, .us, .uk

Examples of subdomains:

mail.google.com
docs.google.com
support.microsoft.com

Simplified DNS Resolution

DNS lookup can be understood as a series of directions:

Browser needs google.com
          ↓
DNS resolver checks for an answer
          ↓
Root directs toward .com
          ↓
.com TLD directs toward google.com
          ↓
Authoritative DNS returns the IP address
          ↓
Browser can contact the destination

The result may already be cached, allowing some of these steps to be skipped.

ICANN and WHOIS

ICANN coordinates the global domain name system and helps keep domain names unique and organized. It oversees top-level domains and works with registries and registrars.

WHOIS is used to look up registration information associated with a domain when that information is available.

Servers, Routes and Data Centers

A server runs code that handles incoming requests.

For example:

Request:  /products
Handler:  product route logic
Response: HTML page or JSON product data

A single machine may not be enough for a popular service. Large applications use multiple servers across data centers to handle traffic and improve reliability.

Users
  ↓
Multiple application servers
  ↓
Data and supporting services

Distance and Latency

A request can travel to a server in another city or country. Greater physical and network distance usually increases latency.

Latency is the delay between sending data and receiving the result.

To reduce latency, companies may place servers or cached content in multiple regions closer to users.

Far server    -> more travel -> usually higher latency
Nearby server -> less travel -> usually lower latency

Optical Fiber and the Global Internet

Long-distance internet traffic mainly travels through land and undersea optical fiber cables.

Optical fiber:

• transmits information as pulses of light
• carries large amounts of data
• works over long distances
• connects cities, countries and continents

Undersea cables form a major part of the global internet backbone.

ISP Levels

Internet traffic may move through different network levels.

ISP level	Role
Local ISP	Connects homes and businesses in a local region
Regional ISP	Connects larger areas such as multiple cities or states
Global backbone provider	Operates high-capacity networks connecting countries and continents

Simplified international path:

Device
  ↓
Local ISP
  ↓
Regional network
  ↓
Global backbone and optical fiber
  ↓
Destination data center

Packets, Routers and Hops

Data is not normally sent as one enormous piece. It is divided into smaller units called packets.

Original data
   ↓ split
[Packet 1] [Packet 2] [Packet 3]
   ↓ travel through routers
Destination
   ↓ reassemble
Original data

Each router-to-router step is called a hop.

Routers inspect destination information and forward packets through the network. The response is also divided into packets and reassembled on the user's device.

Complete Request and Rendering Flow

Step 1: The Browser Checks Local Sources

Before making a network request, the browser may check whether the resource is already available locally.

Possible sources include:

• browser cache
• service worker cache
• other local caching mechanisms

Resource requested
       ↓
Available locally?
   ├── Yes -> return cached resource
   └── No  -> continue to the network

Caching can avoid unnecessary network travel and make repeat visits faster.

Step 2: A Service Worker May Intercept the Request

A registered service worker can act as a programmable layer between the webpage and the network.

Page makes a request
        ↓
Service worker receives a fetch event
        ↓
Resource available in Cache Storage?
   ├── Yes -> return cached response
   └── No  -> forward request to network

This can improve loading speed and allow some applications to work offline.

Step 3: DNS Resolves the Domain

If a network request is required, the domain name must be associated with its IP address.

google.com
    ↓ DNS resolution
Server IP address

The browser can now direct the request toward the network destination.

Step 4: The Request Travels Across Networks

The request leaves the device and passes through networking infrastructure.

Browser
  ↓
Router and modem
  ↓
Local ISP
  ↓
Other connected networks and routers
  ↓
Server or nearby edge location

Packets may cross many hops before reaching the destination.

ISP Peering

ISP peering occurs when two networks connect directly to exchange traffic.

Direct exchange can reduce:

• latency
• number of hops
• intermediary network cost

Large services may also place edge servers close to or inside ISP networks so frequently requested content can be served from a nearby location.

Network and CDN Caching

Caching may happen at more than one level.

Cache location	Purpose
Browser cache	Reuses resources on the user's device
Service worker cache	Provides programmable caching and offline support
CDN edge server	Serves cached resources from a location near the user
Network-level cache	Reuses frequently requested content within the network

If a nearby cache contains the resource, the request may not need to reach the original server.

Step 5: A TCP Connection Is Established

Before reliable data exchange, the client and server establish a TCP connection using a three-way handshake.

Client                         Server
  | -------- SYN ------------> |
  | <----- SYN-ACK ----------- |
  | -------- ACK ------------> |
  |       Connection ready     |

Meaning:

SYN     -> Can we connect?
SYN-ACK -> Yes, I am ready.
ACK     -> Confirmed; begin communication.

The handshake ensures that both sides are ready to communicate.

Step 6: The Server Handles the Request

The request reaches the server responsible for the domain and route.

Request reaches server
          ↓
Server selects route handler
          ↓
Application logic runs
          ↓
Required data or files are prepared
          ↓
Response is sent

Example:

GET /profile
      ↓
Profile route executes
      ↓
Server returns HTML or JSON

Step 7: The Response Returns to the Browser

The response is divided into packets and routed back across the network.

The browser receives and reassembles the data into resources such as:

• HTML document
• stylesheet
• JavaScript files
• images
• fonts

The browser must now process these resources to display the page.

Browser Rendering Pipeline

The simplified rendering pipeline is:

Loading
   ↓
Scripting
   ↓
Style and Layout
   ↓
Painting
   ↓
Compositing
   ↓
Pixels on screen

1. Parse HTML and Build the DOM

The browser reads HTML and converts its elements into a tree called the DOM.

<body>
  <main>
    <h1>Hello</h1>
  </main>
</body>

Simplified DOM tree:

body
└── main
    └── h1
        └── "Hello"

HTML -> parsing -> DOM tree

2. Discover and Fetch External Resources

While parsing HTML, the browser finds references to resources such as:

• CSS through <link>
• JavaScript through <script>
• images
• fonts

The browser sends additional requests for these resources.

3. Parse CSS and Build the CSSOM

CSS is parsed into the CSSOM, a structure representing selectors, properties and inherited styles.

h1 {
  color: navy;
  font-size: 32px;
}

CSS -> parsing -> CSSOM tree

CSS is render-blocking because the browser needs style information before correctly drawing the page.

4. Execute JavaScript

JavaScript can:

• modify the DOM
• change styles
• attach event listeners
• send additional requests
• add or remove elements

A normal script can pause HTML parsing while it is downloaded and executed because it may change the document structure.

Once the HTML document has been parsed, the DOMContentLoaded event can fire.

5. Build the Render Tree

The browser combines the DOM and CSSOM to create the render tree.

DOM + CSSOM -> Render Tree

The render tree contains visible elements and their computed styles. Non-visible items such as document metadata are not drawn as visible page content.

6. Layout or Reflow

During layout, the browser calculates the geometry of each visible element:

• width and height
• position
• spacing
• relationship to surrounding elements

Render Tree
     ↓
Calculate size and position
     ↓
Layout result

Changes to size or position can cause layout to run again. This is also called reflow.

7. Paint

After layout, the browser creates drawing instructions for visual properties such as:

• text
• colors
• borders
• images
• shadows

Layout information -> Paint instructions -> Visual layers

8. Compositing

The browser combines painted layers and sends them to the GPU for final display.

Compositing is especially useful for:

• scrolling
• animations
• independently changing visual layers

The result becomes the pixels shown on the screen.

DOM, CSSOM and Rendering Summary

HTML -> DOM ──────────┐
                     ├-> Render Tree -> Layout -> Paint -> Composite
CSS  -> CSSOM ────────┘

JavaScript can modify DOM and styles during this process.

Full Example: Visiting example.com/products

1. User enters example.com/products
2. Browser checks available caches
3. Service worker may intercept the request
4. DNS resolves example.com to an IP address
5. Packets travel through routers and ISP networks
6. Client and server establish a TCP connection
7. Server handles the /products route
8. Server returns HTML, CSS, JavaScript or data
9. Browser builds the DOM and CSSOM
10. Browser executes JavaScript
11. Browser creates the render tree
12. Layout calculates element geometry
13. Paint and compositing display the page

Important Distinctions and Common Confusions

Concept	Meaning
Internet	The connected network infrastructure
Web	Websites and resources accessed over that infrastructure
Domain name	Human-readable website name
IP address	Network destination address
DNS	Resolves domain names to IP addresses
Router	Forwards packets between networks
Server	Processes requests and provides resources
DOM	Parsed structure of the HTML
CSSOM	Parsed structure of the CSS rules
Render tree	Visible DOM content combined with computed styles
Layout	Calculates size and position
Paint	Creates drawing instructions
Compositing	Combines layers into the final displayed output

Common misunderstandings

Misunderstanding	Correct mental model
A domain name is the server address used by the network	DNS resolves the domain to an IP address
Data travels as one large file	Data is divided into packets
Every request reaches the origin server	A browser, service worker or edge cache may respond first
The browser directly paints HTML	It builds DOM, CSSOM and the render tree first
Layout and paint are the same	Layout calculates geometry; paint draws visual details
A farther server is always equally fast	Greater distance and more hops can increase latency

Summary

The web works by routing client requests to servers and letting browsers transform returned resources into an interactive visual page.

URL
 ↓
Cache or Service Worker
 ↓ network required
DNS -> IP address
 ↓
Router -> ISP -> Internet -> Server
 ↓
TCP connection and request
 ↓
Server response
 ↓
HTML -> DOM
CSS  -> CSSOM
 ↓
Render Tree -> Layout -> Paint -> Composite
 ↓
Pixels on screen