Complete HTTP Request Lifecycle: From URL to Rendered Page
Complete HTTP Request LifecycleComplete HTTP Request Lifecycle: From URL to Rendered Page
Overview
The complete HTTP request process involves multiple stages from the moment a user enters a URL until the page is fully rendered in the browser. This journey encompasses network communication, server processing, and browser rendering mechanisms.
DNS Resolution
When a user enters a URL, the browser first performs DNS resolution to convert the domain name into an IP adress:
- Browser checks its own DNS cache
- If not found, checks the operating system's DNS cache
- If still not found, checks the hosts file
- If all previous steps fail, the browser sends a DNS query to the configured DNS server
TCP Three-Way Handshake
After obtaining the IP address, the browser establishes a TCP connection with the server:
- Client sends SYN packet to server
- Server responds with SYN-ACK packet
- Client sends ACK packet to server
HTTP Request and Response
Once the TCP connection is established, the browser sends an HTTP request:
// HTTP Request Structure
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html
Connection: keep-alive
The server processes the request and sends back an HTTP response:
// HTTP Response Structure
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
Connection: keep-alive
<html>
<head>...</head>
<body>...</body>
</html>
Browser Rendering Process
The browser processes the HTML response and renders the page through several steps:
1. DOM Tree Construction
The browser parses the HTML document and builds the Document Object Model (DOM) tree, representing the document's structure.
2. CSSOM Tree Construction
The browser parses CSS and builds the CSS Object Model (CSSOM) tree, representing the styles applied to the document.
3. Render Tree Construction
The browser combines the DOM and CSSOM trees to create the render tree, which contains only visible elements and their computed styles.
4. Layout
The browser calcultaes the position and size of each element in the render tree.
5. Painting
The browser draws the elements to the screen.
Window Object and Browser APIs
The Window object serves as the global object in browsers, providing access to various browser APIs:
// Window object example
const browserInfo = {
width: window.innerWidth,
height: window.innerHeight,
url: window.location.href,
userAgent: window.navigator.userAgent
};
// Common Window APIs
window.alert('Hello, World!');
window.open('https://example.com');
window.scrollTo(0, 500);
Nginx Proxy Configuration
Nginx often serves as a reverse proxy for web applications:
// Nginx configuration example
server {
listen 80;
server_name example.com;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend-server;
proxy_set_header Host $host;
}
}
Webpack Optimization Techniques
Modern web applications use build tools like Webpack to optimize asset delivery:
// Webpack splitChunks configuration
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: -10
},
antd: {
test: /[\\/]node_modules[\\/](@ant-design|antd)[\\/]/,
name: 'antd',
priority: -9
}
}
}
}
};
Performance Considerations
Several factors impact page loading performance:
- DNS resolution time
- TCP connection establishment
- HTTP request/response size
- Number of HTTP requests
- Rseource compression
- Caching strategies
