HTTP/2 represents a major revision of the HTTP protocol, bringing significant performance improvements. Let's explore the key differences visually. This article assumes basic familiarity with HTTP concepts like requests, responses, and headers. ## Request/Response Flow ### HTTP/1.1 Sequential Requests In HTTP/1.1, requests are processed sequentially over a single connection: ```mermaid sequenceDiagram participant Client participant Server Client->>Server: GET /index.html Server->>Client: 200 OK (HTML) Client->>Server: GET /style.css Server->>Client: 200 OK (CSS) Client->>Server: GET /script.js Server->>Client: 200 OK (JS) Note over Client,Server: Each request waits for previous response ``` **Problem:** Head-of-line blocking - each request must wait for the previous one to complete. ### HTTP/2 Multiplexed Streams HTTP/2 allows multiple requests simultaneously over a single connection: ```mermaid sequenceDiagram participant Client participant Server par Parallel Requests Client->>Server: Stream 1: GET /index.html Client->>Server: Stream 3: GET /style.css Client->>Server: Stream 5: GET /script.js end par Parallel Responses Server->>Client: Stream 1: 200 OK (HTML) Server->>Client: Stream 3: 200 OK (CSS) Server->>Client: Stream 5: 200 OK (JS) end Note over Client,Server: Multiple streams over single connection ``` **Benefit:** No head-of-line blocking at the application layer. ## Connection Management ### HTTP/1.1 Connection Handling ```mermaid graph TD A[Browser] -->|Connection 1| B[Server] A -->|Connection 2| B A -->|Connection 3| B A -->|Connection 4| B A -->|Connection 5| B A -->|Connection 6| B style A fill:#4A90E2,stroke:#2E5C8A,color:#fff style B fill:#50C878,stroke:#2E7D4E,color:#fff ``` **Typical behavior:** Browsers open 6-8 parallel connections per domain to work around the sequential limitation. ### HTTP/2 Multiplexing ```mermaid graph TD A[Browser] -->|Single Connection| B[Server] B -->|Stream 1: HTML| A B -->|Stream 2: CSS| A B -->|Stream 3: JS| A B -->|Stream 4: Image 1| A B -->|Stream 5: Image 2| A B -->|Stream N: ...| A style A fill:#4A90E2,stroke:#2E5C8A,color:#fff style B fill:#50C878,stroke:#2E7D4E,color:#fff ``` **Improvement:** All resources transfer over a single TCP connection with multiple virtual streams. ## Binary Framing Layer HTTP/2 introduces a binary framing layer that transforms how data is exchanged: ```mermaid graph LR A[HTTP/1.1
Text Protocol] --> B[Plain Text] C[HTTP/2
Binary Protocol] --> D[Binary Frames] D --> E[HEADERS Frame] D --> F[DATA Frame] D --> G[SETTINGS Frame] style A fill:#E74C3C,stroke:#C0392B,color:#fff style C fill:#50C878,stroke:#2E7D4E,color:#fff style B fill:#95A5A6 style D fill:#3498DB style E fill:#9B59B6,color:#fff style F fill:#9B59B6,color:#fff style G fill:#9B59B6,color:#fff ``` ## Server Push HTTP/2 enables servers to proactively send resources: ```mermaid sequenceDiagram participant Client participant Server Client->>Server: GET /index.html Note over Server: Server knows client needs these Server->>Client: PUSH_PROMISE: /style.css Server->>Client: PUSH_PROMISE: /script.js Server->>Client: 200 OK: /index.html Server->>Client: 200 OK: /style.css Server->>Client: 200 OK: /script.js Note over Client: Resources already in cache! ``` **Benefit:** Reduced latency by eliminating round trips for critical resources. ## Header Compression ```mermaid graph TD subgraph V1 [HTTP/1.1 Headers] A[Per Request] --> B["Full Text Headers
~800 bytes"] end subgraph V2 [HTTP/2 Headers] C[HPACK Compression] --> D["Compressed Headers
~100 bytes"] D -->|Static Table| E[Common Headers] D -->|Dynamic Table| F[Previous Headers] end style A fill:#E74C3C,stroke:#C0392B,color:#fff style C fill:#50C878,stroke:#2E7D4E,color:#fff style B fill:#95A5A6 style D fill:#3498DB,color:#fff ``` ## Performance Comparison | Feature | HTTP/1.1 | HTTP/2 | |---------|----------|--------| | **Transport** | Text-based | Binary frames | | **Multiplexing** | ❌ No | ✅ Yes | | **Header Compression** | ❌ No | ✅ HPACK | | **Server Push** | ❌ No | ✅ Yes | | **Stream Priority** | ❌ No | ✅ Yes | | **Connections** | 6-8 per domain | 1 per domain | ## Real-World Impact ```mermaid graph LR A[Same Website] --> B[HTTP/1.1] A --> C[HTTP/2] B --> D[Load Time: 3.2s] B --> E[Requests: 42] B --> F[Connections: 6] C --> G[Load Time: 1.8s
44% faster] C --> H[Requests: 42] C --> I[Connections: 1] style A fill:#95A5A6 style B fill:#E74C3C,stroke:#C0392B,color:#fff style C fill:#50C878,stroke:#2E7D4E,color:#fff style G fill:#F39C12,color:#fff ``` ## Key Takeaways 1. **Multiplexing eliminates head-of-line blocking** at the HTTP layer 2. **Binary framing** is more efficient than text-based protocols 3. **Header compression** reduces overhead significantly 4. **Server push** can eliminate round trips for critical resources 5. **Single connection** reduces TCP overhead and improves security HTTP/2 is now supported by all major browsers and servers. If you're not using it yet, it's time to upgrade! ## Implementation Code ```javascript const http2 = require('node:http2'); const fs = require('node:fs'); const server = http2.createSecureServer({ key: fs.readFileSync('localhost-privkey.pem'), cert: fs.readFileSync('localhost-cert.pem') }); server.on('stream', (stream, headers) => { stream.respond({ 'content-type': 'text/html; charset=utf-8', ':status': 200 }); stream.end('

Hello HTTP/2

'); }); server.listen(8443); ``` ```go package main import ( "fmt" "log" "net/http" ) func main() { // Go supports HTTP/2 by default since 1.6 srv := &http.Server{Addr: ":8443"} http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { fmt.Fprintf(w, "Hello HTTP/2") }) log.Fatal(srv.ListenAndServeTLS("server.crt", "server.key")) } ``` ```nginx server { listen 443 ssl http2; server_name example.com; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; location / { root /var/www/html; } } ```