《从点击到响应：HTTP 请求是如何传出去的》

🚀 第三篇：《从点击到响应：HTTP 请求是如何传出去的》

当你点下一个网页链接时，屏幕上出现的并不是魔法。

在你"点击"的那一瞬间，浏览器、操作系统、网络设备、服务器之间，上演了一场精密协作的"数据接力赛"。

今天，我们就来完整拆解这场传输旅程：

从 DNS 查询 到 TCP 握手 ，再到 HTTP 报文的发送与响应返回。

一、点击网页时，到底发生了什么？

假设你在浏览器中输入网址：

复制代码

https://www.baidu.com

然后按下回车。

从这一刻开始，浏览器就像一个小快递员，要找到"百度服务器"这个目的地，把请求送过去。

整个过程分为 5 个关键阶段：

DNS 解析：查找目标服务器的"家庭住址"（IP 地址）
TCP 连接（三次握手）：建立可靠连接通道
发送 HTTP 请求：把请求报文发出去
服务器处理并返回响应
关闭连接（四次挥手）

让我们一层层拆开👇

二、DNS 解析：找到"百度"的家

浏览器看到 www.baidu.com 这个域名时，它其实不知道去哪儿。

于是它得先问一句：

"请问 www.baidu.com 的 IP 地址是多少？"

DNS（Domain Name System）就像一个巨大的"互联网电话簿"，用来把域名翻译成 IP 地址。

🧭 查询流程如下：

浏览器先查 本地缓存（之前访问过的）
如果没有，就问操作系统 DNS 缓存
再没有，就问 本地 DNS 服务器（比如你路由器或运营商提供的）
最后递归查询到根域名服务器 → 顶级域（.com）→ 二级域（baidu.com）

最终得到答案：

复制代码

www.baidu.com → 220.181.38.148

💡 类比：

就像你想寄信给"王小明"，但你只知道名字，不知道地址。

于是你查电话簿（DNS），找到他的地址，然后才能寄信。

三、TCP 三次握手：正式打招呼

找到 IP 地址后，浏览器就要和服务器"建立联系"了。

HTTP 通信是基于 TCP 的，而 TCP 是一个"面向连接、可靠传输"的协议。

所以它需要先**三次握手（Three-way Handshake）**👇

🫱 第一步：客户端打招呼（SYN）

客户端（浏览器）发送：

复制代码

SYN=1, seq=x

意思是："你好，我想建立连接。"

🤝 第二步：服务器回应（SYN + ACK）

服务器回复：

复制代码

SYN=1, ACK=x+1, seq=y

意思是："我收到了你的请求，也准备好了。"

🙌 第三步：客户端确认（ACK）

客户端再回应：

复制代码

ACK=y+1

表示："收到确认，我们可以开始传输数据了！"

此时，连接建立完成，HTTP 报文就可以在这条安全可靠的通道上传输了。

💡类比生活场景：

A（浏览器）：喂，我能跟你说话吗？（第一次握手）

B（服务器）：可以，我听得见。你能听到我吗？（第二次握手）

A：能听到，我们聊吧！（第三次握手）

四、发送 HTTP 请求

三次握手后，浏览器立刻把第一封 HTTP 请求信寄出去：

复制代码

GET / HTTP/1.1
Host: www.baidu.com
User-Agent: Mozilla/5.0
Accept: text/html
Connection: keep-alive

然后这封信从你电脑 → 路由器 → 运营商 → 骨干网 → 数据中心 → 百度服务器，

一路传递，直到到达目的地。

五、服务器处理请求并返回响应

服务器收到请求后，会：

根据 URL 找到相应的资源（如 index.html）
读取内容、组装响应报文
通过 TCP 通道回传给客户端

响应内容可能是网页、图片、JSON 数据等，例如：

复制代码

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 5120

<html>
<body>欢迎来到百度</body>
</html>

六、浏览器渲染网页

当浏览器接收到响应报文后，它会：

解析 HTML
下载其中引用的 CSS、JS、图片等资源
根据 DOM + CSSOM 生成渲染树
最终绘制到屏幕上

这时，你看到的网页才真正"出现"在屏幕上。

七、TCP 四次挥手：优雅告别

当通信结束后，TCP 不会直接"掐断"，而是要**四次挥手（Four-way Handshake）**确保双方都准备好了断开连接。

👋 第一步

客户端：我要关闭连接（FIN=1）

👋 第二步

服务器：我知道了（ACK）

👋 第三步

服务器：我这边也传完了，可以关了（FIN=1）

👋 第四步

客户端：收到，正式断开（ACK）

💡类比：

双方通话结束时，A 说"我挂了啊"，B 回"好"，B 再说"我也挂了"，A 回"好，拜拜"。

--- 优雅收尾，防止信息丢失。

八、完整过程一图总结 🧭

复制代码

[浏览器输入网址]
       ↓
[DNS解析] → 获取服务器IP
       ↓
[TCP三次握手] → 建立连接
       ↓
[发送HTTP请求报文]
       ↓
[服务器处理并返回响应]
       ↓
[浏览器渲染网页]
       ↓
[TCP四次挥手] → 断开连接

九、Wireshark 抓包实战演示（可选）

如果你想直观看这个过程，可以用 Wireshark 抓包：

打开 Wireshark，选择网卡
过滤条件输入：
复制代码
```
tcp.port == 443
```
打开浏览器访问一个 HTTPS 网站
你会看到：
- 三次握手（SYN、ACK）
- TLS 握手（加密通信前奏）
- HTTP 报文（请求与响应）
- 四次挥手

这就是整个 HTTP 通信的真实网络层数据！

🔚 十、总结与下一篇预告

阶段	作用
DNS 解析	找服务器 IP
TCP 三次握手	建立连接
发送 HTTP 报文	发出请求
服务器响应	返回内容
TCP 四次挥手	断开连接

下一篇我们要深入这一篇中最神秘的一环 ------

💥 第四篇：《HTTP 中的"握手"：从 TCP 到 TLS 的安全通信之旅》

这篇我们会讲：

TCP 三次握手的底层包结构
TLS（HTTPS）握手过程（公钥、私钥、证书验证）
用 Wireshark 观察 HTTPS 握手
浏览器 padlock（🔒）图标背后的秘密