前言
当我们在浏览器地址栏输入 www.example.com 并按下回车时，看似简单的操作背后隐藏着一系列复杂的网络交互过程。本文将以「访问一个 HTTPS 网站」为例，深入解析从输入网址到页面渲染完成的完整链路。
一、域名解析（DNS）
1. 本地缓存查询
- 浏览器缓存：检查是否缓存过该域名的 IP 地址。
- 系统缓存：查询操作系统 Hosts 文件（如 Windows 的
C:\Windows\System32\drivers\etc\hosts）。 - 路由器缓存：检查家庭/公司路由器的 DNS 记录。
2. 递归查询
若本地无缓存，浏览器向 本地 DNS 服务器（如 8.8.8.8）发起请求：
- 本地 DNS 查询 根域名服务器（Root DNS），获取顶级域（如
.com）的地址。 - 向 顶级域名服务器 查询权威 DNS 服务器地址（如
example.com的 NS 记录）。 - 向 权威 DNS 服务器 获取最终 IP（如
93.184.216.34）。
3. 结果缓存
IP 地址被缓存在本地，TTL（Time to Live）决定有效期。
二、建立 TCP 连接
1. 三次握手
浏览器通过 IP 地址与服务器建立 TCP 连接：
- SYN：客户端发送同步报文（Seq=100）。
- SYN-ACK：服务器回应同步确认（Seq=300, Ack=101）。
- ACK：客户端确认（Ack=301）。
2. 优化策略
- TCP Fast Open (TFO)：在 TLS 握手期间提前发送数据。
- 端口复用：HTTP/2 和 HTTP/3 通过单一连接处理多请求。
三、TLS 安全握手（HTTPS）
1. 协商加密套件
客户端发送支持的 TLS 版本和加密算法（如 TLS_AES_256_GCM_SHA384）。
2. 证书验证
服务器返回数字证书，浏览器验证：
- 证书链是否由可信 CA（如 Let's Encrypt）签发。
- 域名是否匹配（防止钓鱼网站）。
- 证书是否过期。
3. 密钥交换
通过 ECDHE 算法 生成会话密钥，后续通信使用对称加密（如 AES-GCM）。
四、发送 HTTP 请求
1. 请求行
GET /index.html HTTP/1.1
2. 请求头
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml
Cookie: session_id=abc123
3. 请求体
GET 请求通常无 Body，POST 请求包含表单数据或 JSON。
五、服务器处理请求
1. 负载均衡
请求可能被转发到集群中的某台服务器（如通过 Nginx 的 upstream 配置）。
2. 业务逻辑
- 静态资源：直接返回 HTML/CSS/JS 文件。
- 动态内容：通过 PHP、Node.js 或 Java 生成响应。
3. 数据库交互
查询 MySQL 或 Redis 获取数据（如用户信息）。
六、接收 HTTP 响应
1. 响应行
HTTP/1.1 200 OK
2. 响应头
Content-Type: text/html; charset=UTF-8
Cache-Control: max-age=3600
Set-Cookie: session_id=def456; Path=/; Secure
3. 响应体
<!DOCTYPE html>
<html>
<head><title>Example</title></head>
<body>Hello World!</body>
</html>
七、浏览器渲染
1. 解析 HTML
- 构建 DOM 树（Document Object Model）。
- 遇到
<link>和<script>时阻塞渲染（除非标记async/defer）。
2. 解析 CSS
生成 CSSOM 树（CSS Object Model），与 DOM 合并为渲染树。
3. 布局与绘制
- Layout：计算元素的位置和大小（如 Flexbox 布局）。
- Paint：将渲染树转换为屏幕像素。
- Composite：层合成优化（如 GPU 加速）。
4. 执行 JavaScript
- 触发
DOMContentLoaded事件（DOM 解析完成）。 - 所有资源加载完成后触发
load事件。
八、连接终止
1. TCP 四次挥手
- FIN：客户端发送终止请求（Seq=500）。
- ACK：服务器确认（Ack=501）。
- FIN：服务器发送终止请求（Seq=700）。
- ACK：客户端确认（Ack=701）。
2. 持久连接
HTTP/1.1 默认启用 Keep-Alive，复用同一 TCP 连接处理多个请求。
九、性能优化实践
1. CDN 加速
静态资源缓存在边缘节点（如 Cloudflare）。
2. 缓存策略
- 强缓存：
Cache-Control: max-age=31536000（1 年）。 - 协商缓存：
ETag和Last-Modified验证资源 freshness。
3. 协议升级
- HTTP/2：多路复用、头部压缩、服务器推送。
- HTTP/3：基于 QUIC 协议，解决队头阻塞。
十、总结
从输入网址到页面显示，经历了 DNS 解析 → TCP 连接 → TLS 握手 → HTTP 请求 → 服务器处理 → 响应返回 → 浏览器渲染 的完整链路。每个环节都可能成为性能瓶颈，理解其原理是优化 Web 体验的关键。
附录：关键协议与工具
| 工具/协议 | 作用 |
|---|---|
| Wireshark | 抓包分析网络层行为 |
| Chrome DevTools | 调试渲染性能与网络请求 |
| HTTP/3 | 基于 UDP 的低延迟传输协议 |
| Brotli | 比 Gzip 更高效的压缩算法 |
