《从点击到响应：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（🔒）图标背后的秘密