【HTTP重定向与缓存机制详解】

HTTP重定向与缓存机制详解

一、HTTP重定向（301/302）基础

1. 什么是重定向？

重定向是服务器告诉浏览器："你要找的资源不在这里，去另一个地方找吧"的过程。就像你去图书馆找书，管理员告诉你："这本书被移到了新书架"（301）或"这本书暂时在修复区"（302）。

2. 301与302的本质区别

301 (永久重定向)：资源永远搬家了，以后都在新地址

302 (临时重定向)：资源暂时不在这，临时去另一个地址找

3. 记忆技巧

301：数字"1"像根"竖杠"|，稳固不动 = 永久

302：数字"2"像个"弯钩"∩，弯弯绕绕 = 临时

4. 工作原理

http 复制代码

# 301示例
HTTP/1.1 301 Moved Permanently
Location: https://new-site.com

# 302示例
HTTP/1.1 302 Found
Location: https://temp-site.com

5. 使用场景

301使用场景：

网站升级（HTTP迁移到HTTPS）
域名变更
网站改版，旧URL更换
多域名整合

302使用场景：

网站维护跳转
未登录用户跳转
A/B测试
负载均衡

二、缓存机制

1. 缓存类型记忆法

强缓存："强"如猛虎，独立决策

Cache-Control（"Control"表示强势控制）
- max-age=秒数（最常用，如max-age=3600表示1小时）
- no-cache（强制协商）
- no-store（不缓存）
- public/private（是否允许中间缓存）
Expires（"Ex"表示到期，就像合同到期日）
- 具体的GMT时间（如：Wed, 11 Jun 2025 15:00:00 GMT）

协商缓存："协"如外交，需要双方沟通

ETag/If-None-Match（"Tag"像商品标签，用于匹配）
- 服务器：ETag: "abc123"
- 浏览器：If-None-Match: "abc123"
Last-Modified/If-Modified-Since（"Last"表示最后一次，好记）
- 服务器：Last-Modified: Wed, 11 Jun 2025 15:00:00 GMT
- 浏览器：If-Modified-Since: Wed, 11 Jun 2025 15:00:00 GMT

注意：协商缓存响应中也会带有Cache-Control/Expires头

用于设置新的过期时间
304响应通常会带上新的Cache-Control

2. 缓存判断流程

强缓存（浏览器独立判断）
判断依据：

Cache-Control（优先级更高）
- 检查max-age是否过期
- 检查其他指令（no-cache, no-store等）
Expires（作为后备）
- 检查时间是否过期
  工作流程：
浏览器：检查资源的Cache-Control
↓
如果有max-age且未过期 → 直接使用缓存（不发请求）
↓
如果没有Cache-Control → 检查Expires是否过期
↓
如果都过期或标记为no-cache → 进入协商缓存阶段

协商缓存（需要服务器参与）
判断依据：

ETag/If-None-Match（优先级更高）
Last-Modified/If-Modified-Since
工作流程：
浏览器：发起请求，带上缓存标识
- If-None-Match: "abc123"
- If-Modified-Since: Wed, 11 Jun 2025 15:00:00 GMT
  ↓
服务器：接收请求，对比缓存标识
↓
判断资源是否变化：
- 没变化 → 返回304（不返回资源内容）
  - 同时返回新的缓存控制头：
    - Cache-Control: max-age=3600
    - ETag: "abc123"
- 有变化 → 返回200和新资源

3. 304状态码详解

记忆技巧：

304 = "3"表示这是个重定向家族的状态码

"04"谐音"没有"，表示"没有修改"

3.1 304响应机制详解

服务器的角色

服务器在返回304时，会同时返回新的缓存控制头（Cache-Control、ETag等）

这些头信息是由服务器程序（如Nginx、Express等）根据配置自动添加的

目的是更新浏览器中缓存资源的元信息，但不返回资源本体

浏览器的处理流程

收到304响应 →

更新本地缓存的元信息（使用新的Cache-Control、ETag等） →

使用本地缓存中的资源内容显示

3.2 完整的缓存判断顺序（优化级由高到低）

强缓存检查（浏览器独立完成）

↓

检查Cache-Control: max-age是否有效

↓

检查Expires是否有效

↓

如果命中强缓存 → 直接使用缓存（不发请求）

如果未命中 → 进入协商缓存阶段
协商缓存检查（需要服务器参与）

↓

发送请求带上If-None-Match和If-Modified-Since

↓

服务器检查资源是否变化

↓

未变化 → 返回304+新的缓存控制头

已变化 → 返回200+新资源
全新请求（缓存完全失效）

↓

返回200+新资源+新的缓存控制头

4. 缓存状态码对比

200：从服务器返回新资源
200 (from cache)：命中强缓存
304：协商缓存验证后使用本地缓存

5. 完整缓存判断流程示例

http 复制代码

# 首次请求资源
GET /resource.js
Host: example.com

响应：
HTTP/1.1 200 OK
Cache-Control: max-age=3600
ETag: "abc123"
Last-Modified: Wed, 11 Jun 2025 15:00:00 GMT
[资源内容]

# 再次请求同一资源（在max-age内）
结果：浏览器直接使用缓存，不发请求
状态：200 (from disk cache/memory cache)

# 再次请求同一资源（max-age过期）
GET /resource.js
Host: example.com
If-None-Match: "abc123"
If-Modified-Since: Wed, 11 Jun 2025 15:00:00 GMT

响应（如果资源未改变）：
HTTP/1.1 304 Not Modified
ETag: "abc123"
Cache-Control: max-age=3600

三、301与搜索引擎

1. 搜索引擎处理301的过程

爬虫访问旧URL
收到301响应和新URL
更新索引库
传递旧URL的"权重"到新URL
后续直接抓取新URL

2. 301缓存机制

浏览器层面：永久缓存重定向信息
搜索引擎层面：更新索引并持久化存储
CDN层面：可能缓存301响应

3. 最佳实践

确保新旧URL的映射关系正确
保持301重定向链不要太长（影响性能）
适当设置Cache-Control头控制缓存时间
监控重定向流量和搜索引擎收录情况

四、实现示例

Nginx配置

nginx 复制代码

# 301配置
location /old-path {
    return 301 https://new-site.com$request_uri;
}

# 302配置
location /maintenance {
    return 302 /maintenance.html;
}

Node.js实现

javascript 复制代码

// 301重定向
res.writeHead(301, {
    'Location': 'https://new-site.com'
});
res.end();

// 302重定向
res.writeHead(302, {
    'Location': '/temp-page'
});
res.end();

五、现代Web缓存优化趋势

1. "服务器偷懒"策略

现代Web开发中，"服务器偷懒"已成为一种重要的优化策略。这不是贬义，而是一种精妙的性能优化方案：

优先使用缓存
强缓存：完全不打扰服务器
协商缓存：只确认资源是否变化
最后才是完整响应

优化目标

减少服务器负载
节省网络带宽
提升响应速度
降低服务器成本

2. 缓存优化最佳实践

合理设置缓存策略

静态资源使用较长的max-age
动态资源使用协商缓存
频繁变化的资源设置较短的过期时间

监控和调整

监控缓存命中率
分析未命中原因
持续优化缓存策略

性能收益

用户体验提升：更快的页面加载
服务器受益：更低的负载
成本优化：带宽使用更少

这种"服务器偷懒"的策略，实际上是现代Web性能优化的重要趋势，它巧妙地平衡了用户体验和服务器资源的使用，是一种双赢的解决方案。