在前端面试中，HTTP 协议几乎是必问环节。从 OSI 七层模型，到 TCP/UDP 区别，再到 HTTP 各版本特性与优化手段，都能考察候选人的网络基础与项目实践经验。本文帮你系统梳理一遍，方便面试前复盘。
一、基础回顾
OSI 七层协议
从下到上依次为：
- 物理层
- 数据链路层
- 网络层（IP）
- 传输层（TCP/UDP）
- 会话层
- 表示层
- 应用层（HTTP/FTP/SMTP 等）
HTTP 属于应用层协议，基于 TCP/IP 进行传输。
TCP 基础
- 三次握手：保证双方建立可靠连接。
- 四次挥手：保证连接可靠关闭，数据不会丢失。
TCP vs UDP
- TCP：面向连接、可靠、按序到达，适合网页、文件传输。
- UDP：无连接、不保证顺序、轻量高效，适合视频、语音、实时传输。
二、HTTP 各个版本的演进
HTTP 0.9
- 1991 年最早的版本，只支持 GET 请求。
- 响应只有 HTML 文本，没有请求头和响应头。
- 无法传输图片、CSS、JS，只能加载简单网页。
HTTP 1.0
- 引入 请求头（Header） ，可传输图片、音频等多媒体数据。
- 支持 Cookie，但仍然是无状态协议。
- 缺点：每次请求都要重新建立 TCP 连接 → 大量性能开销。
HTTP 1.1
- 长连接（keep-alive）
一个 TCP 连接可处理多个请求，避免频繁握手开销。 - 管道化（pipelining）
可以同时发多个请求，但响应必须按顺序返回 → 出现队头阻塞。 - 分块传输（chunked transfer）
支持动态内容，不必等所有数据准备好再发送。 - 问题：队头阻塞 + 同域名并发连接数限制（浏览器一般最多 6 个）。
👉 前端优化手段
- 图片懒加载、路由懒加载
- 文件合并（减少请求）
- Base64 小图内嵌 / iconfont 替代小图标
- CDN 域名分片（domain sharding）
- 开启 Gzip 压缩
- 利用浏览器缓存（强缓存 + 协商缓存）
HTTP 2.0
- 多路复用（Multiplexing）
一个 TCP 连接上可并发多个请求和响应，不再受队头阻塞影响。 - 二进制分帧
请求/响应数据分成小帧交错发送，每个帧有唯一标识符，客户端按 ID 重组。 - 头部压缩（HPACK）
避免重复传输相同的 Header，大幅减少带宽。 - 服务器推送（Server Push）
服务端可主动推送资源（如首页 HTML 请求时，顺便推送 CSS、JS）。
HTTP 3.0
- 基于 QUIC 协议，传输层改用 UDP，绕过了 TCP 队头阻塞。
- 内置 TLS 加密，传输更安全。
- 连接迁移：网络环境切换时（如 WiFi → 4G）保持不断开。
- 已被主流浏览器和 CDN 支持，是未来趋势。
三、HTTPS 简单理解
- HTTP + TLS（SSL），所有数据经过加密传输。
- 防止窃听与篡改，保障数据安全。
- 缺点：握手和证书验证会增加性能开销，但现代硬件和 HTTP/2 已大幅缓解。
四、GET 与 POST 区别
| 对比点 | GET | POST |
|---|---|---|
| 用途 | 获取数据 | 提交数据 |
| 数据传输 | URL 参数明文 | 请求体 |
| 安全性 | 不安全，容易被缓存 | 相对安全（配合 HTTPS） |
| 长度限制 | URL 最多 ~2048 字节 | 理论上无限制 |
| 幂等性 | 幂等（多次请求结果相同） | 非幂等，可能新增/修改数据 |
| 缓存 | 可缓存，可收藏为书签 | 不会缓存，不能做书签 |
| 常见状态码 | 200 OK | 201 Created |
在实际开发中，通常结合 RESTful API：
- GET → 查询
- POST → 新建
- PUT/PATCH → 修改
- DELETE → 删除
- OPTIONS → 预检请求（CORS 跨域场景）
五、面试亮点总结
- HTTP 1.1 队头阻塞 → HTTP 2 多路复用 → HTTP 3 基于 UDP，要能清楚说明性能优化背景。
- 面试时不仅讲协议，还要结合 前端优化手段（缓存、懒加载、CDN、压缩等）。
- GET/POST 区别不能只背八股，要结合 RESTful API 和安全性。
- 如果能提到 浏览器并发限制、域名分片、HTTP/3 的连接迁移，会让面试官觉得你理解深入。
📌 一句话总结：
HTTP 的发展史，就是为了解决性能瓶颈和安全问题。
- 1.0 → 功能更丰富
- 1.1 → 解决连接复用问题
- 2.0 → 解决队头阻塞，提升并发
- 3.0 → 基于 UDP，彻底优化传输性能
