A Panorama of Request FlowA Panorama of Request Flow

What will you learn in this article?What will you learn in this article?

After reading this chapter, you will gain:After reading this chapter, you will gain:

• Full-chain perspective: Understand the complete process of an HTTP request from sending to returningFull-chain perspective: Understand the complete process of an HTTP request from sending to returning
• Layer-by-layer responsibility awareness: Know what DNS, TCP, load balancing, web servers, application servers, and databases each doLayer-by-layer responsibility awareness: Know what DNS, TCP, load balancing, web servers, application servers, and databases each do
• Problem diagnosis ability: Know which layer to start investigating when requests are slow or failProblem diagnosis ability: Know which layer to start investigating when requests are slow or fail
• Performance optimization thinking: Each layer has optimization potential; know where the optimization points arePerformance optimization thinking: Each layer has optimization potential; know where the optimization points are

------

0. The Big Picture: What Does a Request Go Through0. The Big Picture: What Does a Request Go Through

Use an analogy to understand: you order a book online. This process is strikingly similar to an HTTP request.Use an analogy to understand: you order a book online. This process is strikingly similar to an HTTP request.

------

1. Browser Initiates the Request1. Browser Initiates the Request

1.1 URL Parsing1.1 URL Parsing

When you enter https://api.example.com/books?id=123, the browser breaks it into several parts:When you enter https://api.example.com/books?id=123, the browser breaks it into several parts:

1.2 DNS Resolution: Domain → IP Address1.2 DNS Resolution: Domain → IP Address

Computers don't understand domain names; they only understand IP addresses (like 93.184.216.34). DNS is the internet's "phone book."Computers don't understand domain names; they only understand IP addresses (like 93.184.216.34). DNS is the internet's "phone book."

Browser cache → System cache → Router cache → ISP DNS → Root name server ↓ Hit = use directly; miss = check next level

1.3 TCP Three-Way Handshake1.3 TCP Three-Way Handshake

After finding the IP address, the browser needs to "establish a connection" with the server. TCP uses a three-way handshake to ensure both sides are ready:After finding the IP address, the browser needs to "establish a connection" with the server. TCP uses a three-way handshake to ensure both sides are ready:

Client → Server: Hello, I'd like to connect (SYN) Server → Client: OK, I'm ready (SYN + ACK) Client → Server: Received, let's start communicating (ACK)

If using HTTPS, an additional TLS handshake is needed to negotiate encryption.If using HTTPS, an additional TLS handshake is needed to negotiate encryption.

1.4 Sending the HTTP Request1.4 Sending the HTTP Request

After the connection is established, the browser sends the HTTP request message:After the connection is established, the browser sends the HTTP request message:

GET /books?id=123 HTTP/1.1 Host: api.example.com Accept: application/json Authorization: Bearer eyJhbGci... User-Agent: Chrome/120.0

------

2. Network Transmission: The Request on the Road2. Network Transmission: The Request on the Road

2.1 Routing and Forwarding2.1 Routing and Forwarding

After leaving your computer, the request passes through multiple routers for forwarding, like a package going through multiple transit stations:After leaving your computer, the request passes through multiple routers for forwarding, like a package going through multiple transit stations:

Your computer → Home router → ISP network → Backbone network → Target data center

Each router decides the "next hop" based on the IP address. You can use the traceroute command to see which nodes a request passes through.Each router decides the "next hop" based on the IP address. You can use the traceroute command to see which nodes a request passes through.

2.2 CDN Acceleration2.2 CDN Acceleration

If the target website uses a CDN (Content Delivery Network), the request may not need to reach the origin server:If the target website uses a CDN (Content Delivery Network), the request may not need to reach the origin server:

The essence of CDN is "pre-placing content as close to users as possible."The essence of CDN is "pre-placing content as close to users as possible."

2.3 Load Balancing2.3 Load Balancing

Large websites don't have just one server. A load balancer distributes requests across multiple servers:Large websites don't have just one server. A load balancer distributes requests across multiple servers:

User requests → Load balancer → Server A (30% traffic) → Server B (30% traffic) → Server C (40% traffic)

Common distribution strategies:Common distribution strategies:

------

3. Server Processing: What Happens in the Kitchen3. Server Processing: What Happens in the Kitchen

After the request arrives at the server, it goes through multiple layers of processing.After the request arrives at the server, it goes through multiple layers of processing.

3.1 Web Server (Nginx / Apache)3.1 Web Server (Nginx / Apache)

The first to receive the request is typically the web server, responsible for:The first to receive the request is typically the web server, responsible for:

3.2 Application Server Processing3.2 Application Server Processing

The web server forwards the request to the application server (Node.js, Spring, Django, etc.). The processing flow:The web server forwards the request to the application server (Node.js, Spring, Django, etc.). The processing flow:

Request enters → Middleware chain → Route matching → Controller → Service layer → Data access layer

What middleware does:What middleware does:

1. Parse request body (JSON, form data)Parse request body (JSON, form data)
2. Verify identity (check Token)Verify identity (check Token)
3. Check permissions (can this user access this endpoint?)Check permissions (can this user access this endpoint?)
4. Log (who accessed what, when)Log (who accessed what, when)

3.3 Database Query3.3 Database Query

Most requests ultimately need to interact with the database:Most requests ultimately need to interact with the database:

CODE 📋 Salin📋 Copy

Application code: SELECT * FROM books WHERE id = 123 ↓ Database engine: Parse SQL → Query optimization → Execution plan → Read data ↓ Return result: { id: 123, title: "xxx", price: 59.9 }

💡 Tips Praktis💡 Pro Tip

Network transmission is typically millisecond-level, application logic is fast too, but an unindexed database query can take several seconds or even tens of seconds. So "slow requests" are most likely caused by slow database queries.Network transmission is typically millisecond-level, application logic is fast too, but an unindexed database query can take several seconds or even tens of seconds. So "slow requests" are most likely caused by slow database queries.

------

4. Response Return: The Data's Journey Back4. Response Return: The Data's Journey Back

4.1 Constructing the HTTP Response4.1 Constructing the HTTP Response

After processing, the server constructs the response message:After processing, the server constructs the response message:

http 📋 Salin📋 Copy

HTTP/1.1 200 OK Content-Type: application/json Content-Encoding: gzip Cache-Control: max-age=3600 {"id": 123, "title": "xxx", "price": 59.9}

Component	Content
Status line	Protocol version + Status code (200 success, 404 not found, 500 server error)
Response headers	Data format, caching policy, compression method, etc.
Response body	The actual data content (JSON, HTML, etc.)

4.2 Data Compression4.2 Data Compression

The server typically compresses the response body with gzip or brotli to reduce transmission size:The server typically compresses the response body with gzip or brotli to reduce transmission size:

Compression Algorithm	Compression Ratio	Speed
gzip	~70%	Fast
brotli	~80%	Slower but better compression

A 100KB JSON file might be only 20-30KB after compression.A 100KB JSON file might be only 20-30KB after compression.

4.3 Browser Rendering4.3 Browser Rendering

After the browser receives the response:After the browser receives the response:

1. Parse HTML → Build DOM treeParse HTML → Build DOM tree
2. Parse CSS → Build style treeParse CSS → Build style tree
3. Merge → Generate render treeMerge → Generate render tree
4. Layout → Calculate each element's position and sizeLayout → Calculate each element's position and size
5. Paint → Draw pixels onto the screenPaint → Draw pixels onto the screen

------

5. Full-Chain Optimization: Every Layer Can Be Faster5. Full-Chain Optimization: Every Layer Can Be Faster

5.1 Optimization Methods at Each Layer5.1 Optimization Methods at Each Layer

Layer	Optimization Method	Effect
DNS	DNS prefetching, use fast DNS services	Reduce DNS query time
Network	CDN, HTTP/2, connection reuse	Reduce transmission latency
Server	Caching (Redis), async processing	Reduce processing time
Database	Indexes, query optimization, read-write splitting	Reduce query time
Frontend	Lazy loading, code splitting, asset compression	Reduce rendering time

5.2 Caching: The Most Effective Optimization5.2 Caching: The Most Effective Optimization

Caching exists at every layer of the request chain:Caching exists at every layer of the request chain:

CODE 📋 Salin📋 Copy

Browser cache → CDN cache → Reverse proxy cache → Application cache (Redis) → Database cache

💡 Tips Praktis💡 Pro Tip

Trading space for time. Store computed results so next time you can use them directly without recomputing. Every 10% improvement in cache hit rate can multiply system performance.Trading space for time. Store computed results so next time you can use them directly without recomputing. Every 10% improvement in cache hit rate can multiply system performance.

5.3 Troubleshooting When Requests Fail5.3 Troubleshooting When Requests Fail

Symptom	Possible Problem Layer	Investigation Method
No response at all	DNS / Network	ping, nslookup
Connection timeout	Network / Server down	telnet, curl
Returns 4xx	Client request error	Check URL, parameters, Token
Returns 5xx	Server internal error	Check server logs
Slow response	Database / Application logic	Check slow query logs, APM tools

------

6. Summary6. Summary

The complete journey of an HTTP request:The complete journey of an HTTP request:

1. Browser: Parse URL → DNS query → TCP connection → Send requestBrowser: Parse URL → DNS query → TCP connection → Send request
2. Network: Route forwarding → CDN check → Load balancing distributionNetwork: Route forwarding → CDN check → Load balancing distribution
3. Server: Web server receives → Middleware processes → Business logic → Database queryServer: Web server receives → Middleware processes → Business logic → Database query
4. Return: Construct response → Compress → Network transmission → Browser renderingReturn: Construct response → Compress → Network transmission → Browser rendering
💡 Tips Praktis💡 Pro Tip

When you can draw the complete request chain in your mind, you'll be able to quickly identify which layer has a problem no matter what issue you encounter. This is the key leap from "junior developer" to "someone who can independently troubleshoot problems."When you can draw the complete request chain in your mind, you'll be able to quickly identify which layer has a problem no matter what issue you encounter. This is the key leap from "junior developer" to "someone who can independently troubleshoot problems."

------

Further ReadingFurther Reading

• [HTTP Documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP) — MDN's HTTP documentation[HTTP Documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP) — MDN's HTTP documentation
• [High Performance Browser Networking](https://hpbn.co/) — Browser network performance optimization[High Performance Browser Networking](https://hpbn.co/) — Browser network performance optimization
• [What happens when...](https://github.com/alex/what-happens-when) — The classic "what happens after you type a URL" deep dive[What happens when...](https://github.com/alex/what-happens-when) — The classic "what happens after you type a URL" deep dive
← SebelumnyaPrevious4-server-and-backend/rate-limiting-backpressure4-server-and-backend/rate-limiting-backpressure SelanjutnyaNext →4-server-and-backend/search-engines4-server-and-backend/search-engines