访问网页的全过程笔记
一、用户发起请求
1.1 输入 URL
用户在浏览器地址栏输入一个网址，例如：
https://www.example.com/index.html
1.2 浏览器解析 URL
- 协议（scheme）：
https - 主机（host）：
www.example.com - 端口（port）：默认是 443（HTTPS）、80（HTTP）
- 路径（path）：
/index.html
二、DNS 解析（域名解析）
2.1 本地缓存查找
- 浏览器缓存
- 系统缓存
- hosts 文件
2.2 向 DNS 服务器查询
若缓存未命中，则浏览器向配置的 DNS 服务器（通常是运营商提供）发起递归查询，查找域名对应的 IP 地址。
结果示例：
www.example.com → 93.184.216.34
三、建立 TCP 连接（三次握手）
以 HTTPS 为例，首先要建立 TCP 连接：
三次握手过程：
- 客户端 → 服务器：发送 SYN 报文（请求建立连接）
- 服务器 → 客户端：返回 SYN+ACK 报文
- 客户端 → 服务器：发送 ACK 报文，连接建立完成
对于 HTTPS，还需进行 TLS/SSL 握手，详见第 4 节。
四、HTTPS 安全通信（TLS 握手）
4.1 TLS 握手主要过程
- 客户端 Hello：告知支持的加密算法、生成随机数
- 服务器 Hello：返回证书、公钥、选择加密算法
- 客户端验证证书，生成对称密钥，并使用公钥加密发送
- 双方使用对称密钥通信
目的：保证数据机密性、完整性、身份认证
五、浏览器发起 HTTP 请求
5.1 构造请求报文
GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 ...
Accept: text/html,...
Connection: keep-alive
5.2 发送请求
通过之前建立的 TCP（或 TLS）连接，将 HTTP 请求发送给服务器。
六、服务器处理请求
6.1 接收请求
服务器接收到客户端请求，并解析请求内容。
6.2 查找资源
服务器根据 URL 路径在本地磁盘或数据库中查找 index.html 页面。
6.3 构造响应报文
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024
...<html>...</html>
七、浏览器接收响应并渲染页面
7.1 接收响应数据
浏览器接收到服务器返回的 HTML 页面数据。
7.2 渲染流程（简略）
- HTML 解析：生成 DOM 树
- CSS 解析：生成 CSSOM 树
- 合并 DOM + CSSOM：生成 Render Tree
- 布局（Layout）：计算各元素位置
- 绘制（Paint）：绘制像素
- 合成（Composite）：显示到屏幕上
7.3 处理资源
HTML 中包含的其他资源（如 JS、CSS、图片）也会并行发起请求。
八、TCP 连接关闭（四次挥手）
四次挥手过程：
- 客户端 → 服务器：发送 FIN，表示请求关闭连接
- 服务器 → 客户端：ACK 确认
- 服务器 → 客户端：服务器处理完毕后发送 FIN
- 客户端 → 服务器：ACK 确认关闭
若启用
Connection: keep-alive，可能复用连接，不立即关闭。
九、总结：网页访问全过程流程图
[浏览器输入URL]↓
[DNS 解析 → 获取IP地址]↓
[TCP三次握手建立连接]↓
[（HTTPS）TLS握手建立安全通道]↓
[发送HTTP请求]↓
[服务器处理并返回响应]↓
[浏览器渲染页面]↓
[请求页面资源（JS/CSS/图片等）]↓
[TCP连接关闭（四次挥手）]
十、补充说明
常见优化技术
- DNS 预解析（
<link rel="dns-prefetch">） - HTTP/2 多路复用
- CDN 静态资源分发
- 缓存机制（如 ETag、Last-Modified）
- 资源压缩（Gzip、Brotli）
相关协议
| 协议层 | 协议 |
|---|---|
| 应用层 | HTTP / HTTPS |
| 传输层 | TCP |
| 网络层 | IP |
| 链路层 | Ethernet |