Mastering Greater Frontend

HTTP 的演化

HTTP 不是一成不变的，它经历了三个主要版本的演进：

HTTP/1.1（1999）：目前仍广泛使用
HTTP/2（2015）：引入多路复用等特性
HTTP/3（2022）：基于 QUIC 协议，解决 TCP 问题

HTTP/1.1 的问题

连接复用

HTTP/1.1 默认支持持久连接（Connection: keep-alive），但同一连接只能串行请求：

请求1 → ← 响应1 → 请求2 → ← 响应2 → 请求3 → ← 响应3

这就是 HOL（Head of Line）阻塞问题。

解决 HOL 的方法

域名分片：static.example.com, api.example.com
内联资源：把 CSS/JS 内联到 HTML
合并请求：把小文件合并成一个大文件

HTTP/2 的改进

多路复用

HTTP/2 允许在同一个 TCP 连接上并行传输多个请求和响应：

请求1 →→ 请求2 →→ 请求3 →→ ...
响应1 ←← 响应2 ←← 响应3 ←← ...

彻底解决了 HOL 阻塞问题。

其他改进

Header 压缩：使用 HPACK 压缩 HTTP Header
服务端推送：服务端可以主动推送资源
流优先级：可以指定请求的优先级

HTTP/3 的新特性

QUIC 协议

HTTP/3 基于 QUIC（Quick UDP Internet Connections），使用 UDP 而不是 TCP。

优势

0-RTT / 1-RTT 握手：建立连接更快
无 HOL 阻塞：UDP 不存在 TCP 的 HOL 问题
连接迁移：网络切换时（如 WiFi → 移动网络）不需要重建连接

HTTP 请求方法

方法	幂等	缓存	用途
GET	✅	✅	获取资源
POST	❌	❌	创建资源
PUT	✅	❌	更新资源（整体）
PATCH	❌	❌	部分更新
DELETE	✅	❌	删除资源

GET vs POST

GET：请求参数在 URL 中，有长度限制（浏览器限制约 2KB），可以被缓存

POST：请求参数在 body 中，无长度限制，不被缓存

HTTP 状态码

2xx 成功

200 OK：请求成功
201 Created：资源创建成功
204 No Content：成功但无返回内容（如 DELETE）

3xx 重定向

301 Moved Permanently：永久重定向，浏览器会缓存
302 Found：临时重定向，浏览器不缓存
304 Not Modified：使用缓存

4xx 客户端错误

400 Bad Request：请求格式错误
401 Unauthorized：未认证
403 Forbidden：无权限
404 Not Found：资源不存在

5xx 服务端错误

500 Internal Server Error：服务端错误
502 Bad Gateway：网关错误
503 Service Unavailable：服务不可用

常见的 HTTP Header

请求头

Accept：告诉服务端客户端能接受的内容类型
Accept-Encoding：接受的压缩格式
Cache-Control：缓存控制指令
Authorization：认证信息

响应头

Content-Type：内容类型，如 text/html; charset=utf-8
Content-Length：内容长度
Cache-Control：缓存指令
ETag：资源版本标识

fetch API

// 基础用法
const response = await fetch('/api/users');
const users = await response.json();

// POST 请求
const response = await fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John' })
});

// 带错误处理的
try {
  const response = await fetch('/api/users');
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }
  const data = await response.json();
} catch (err) {
  console.error('Fetch failed:', err);
}

这一章想说的

HTTP 的三个版本各有特点：

HTTP/1.1：广泛兼容，但存在 HOL 阻塞
HTTP/2：多路复用解决 HOL，支持服务端推送
HTTP/3：基于 UDP，解决 TCP 连接问题

理解 HTTP 协议是前端性能优化的基础——减少请求次数、减小请求体积、合理利用缓存，都是基于 HTTP 协议的理解。

HTTP 协议与网络请求