04 · HTTP 与 HTTPS 深入
前端每天都在发请求，但 HTTP 本身"怎么走、怎么缓存、怎么复用连接"常被忽略。本篇站在协议侧讲方法、状态码、缓存与连接管理；A04 浏览器与网络 讲浏览器侧表现，两者分工。
速览卡
| 项 | 内容 |
|---|---|
| 一句话定位 | HTTP/HTTPS 协议侧的完整心智 |
| 核心内容 | 方法幂等、状态码语义、缓存协商、连接复用、版本演进 |
| 读完能回答 | 304 是怎么来的？为什么 HTTP2 要连复用？HTTPS 多了什么？ |
| 相关板块 | N03 DNS ｜ N05 TLS ｜ N11 抓包 |
一、请求模型：一次请求的解剖
text
请求行 GET /api/users HTTP/1.1
请求头 Host / User-Agent / Accept / Cookie ...
空行
请求体 （GET 通常无体）响应同理：状态行 + 响应头 + 空行 + 响应体。
记住"请求行 / 头 / 空行 / 体"四段式，抓包时一眼能定位问题。
二、方法与幂等
| 方法 | 幂等 | 用途 | 注意 |
|---|---|---|---|
| GET | 是 | 查询 | 不应有副作用 |
| POST | 否 | 创建 / 触发动作 | 重试可能重复创建 |
| PUT | 是 | 整体替换 | 全量语义 |
| PATCH | 否 | 局部修改 | 需小心并发 |
| DELETE | 是 | 删除 | 幂等指多次删除结果一致 |
幂等 = 重复执行结果一致。网络重试是常态，非幂等接口必须配合幂等键（见 C04 一致性）。
三、状态码：别只会 200 和 500
| 分类 | 代表 | 语义 |
|---|---|---|
| 2xx | 200 / 201 / 204 | 成功 |
| 3xx | 301 / 302 / 304 | 重定向 / 缓存命中 |
| 4xx | 400 / 401 / 403 / 404 / 429 | 客户端问题 |
| 5xx | 500 / 502 / 503 / 504 | 服务端问题 |
| 易混 | 区分 |
|---|---|
| 401 vs 403 | 401 未认证，403 无权限 |
| 301 vs 302 | 301 永久，302 临时 |
| 502 vs 504 | 502 上游返回异常，504 上游超时 |
四、缓存：怎么判断要不要重新下载
text
首次 200 + Cache-Control: max-age=3600
再次 → 未过期 → 直接用本地（强缓存）
已过期 → 带 If-None-Match → 服务端回 304 → 用本地| 头 | 作用 |
|---|---|
Cache-Control: max-age | 强缓存有效期（相对时间） |
Expires | 强缓存绝对过期时间（已不推荐） |
ETag | 内容指纹，用于协商 |
Last-Modified | 修改时间，用于协商（弱于 ETag） |
If-None-Match | 携带 ETag 去询问 |
静态资源用强缓存 + 文件名 hash，接口用协商缓存或禁缓存。把缓存配置写进响应头，比前端代码里折腾更可靠。
五、连接管理：HTTP 各版本在省什么
| 版本 | 连接模型 | 解决的问题 |
|---|---|---|
| HTTP/1.0 | 每请求一条连接 | 简单但开销大 |
| HTTP/1.1 | Keep-Alive 复用 | 省握手，但队头阻塞 |
| HTTP/2 | 多路复用 | 单连接并行流，解决队头阻塞 |
| HTTP/3 | QUIC / UDP | 再省 TLS + TCP 握手，抗丢包 |
队头阻塞：HTTP/1.1 一条连接一次只能处理一个请求；HTTP/2 用流并行解决，但 TCP 丢包仍会阻塞整条连接，HTTP/3 才真正摆脱。
六、HTTPS 多做了什么
text
HTTP = 明文请求/响应
HTTPS = TCP 之后先做 TLS 握手 → 加密传输HTTPS 解决三件事：加密（防窃听）、完整性（防篡改）、身份认证（防冒充）。代价是握手多一个 RTT，所以有会话复用（详见 N05 TLS）。
七、自检清单
- [ ] 能画出一次 HTTP 请求的四段式结构
- [ ] 知道 GET/POST/PUT/PATCH/DELETE 的幂等语义
- [ ] 能区分 401/403、301/302、502/504
- [ ] 能说出强缓存与协商缓存的全过程
- [ ] 能讲清 HTTP/1.1 → 2 → 3 各自解决了什么
八、常见误区
| 误区 | 事实 |
|---|---|
| "304 是重新下载" | 304 表示"未修改，用本地缓存" |
| "POST 可以安全重试" | POST 不幂等，重试可能重复创建 |
| "HTTP/2 没有队头阻塞" | 应用层解决了，TCP 层仍有 |
| "HTTPS 只是加密" | 还有完整性与身份认证 |
| "禁缓存就前端删头" | 缓存由服务端响应头主导 |
九、动手练习
练习 A：看一次真实请求
打开浏览器 DevTools → Network，找一个静态资源，观察响应头里的 Cache-Control 与 ETag，再强制刷新看是否变 304。
练习 B：测连接复用
DevTools → Network 里看 HTTP/1.1 页面加载多个图片时是否并发在同一连接；对比 HTTP/2 站点（如 google）的表现。
练习 C：curl 看握手
curl -v https://example.com 观察 TLS handshake 与 HTTP/2 输出，对照本篇第六节。
相关文档
本区
- 03 · DNS 原理与排查 —— 请求前的域名解析
- 05 · TLS 与证书 —— HTTPS 的协议细节
- 11 · 抓包与网络调试 —— 看真实请求流
其他域
- 浏览器与网络 —— 浏览器侧的缓存与 CORS
- API 设计：REST / gRPC / GraphQL —— 状态码与版本设计
- IN 网络面试题 —— HTTP 高频面试题