Skip to content
finote

13. How the Web Works

Introduction

Section titled “Introduction”

Understanding how the web works is fundamental to web development. The web operates on a client-server model where browsers (clients) request resources from web servers, which respond with HTML, CSS, JavaScript, and other files. This process involves multiple technologies and protocols working together to deliver web pages to users worldwide.

The Client-Server Model

Section titled “The Client-Server Model”

The web is built on a client-server architecture:

Client (Browser)

Section titled “Client (Browser)”

The client is the web browser running on the user’s device:

  • Requests web pages and resources
  • Renders HTML, CSS, and JavaScript
  • Displays content to the user
  • Handles user interactions

Server

Section titled “Server”

The server is a computer that:

  • Stores web files (HTML, CSS, images, etc.)
  • Processes requests from clients
  • Sends responses back to clients
  • Handles dynamic content generation

The Request-Response Cycle

Section titled “The Request-Response Cycle”

When you visit a website, this cycle occurs:

1. User Action

Section titled “1. User Action”

User types a URL or clicks a link:

https://example.com/page.html

2. DNS Lookup

Section titled “2. DNS Lookup”

Browser resolves domain name to IP address:

3. HTTP Request

Section titled “3. HTTP Request”

Browser sends HTTP request to server:

GET /page.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0...
Accept: text/html

4. Server Processing

Section titled “4. Server Processing”

Server processes the request:

  • Finds the requested file
  • Executes server-side code (if any)
  • Generates response

5. HTTP Response

Section titled “5. HTTP Response”

Server sends response back:

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234


<!DOCTYPE html>
<html>...</html>

6. Browser Rendering

Section titled “6. Browser Rendering”

Browser receives and renders the response:

  • Parses HTML
  • Loads CSS and JavaScript
  • Renders the page
  • Executes JavaScript

HTTP (HyperText Transfer Protocol)

Section titled “HTTP (HyperText Transfer Protocol)”

HTTP is the protocol that governs communication between clients and servers.

HTTP Methods

Section titled “HTTP Methods”

Common HTTP methods:

  • GET: Retrieve data (most common)
  • POST: Submit data (forms, API calls)
  • PUT: Update resource
  • DELETE: Delete resource
  • PATCH: Partial update

HTTP Status Codes

Section titled “HTTP Status Codes”

Server responses include status codes:

  • 200 OK: Request successful
  • 301/302: Redirect
  • 404: Not found
  • 500: Server error
  • 403: Forbidden

HTTPS

Section titled “HTTPS”

HTTPS adds encryption to HTTP:

  • Secure: Encrypted communication
  • Certificate: Verified identity
  • Privacy: Protected data transmission

URLs (Uniform Resource Locators)

Section titled “URLs (Uniform Resource Locators)”

URLs identify resources on the web:

https://www.example.com:443/path/to/page.html?query=value#section
│      │                │   │                  │         │
│      │                │   │                  │         └─ Fragment
│      │                │   │                  └─ Query string
│      │                │   └─ Path
│      │                └─ Port
│      └─ Domain
└─ Protocol

URL Components

Section titled “URL Components”
  • Protocol: https:// (how to access)
  • Domain: www.example.com (where to find)
  • Port: :443 (which port, often implicit)
  • Path: /path/to/page.html (what resource)
  • Query: ?query=value (additional parameters)
  • Fragment: #section (page section)

How Browsers Work

Section titled “How Browsers Work”

Rendering Process

Section titled “Rendering Process”
  1. Parse HTML: Build Document Object Model (DOM)
  2. Parse CSS: Build CSS Object Model (CSSOM)
  3. Combine: Create render tree
  4. Layout: Calculate element positions
  5. Paint: Draw pixels on screen
  6. Composite: Layer and display

Browser Components

Section titled “Browser Components”
  • Rendering Engine: Parses HTML/CSS (Blink, Gecko, WebKit)
  • JavaScript Engine: Executes JavaScript (V8, SpiderMonkey)
  • Network Layer: Handles HTTP requests
  • UI Backend: Draws windows and widgets
  • Data Persistence: Stores cookies, cache, localStorage

Static vs Dynamic Content

Section titled “Static vs Dynamic Content”

Static Websites

Section titled “Static Websites”

Files stored as-is on server:

Server
├── index.html
├── styles.css
├── script.js
└── image.jpg

Characteristics:

  • Same content for all users
  • Fast to serve
  • Simple hosting
  • No server-side processing

Dynamic Websites

Section titled “Dynamic Websites”

Content generated on-demand:

Request → Server Processing → Database → Generated HTML → Response

Characteristics:

  • Personalized content
  • User-specific data
  • Server-side logic
  • Database integration

Web Technologies Stack

Section titled “Web Technologies Stack”

Frontend (Client-Side)

Section titled “Frontend (Client-Side)”

Technologies running in the browser:

  • HTML: Structure
  • CSS: Styling
  • JavaScript: Interactivity
  • APIs: Browser APIs, Web APIs

Backend (Server-Side)

Section titled “Backend (Server-Side)”

Technologies running on the server:

  • Server: Node.js, Python, PHP, Java
  • Database: MySQL, PostgreSQL, MongoDB
  • APIs: REST, GraphQL
  • Frameworks: Express, Django, Laravel

Caching

Section titled “Caching”

Caching improves performance by storing resources:

Browser Cache

Section titled “Browser Cache”

Browser stores resources locally:

  • HTML: Page structure
  • CSS: Stylesheets
  • JavaScript: Scripts
  • Images: Media files

CDN (Content Delivery Network)

Section titled “CDN (Content Delivery Network)”

Distributed servers for faster delivery:

  • Geographic distribution: Servers worldwide
  • Faster loading: Closer to users
  • Reduced latency: Lower response times

Security Considerations

Section titled “Security Considerations”

Same-Origin Policy

Section titled “Same-Origin Policy”

Browsers restrict cross-origin requests:

  • Origin: Protocol + Domain + Port
  • Restriction: Prevents malicious access
  • CORS: Cross-Origin Resource Sharing for exceptions

HTTPS

Section titled “HTTPS”

Encrypted communication:

  • SSL/TLS: Encryption protocols
  • Certificates: Verified identity
  • Privacy: Protected data

Content Security Policy

Section titled “Content Security Policy”

Restricts resource loading:

  • Prevents XSS: Cross-site scripting attacks
  • Controls resources: Limits what can load
  • Meta tags or headers: Implementation

Modern Web Features

Section titled “Modern Web Features”

Progressive Web Apps (PWAs)

Section titled “Progressive Web Apps (PWAs)”

Web apps that feel native:

  • Service Workers: Offline functionality
  • Manifest: App-like experience
  • Installable: Can be installed on devices

Web APIs

Section titled “Web APIs”

Browser-provided capabilities:

  • Geolocation: Location services
  • Local Storage: Client-side storage
  • Fetch API: Modern HTTP requests
  • WebSockets: Real-time communication

Example: Complete Request Flow

Section titled “Example: Complete Request Flow”

Best Practices

Section titled “Best Practices”

Performance

Section titled “Performance”
  • Minimize requests: Combine files when possible
  • Use caching: Leverage browser and CDN caching
  • Optimize assets: Compress images, minify code
  • Lazy loading: Load resources as needed

Security

Section titled “Security”
  • Use HTTPS: Encrypt all communication
  • Validate input: Sanitize user data
  • Implement CSP: Content Security Policy
  • Keep updated: Use latest security practices

Accessibility

Section titled “Accessibility”
  • Semantic HTML: Use proper elements
  • Alt text: Describe images
  • Keyboard navigation: Ensure keyboard access
  • ARIA attributes: Enhance accessibility

References

Section titled “References”