访问网页的全过程笔记

一、用户发起请求

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 构造请求报文

http 复制代码

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 复制代码

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，可能复用连接，不立即关闭。

九、总结：网页访问全过程流程图

plaintext 复制代码

[浏览器输入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