1. URL解析
- 步骤：浏览器解析URL（如
https://www.example.com），提取协议（https）、域名、端口（默认443）、路径（/）等。 - 关键点：非完整URL会补全（如
example.com→https://www.example.com）。
2. DNS域名解析
- 过程：
- 浏览器缓存 → 2. 本地Hosts文件 → 3. 本地DNS服务器 →4. 根DNS → 5. 顶级域（
.com） → 6. 权威DNS
- 结果：获取域名对应的IP地址（如
93.184.216.34）。 - 协议：基于UDP的DNS查询（端口53）。
3. 建立TCP连接（三次握手）
- 目的：确保可靠传输（HTTPS默认端口443）。
- 流程：
- 客户端发送
SYN=1, seq=x→ - 服务端回复
SYN=1, ACK=1, seq=y, ack=x+1→ - 客户端发送
ACK=1, seq=x+1, ack=y+1
- 结果：建立双向通信通道。
4. TLS/SSL握手（HTTPS）
- 目的：加密传输（以RSA算法为例）：
- 客户端发送支持的加密套件 + 随机数A →
- 服务端返回证书 + 选择的加密套件 + 随机数B →
- 客户端验证证书（CA签名、有效期、域名匹配）→
- 用证书公钥加密
Pre-Master Secret发送 → - 双方通过随机数A/B和Pre-Master生成会话密钥 →
- 开始对称加密通信（如AES-256）。
5. 发送HTTP请求
- 请求报文：
GET / HTTP/1.1
Host: www.example.com
User-Agent: Chrome/91.0
Accept: text/html
Cookie: session_id=abc123- 关键字段：
Host：虚拟主机支持（一个IP多个网站）Cookie：携带会话状态
6. 服务器处理请求
- 步骤：
- Web服务器（如Nginx）接收请求 →
- 静态资源直接返回，动态请求转发给后端（如Python/Django） →
- 数据库查询（如MySQL）→ 生成HTML响应。
- 可能优化：
- CDN缓存静态资源
- 负载均衡（如AWS ALB）
7. 接收HTTP响应
- 响应报文：
HTTP/1.1 200 OK
Server: nginx/1.18.0
Content-Type: text/html
Set-Cookie: new_session=xyz456
Content-Length: 1234
<!DOCTYPE html><html>...</html>- 状态码：
200：成功301/302：重定向404：资源不存在500：服务器错误
8. 浏览器解析渲染
- HTML解析：构建DOM树
- CSS解析：生成CSSOM树
- JavaScript执行：可能阻塞渲染（
async/defer优化） - 渲染树（Render Tree）：结合DOM和CSSOM
- 布局（Layout）：计算元素位置/大小
- 绘制（Paint）：像素级渲染
9. 连接释放（四次挥手）
- 流程：
- 客户端发送
FIN=1, seq=u→ - 服务端回复
ACK=1, ack=u+1→ - 服务端发送
FIN=1, seq=v→ - 客户端回复
ACK=1, ack=v+1
- 结果：双方释放连接资源。
10. 关键协议与角色
环节 |
协议/技术 |
设备/组件 |
域名解析 |
DNS (UDP 53) |
本地DNS服务器 |
传输层 |
TCP (可靠传输) |
操作系统协议栈 |
安全加密 |
TLS/SSL (如RSA/AES) |
服务器证书 |
应用层 |
HTTP/1.1 或 HTTP/2 |
Web服务器（Nginx/Apache） |
内容分发 |
CDN (边缘节点缓存) |
Akamai/Cloudflare |
通俗比喻
- DNS解析：像查通讯录，把朋友名字（域名）变成电话号码（IP）。
- TCP握手：打电话时的“喂-喂-听得到吗”确认过程。
- HTTPS加密：两人用密码本（会话密钥）对话，即使被窃听也看不懂。
- 渲染页面：收到乐高说明书（HTML）后，按步骤拼装成模型。
总结：从URL到页面展现，是DNS寻址 → TCP建联 → 加密协商 → 请求/响应 → 渲染的精密协作过程，涉及网络各层协议协同工作。