> For the complete documentation index, see [llms.txt](https://mihai-gheorghe.gitbook.io/tic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mihai-gheorghe.gitbook.io/tic/basic-web-principles/how-web-pages-work.md).
# How web pages work
## What is The Internet
The Internet is a global, decentralized network infrastructure that interconnects tens of thousands of autonomous systems using the **Internet Protocol Suite (TCP/IP, Transmission Control Protocol/Internet Protocol)**. Data travels in small packets that routers forward independently (packet switching); all users' packets share the same links, with no reserved capacity (statistical multiplexing), over fiber optic cables, copper wires, radio waves, and satellite links.
It is mainly used for accessing resources (and services) such as hypertext documents of the World Wide Web, electronic mail, various files, or data streams.
#### Technical Architecture
The **OSI (Open Systems Interconnection) model** describes networks in seven layers; the Internet follows the simpler **TCP/IP stack**, described here in five layers:
1. **Physical Layer**: Encompasses submarine cables (carrying over 99% of intercontinental data), terrestrial fiber networks, last-mile connections (DSL, cable, fiber-to-the-home), and wireless technologies (4G/5G, Wi-Fi 6/6E/7)
2. **Data Link Layer**: Handles frame transmission within the local network with protocols like Ethernet (IEEE 802.3), using MAC (Media Access Control) addresses to identify devices
3. **Network Layer**: Implements IP (Internet Protocol) with IPv4 (32-bit addresses, \~4.3 billion unique addresses) and IPv6 (128-bit addresses, \~340 undecillion addresses), utilizing routing protocols like BGP (Border Gateway Protocol) for inter-AS routing and OSPF/RIP for intra-AS routing
4. **Transport Layer**: Provides end-to-end communication with TCP (reliable, connection-oriented, with congestion control algorithms like CUBIC and BBR) and UDP (User Datagram Protocol; unreliable, connectionless, lower latency)
5. **Application Layer**: Implements protocols like HTTP/HTTPS, FTP, SMTP, DNS (Domain Name System), and WebSocket
The Internet has no central authority: its networks are administered independently. If a network or computer becomes unavailable, the Internet as a whole keeps working, and traffic is routed along other paths.
The Internet's decentralized governance model involves multiple stakeholders:
* **IETF (Internet Engineering Task Force)**: Develops and maintains protocol standards through RFCs (Request for Comments)
* **ICANN (Internet Corporation for Assigned Names and Numbers)**: Manages the DNS root zone and IP address allocation
* **W3C (World Wide Web Consortium)**: Standardizes CSS and Web APIs; HTML is maintained by the WHATWG (Web Hypertext Application Technology Working Group)
* **Regional Internet Registries (RIRs)**: ARIN, RIPE NCC, APNIC, LACNIC, AFRINIC manage IP address allocation regionally
* **IEEE**: Develops standards for networking hardware and protocols (802.x standards)
### World Wide Web (WWW)
The World Wide Web is a distributed hypermedia information system built atop the Internet (documents combining text and media, linked by hyperlinks to documents on any server), characterized by three fundamental technologies:
1. **HTML (HyperText Markup Language)**: Semantic document structure
2. **URI/URL (Uniform Resource Identifier/Locator)**: Global addressing scheme
3. **HTTP (HyperText Transfer Protocol)**: Application-layer communication protocol
#### Technical Specifications
* **Document Object Model (DOM)**: Tree-structured representation of HTML documents, manipulable via JavaScript through standardized APIs
* **REST (Representational State Transfer)**: Architectural style emphasizing stateless communication, resource-based interactions, and uniform interfaces
* **Semantic Web**: Extension using RDF (Resource Description Framework), OWL (Web Ontology Language), and SPARQL for machine-readable data
* **WebAssembly (Wasm)**: Binary instruction format enabling near-native performance for web applications
#### URL Structure and Components
URLs have a standard structure:
```
scheme://[userinfo@]host[:port][/path][?query][#fragment]
```
Example breakdown:
{% code fullWidth="true" %}
```http
https://user:pass@example.com:8080/path/to/resource?key=value#section
│ │ │ │ │ │ └─ Fragment identifier
│ │ │ │ │ └─ Query parameters
│ │ │ │ └─ Path to resource
│ │ │ └─ Port number (optional, defaults: HTTP=80, HTTPS=443)
│ │ └─ Host (domain name or IP address)
│ └─ Authentication credentials (deprecated for security)
└─ Protocol scheme
```
{% endcode %}
### HTTP Protocol
HTTP (HyperText Transfer Protocol) is a stateless, application-layer protocol operating over TCP or, for HTTP/3, over QUIC (originally Quick UDP Internet Connections), following a **request-response paradigm** with extensive header metadata and multiple request methods.
#### HTTP Evolution
**HTTP/0.9 (1991)**
* Single-line protocol
* GET method only
* No headers, status codes, or content types
**HTTP/1.0 (1996)**
* Headers introduced
* Status codes
* Content-Type support
* Additional methods (POST, HEAD)
**HTTP/1.1 (1997)**
* Persistent connections (Keep-Alive)
* Pipelining (requests sent without waiting for responses; disabled in browsers)
* Chunked transfer encoding
* Cache control mechanisms
* Host header (enabling virtual hosting)
* Additional methods (PUT, DELETE, OPTIONS, TRACE, CONNECT)
**HTTP/2 (2015)**
* Binary framing layer
* Multiplexing (parallel requests/responses over single connection)
* Stream prioritization
* Header compression (HPACK algorithm)
* Flow control at stream and connection level
{% hint style="success" %}
HTTP/2, finalized in 2015, brought significant improvements to website performance and efficiency over its predecessor, HTTP/1.1. The key advancements include multiplexing, allowing multiple requests and responses to occur simultaneously over a single connection, and header compression, reducing overhead. These enhancements result in faster page load times, reduced latency, and better resource utilization. One limit remained: all streams share one TCP connection, so a single lost packet delays them all (head-of-line blocking).
{% endhint %}
**HTTP/3 (2022)**
* Built on QUIC (UDP-based) instead of TCP
* Faster connection setup: one round trip, or none (0-RTT) when reconnecting
* Improved congestion control
* Connection migration (survives IP changes)
* Mandatory encryption with TLS (Transport Layer Security) 1.3
* Eliminates head-of-line blocking at transport layer
#### HTTP Request Structure
```http
METHOD /path/to/resource HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Cookie: session=abc123; preferences=dark_mode
Cache-Control: max-age=0
[Optional Request Body]
```
#### HTTP Response Structure
```http
HTTP/1.1 200 OK
Date: Thu, 23 Oct 2025 12:28:53 GMT
Server: Apache/2.4.41 (Ubuntu)
Content-Type: text/html; charset=UTF-8
Content-Length: 12345
Content-Encoding: gzip
Cache-Control: no-store
Set-Cookie: session=xyz789; HttpOnly; Secure; SameSite=Strict
Content-Security-Policy: default-src 'self'
[Response Body]
```
#### HTTP Methods (Verbs) and Semantics
* **GET**: Idempotent, safe, cacheable retrieval
* **POST**: Non-idempotent resource creation/processing
* **PUT**: Idempotent resource replacement
* **PATCH**: Partial resource modification
* **DELETE**: Idempotent resource removal
* **HEAD**: GET without response body
* **OPTIONS**: Discover allowed methods (CORS preflight)
* **CONNECT**: Establish tunnel (proxies)
* **TRACE**: Loop-back diagnostic
#### Status Code Categories
* **1xx (Informational)**: 100 Continue, 101 Switching Protocols, 103 Early Hints
* **2xx (Success)**: 200 OK, 201 Created, 204 No Content, 206 Partial Content
* **3xx (Redirection)**: 301 Moved Permanently, 302 Found, 304 Not Modified, 307 Temporary Redirect
* **4xx (Client Error)**: 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 429 Too Many Requests
* **5xx (Server Error)**: 500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable, 504 Gateway Timeout
#### Security Headers
Modern HTTP responses should include security headers:
```http
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Content-Security-Policy: default-src 'self'; script-src 'self'
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: geolocation=(), microphone=(), camera=()
```
## Web servers, Web browsers, and DNS Servers
{% hint style="success" %}
**Web servers generate HTTP responses** while **Web browsers initiate HTTP requests and interpret HTTP responses.**
{% endhint %}
#### Web Servers Architecture
Modern web servers use several architectures for handling concurrent requests:
**Process-based Models** (Apache prefork MPM)
* Each request handled by separate process
* High memory overhead but strong isolation
* Suitable for mod\_php and other embedded interpreters
**Thread-based Models** (Apache worker MPM)
* Threads share process memory space
* Lower memory footprint than processes
* Potential thread-safety issues with certain modules
**Event-driven Models** (Nginx, Node.js)
* Single or few threads with event loop
* Non-blocking I/O operations
* Efficient for static content and reverse proxying
* C10K problem solution (handling 10,000+ concurrent connections)
**Hybrid Models** (Apache event MPM)
* Combines threading with event-driven architecture
* Worker threads for active requests
* Event loop for keep-alive connections
#### Popular Web Server Software
W3Techs figures, October 2026:
1. **Nginx** (\~31% market share)
* Asynchronous event-driven architecture
* Widely used reverse proxy and load balancer
* Low memory footprint
2. **Apache HTTP Server** (\~22% market share)
* Modular architecture (.htaccess support)
* Extensive module ecosystem
* Multiple processing models (MPMs)
3. **LiteSpeed** (\~14% market share)
* Drop-in Apache replacement
* Built-in cache acceleration
* HTTP/3 support
4. **Microsoft IIS** (\~3% market share)
* Tight Windows integration
* Native .NET support
* Kernel-mode caching
**DNS stands for Domain Name System** and is basically a systemized way to label computers and other devices over the Internet or private networks making them identifiable via a domain name, not only through an IP address.
In reality, loading a page takes two steps, a DNS lookup and then the HTTP request:
{% hint style="success" %}
The Domain Name System (DNS) is like a global phonebook for the internet, translating human-readable domain names (like google.com) into machine-readable IP addresses. Its maintenance is a shared responsibility. At the top level, the Internet Corporation for Assigned Names and Numbers (ICANN) coordinates the root zone and delegates authority for top-level domains (like .com, .org) to registries. These registries then work with registrars (companies like GoDaddy or Namecheap) who sell domain names to individuals and organizations. Finally, website owners manage the DNS records for their specific domains, specifying how their domain name maps to their web server's IP address. This distributed system ensures redundancy and resilience.
{% endhint %}
DNS operates as a distributed, hierarchical database with multiple components:
**DNS Hierarchy:**
```
Root (.)
└── Top-Level Domains (TLDs)
│ generic: .com, .org, .net, .info
│ country-code: .uk, .de, .jp, .io
│ sponsored: .edu, .gov, .mil
└── Second-Level Domains (example.com)
└── Subdomains (www.example.com, api.example.com)
```
**DNS Query Process :**
1. **Browser Cache Check**: TTL-based caching
2. **OS Cache Check**: System resolver cache
3. **Router Cache Check**: Local network cache
4. **ISP Recursive Resolver**:
* Performs iterative queries on behalf of client
* Implements DNSSEC validation
* Caches responses based on TTL
5. **Root Name Server Query** (13 logical servers, about 2,000 physical instances via anycast):
* Returns TLD name server information
6. **TLD Name Server Query**:
* Returns authoritative name server for domain
7. **Authoritative Name Server Query**:
* Returns IP address for requested domain
### WebSocket Protocol
WebSocket provides full-duplex, bidirectional communication over a single TCP connection:
**Handshake Process:**
```http
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
```
**Frame Structure:**
```
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Extended payload length |
|I|S|S|S| (4) |A| (7) | (16/64) |
|N|V|V|V| |S| | (if payload len==126/127) |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
| Extended payload length continued, if payload len == 127 |
+ - - - - - - - - - - - - - - - +-------------------------------+
| |Masking-key, if MASK set to 1 |
+-------------------------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+-------------------------------- - - - - - - - - - - - - - - - +
: Payload Data continued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Data continued ... |
+---------------------------------------------------------------+
```
**Use Cases:**
* Real-time chat applications
* Live sports updates
* Financial trading platforms
* Collaborative editing (Google Docs-style)
* Online gaming
* IoT device communication
* Live streaming chat
{% hint style="success" %}
**WebSockets -** a different protocol used in web technologies
**Persistent connection:** WebSockets establish a persistent, two-way connection between the client and server. Once the connection is established, both parties can send data at any time.
**Stateful:** WebSockets maintain state, meaning the server can keep track of the client's connection and any data that has been exchanged.
**Full-duplex:** Communication is full-duplex, allowing both the client and server to send data simultaneously.
**Ideal for:** Real-time applications like chat, online games, live updates, and collaborative tools where instant communication is crucial.
{% endhint %}
## Web Pages
Web pages are (basically) documents formatted with HTML and can be optionally packed with style sheets (CSS files), behavior (JavaScript files), and multimedia (images, audio, video files).
Modern web pages are composite documents assembled from multiple resources:
#### Critical Rendering Path
1. **HTML Parsing**: Incremental parsing; a preload scanner discovers resources (CSS, scripts, images) early
2. **DOM Construction**: Tree structure with \~O(n) complexity
3. **CSSOM Construction**: Parallel to DOM, blocks rendering
4. **Render Tree**: DOM + CSSOM merger, excludes non-visual elements
5. **Layout/Reflow**: Geometric calculations, expensive operation
6. **Paint**: Fill pixels, create layers
7. **Composite**: GPU acceleration, layer combination
#### Resource Loading Optimization
**Resource Hints:**
```html
```
**Critical CSS Inlining:**
```html
```
**JavaScript Loading Strategies:**
```html
```
## FrontEnd vs. BackEnd
FrontEnd refers to the source code (received as a plain answer from HTTP requests) which a browser can interpret.
BackEnd is the source code executed at a Web Server level, and cannot be accessed by the browser. It is typically used for generating HTTP responses, interacting with Databases or other Information Systems, and for performing various other logical tasks.
#### Frontend Architecture
**Component-Based Architectures:**
* **React**: Virtual DOM, unidirectional data flow, hooks-based state management
* **Vue**: Reactive data binding, template-based, progressive framework
* **Angular**: Full component-based framework, dependency injection, TypeScript-first
* **Svelte**: Compile-time optimization, no virtual DOM, rune-based reactivity
**State Management Patterns:**
* **Flux/Redux**: Unidirectional data flow, single source of truth
* **MobX**: Observable state, reactive programming
* **Zustand/Jotai**: Lightweight, hook-based state management
* **XState**: Finite state machines for complex state logic
**Frontend Build Pipeline:**
```
Source Code → Transpilation (Babel/TypeScript) →
Bundling (Webpack/Vite/Rollup) → Minification →
Tree Shaking → Code Splitting → Asset Optimization →
Production Build
```
**Modern Frontend Technologies:**
* **WebAssembly**: Near-native performance for compute-intensive tasks
* **Progressive Web Apps (PWA)**: Offline capability, installable web apps
* **Server-Side Rendering (SSR)**: Initial HTML from server
* **Static Site Generation (SSG)**: Pre-rendered pages at build time
* **Incremental Static Regeneration (ISR)**: Hybrid static/dynamic approach
* **Edge Computing**: Computation at CDN (Content Delivery Network) edge locations
#### Backend Architecture
**Architectural Patterns:**
**Monolithic Architecture:**
* Single deployable unit
* Shared memory space
* Simple deployment but scaling challenges
* Examples: Traditional Rails, Django applications
**Microservices Architecture:**
* Independently deployable services
* Service-specific databases
* Inter-service communication (REST, gRPC, message queues)
* Container orchestration (Kubernetes, Docker Swarm)
* Service mesh (Istio, Linkerd) for communication
**Serverless Architecture:**
* Function-as-a-Service (FaaS): AWS Lambda, Vercel Functions
* Backend-as-a-Service (BaaS): Firebase, Supabase
* Event-driven execution
* Pay-per-use pricing model
* Cold start considerations
**Backend Technologies Stack:**
**Runtime Environments:**
* **Node.js**: V8-based JavaScript runtime, event-driven, non-blocking I/O
* **Python**: Django (batteries-included), Flask (microframework), FastAPI (async)
* **Java**: Spring Boot (enterprise), Micronaut (microservices)
* **Ruby**: Rails (convention over configuration)
* **Go**: High performance, built-in concurrency
* **Rust**: Memory safety without garbage collection
**Database Systems:**
*Relational (SQL):*
* **PostgreSQL**: Advanced features, JSON support, extensions
* **MySQL/MariaDB**: High performance, replication
* **SQLite**: Embedded, serverless
*NoSQL:*
* **Document Stores**: MongoDB, CouchDB (JSON documents)
* **Key-Value**: Redis (in-memory), DynamoDB
* **Column-Family**: Cassandra, HBase (wide column)
* **Graph**: Neo4j, ArangoDB (relationship-focused)
**API Architectures:**
* **REST**: Resource-based, stateless, HTTP verbs
* **GraphQL**: Query language, single endpoint, type system
* **gRPC**: Binary protocol, Protocol Buffers, bidirectional streaming
* **WebSocket**: Real-time, bidirectional communication
* **Server-Sent Events**: Unidirectional server-to-client streaming
**Caching Strategies:**
* **Browser Cache**: HTTP headers (Cache-Control, ETag)
* **CDN Cache**: Geographic distribution, edge caching
* **Application Cache**: In-memory (Redis, Memcached)
* **Database Cache**: Query result caching
* **Full-Page Cache**: Varnish, Nginx FastCGI cache
**Message Queue Systems:**
* **RabbitMQ**: AMQP protocol, reliable delivery
* **Apache Kafka**: Distributed streaming, high throughput
* **Redis Pub/Sub**: Simple publish-subscribe
* **Amazon SQS/SNS**: Managed queue/notification services
#### DevOps and Deployment
**CI/CD Pipeline:**
```
Code Commit → Automated Tests → Build →
Security Scanning → Staging Deployment →
Integration Tests → Production Deployment →
Monitoring & Rollback
```
**Container Technologies:**
* **Docker**: Containerization, Dockerfile, image layers
* **Kubernetes**: Orchestration, pods, services, ingress
* **Helm**: Kubernetes package management
* **Service Mesh**: Istio, Linkerd for microservice communication
**Infrastructure as Code:**
* **Terraform**: Cloud-agnostic infrastructure provisioning
* **CloudFormation**: AWS-specific IaC
* **Ansible**: Configuration management
* **Pulumi**: Programming language-based IaC
**Monitoring and Observability:**
* **Metrics**: Prometheus, Grafana, DataDog
* **Logging**: ELK Stack (Elasticsearch, Logstash, Kibana), Splunk
* **Tracing**: Jaeger, Zipkin, AWS X-Ray
* **Error Tracking**: Sentry, Rollbar
### Security Considerations
#### Web Security Threats
**Common Vulnerabilities (OWASP Top 10:2025):**
1. **Broken Access Control**: Privilege escalation
2. **Security Misconfiguration**: Default settings, verbose errors
3. **Software Supply Chain Failures**: Vulnerable or compromised dependencies
4. **Cryptographic Failures**: Inadequate encryption
5. **Injection**: SQL, NoSQL, OS command injection, Cross-Site Scripting (XSS)
6. **Insecure Design**: Security missing from the design
7. **Authentication Failures**: Session management flaws
8. **Software or Data Integrity Failures**: Unverified updates or serialized data
9. **Security Logging and Alerting Failures**: Delayed breach detection
10. **Mishandling of Exceptional Conditions**: Failing open on errors
#### Security Best Practices
**Input Validation:**
```javascript
// Server-side validation against an allow-list of accepted values
const isValidUsername = (value) => /^[a-zA-Z0-9_]{3,30}$/.test(value);
// Parameterized queries (SQL injection prevention)
const query = 'SELECT * FROM users WHERE id = ?';
db.execute(query, [userId]);
// Display user data as text, not HTML (XSS prevention)
element.textContent = userInput;
```
**Authentication & Authorization:**
* **Multi-factor Authentication (MFA)**
* **OAuth 2.0 / OpenID Connect**
* **JWT with proper validation**
* **Session management with secure cookies**
* **Rate limiting and account lockout**
**Encryption:**
* **TLS 1.3**: Modern encryption for data in transit
* **AES-256**: Symmetric encryption for data at rest
* **Bcrypt/Argon2**: Password hashing
* **Certificate Pinning**: Mobile app security
{% hint style="success" %}
Newer technologies such as HTTP/3, WebAssembly, and edge computing rest on the same fundamentals: network protocols, the request-response model, and the split between frontend and backend.
{% endhint %}