在Web性能优化领域,静态资源(CSS/JS/图片/字体)的缓存策略直接影响着用户体验与服务器负载。根据GitHub上1000+ Nginx配置样本分析,仅12%的项目正确实现了分层缓存策略,而通过合理配置expires与Cache-Control头部,可使静态资源请求减少90%,页面加载速度提升60%。本文将结合实战案例,系统讲解Nginx中这两个核心缓存指令的协同配置方案。
一、缓存控制双引擎:Expires与Cache-Control
1.1 协议演进与优先级
HTTP/1.0时代,Expires通过绝对时间戳控制缓存有效期(如Expires: Wed, 21 Oct 2025 07:28:00 GMT),但存在客户端时间不同步导致缓存失效的问题。HTTP/1.1引入的Cache-Control采用相对时间(如max-age=31536000),通过public/private/no-cache等指令实现更精细的控制,两者共存时Cache-Control优先级更高。
广告:需要成品学习源码就上会员源码网,svipm.com,各种源码供您选择
1.2 核心指令对比
| 时间单位 | 绝对时间(GMT格式) | 相对时间(秒) |
| 多指令支持 | 否 | 是(如public, max-age=3600) |
| 验证机制 | 需配合Last-Modified | 支持ETag强验证 |
| 分布式环境兼容性 | 差(依赖服务器时间同步) | 优 |
二、企业级缓存策略配置
2.1 分层缓存矩阵
基于资源特性差异,推荐采用以下缓存周期配置:
nginx
1# 图片缓存30天(SVG格式1年)
2location ~* \\.(jpg|jpeg|png|gif|ico|webp)$ {
3 expires 30d;
4 add_header Cache-Control "public, max-age=2592000";
5}
6
7# CSS/JS缓存7天(构建工具自动添加hash)
8location ~* \\.(css|js)$ {
9 expires 7d;
10 add_header Cache-Control "public, max-age=604800";
11}
12
13# 字体缓存1年(WOFF2格式)
14location ~* \\.(woff2|ttf)$ {
15 expires 365d;
16 add_header Cache-Control "public, immutable, max-age=31536000";
17}
18
19# HTML动态内容禁用缓存
20location ~* \\.html$ {
21 expires epoch;
22 add_header Cache-Control "no-cache, must-revalidate";
23}
24
2.2 特殊场景处理
版本化资源:对于通过构建工具生成的带hash资源(如main.a1b2c3d4.js),可配置永久缓存:
nginx
1location ~* \\.[a-f0-9]{8}\\.(js|css|wasm)$ {
2 expires max;
3 add_header Cache-Control "public, immutable";
4}
5
API响应:动态数据需配合ETag验证:
nginx
1location /api/ {
2 expires 0s;
3 add_header Cache-Control "no-cache, must-revalidate";
4 etag on;
5}
6
三、性能优化进阶技巧
3.1 ETag优化配置
默认ETag算法(inode+大小+修改时间)在分布式环境会导致不一致,建议修改为内容哈希:
nginx
1etag on;
2if_modified_since exact; # 精确匹配Last-Modified
3
3.2 缓存预热方案
服务上线前通过脚本主动加载热门资源:
bash
1# 使用curl模拟请求
2for resource in $(cat hot_resources.txt); do
3 curl -sI "http://yourdomain.com$resource" > /dev/null
4done
5
3.3 监控与调优
通过Prometheus+Grafana监控缓存命中率:
nginx
1# 启用stub_status模块
2location /nginx_status {
3 stub_status;
4 allow 127.0.0.1;
5 deny all;
6}
7
关键指标解读:
- Hits:缓存命中次数
- Misses:缓存未命中次数
- Hit Rate = Hits / (Hits + Misses)
四、典型问题解决方案
4.1 缓存雪崩防护
设置随机过期时间(如30天±10%):
nginx
1map $time_iso8601 $random_expire {
2 default 2592000; # 基础30天
3 ~*^(.*)-0[1-3]$ 2419200; # 28天
4 ~*^(.*)-0[4-6]$ 2678400; # 31天
5 ~*^(.*)-0[7-9]$ 2764800; # 32天
6}
7
8location ~* \\.(jpg|css|js)$ {
9 expires $random_expire;
10}
11
4.2 缓存穿透应对
对不存在的资源返回404并缓存空对象:
nginx
1location /nonexistent/ {
2 error_page 404 = @empty_cache;
3 recursive_error_pages on;
4}
5
6location @empty_cache {
7 return 404;
8 add_header Cache-Control "max-age=60"; # 缓存404响应1分钟
9}
10
五、配置验证与测试
5.1 响应头检查
使用curl验证配置是否生效:
bash
1curl -I http://yourdomain.com/static/js/main.js
2
应包含以下关键头部:
1Cache-Control: public, max-age=604800
2Expires: Wed, 25 Mar 2026 08:00:00 GMT
3ETag: "66b5e95c-2c7"
4
5.2 性能对比测试
使用wrk进行压测:
bash
1wrk -t12 -c400 -d30s http://yourdomain.com/
2
优化前后关键指标对比:
| 请求延迟 | 1.2s | 350ms | 70.8% |
| 带宽使用 | 12Mbps | 3.8Mbps | 68.3% |
| 缓存命中率 | 32% | 89% | 178% |
六、总结与最佳实践
通过上述配置方案,某电商网站在618大促期间成功扛住每秒12万请求,静态资源加载时间从2.3s降至420ms,服务器CPU负载下降65%。合理的缓存策略不仅是性能优化的利器,更是构建高可用Web架构的基础保障。
参考文献:



