HTTP 缓存机制全面解析

最新推荐文章于 2025-10-23 00:00:50 发布

原创

最新推荐文章于 2025-10-23 00:00:50 发布 · 1.2k 阅读

标签

#http #缓存 #网络协议

HTTP缓存是Web性能优化的核心技术，它能显著减少网络请求，提升页面加载速度，并降低服务器负载。

1、缓存的价值

2、缓存位置

缓存类型	存储位置	生命周期	控制方式
浏览器缓存	客户端内存/磁盘	用户手动清除	HTTP头部
代理缓存	中间服务器	配置决定	共享缓存指令
网关缓存	反向代理服务器	配置决定	服务器配置
CDN缓存	边缘节点	TTL设置	CDN控制台

1、缓存控制头字段

HTTP头	类型	功能说明	示例值
Cache-Control	请求/响应	主缓存控制指令	max-age=3600, public
Expires	响应	资源过期时间（HTTP/1.0）	Expires: Wed, 21 Oct 2025 07:28:00 GMT
ETag	响应	资源版本标识符	ETag: “33a64df551425fcc55e4d42a148795d9f25f89d4”
Last-Modified	响应	资源最后修改时间	Last-Modified: Tue, 15 Nov 2022 12:45:26 GMT
If-None-Match	请求	携带ETag验证缓存	If-None-Match: “33a64df5…”
If-Modified-Since	请求	携带修改时间验证缓存	If-Modified-Since: Tue, 15 Nov 2022 12:45:26 GMT
Vary	响应	指定缓存变体	Vary: User-Agent, Accept-Encoding

2、Cache-Control 指令详解

1、强缓存（不发送请求）
请添加图片描述

2、协商缓存（发送验证请求）
请添加图片描述

1、静态资源缓存策略

# 版本化资源（永久缓存）
Cache-Control: public, max-age=31536000, immutable

# 非版本化资源（短期缓存）
Cache-Control: public, max-age=604800

2、动态内容缓存策略

# 个性化内容（不缓存）
Cache-Control: private, no-store

# 半动态内容（短期缓存）
Cache-Control: public, max-age=60, must-revalidate

3、缓存更新策略

策略	实现方式	适用场景
文件名指纹	app.abc123.js	JS/CSS/图片等静态资源
查询参数版本	style.css?v=20230101