为什么需要缓存?

缓存是提升网站性能的核心手段，通过减少重复请求和降低服务器负载，显著加快页面加载速度。合理配置缓存策略，能让用户秒开网页，同时节省服务器成本。

一、静态资源
（静态资源适合长期缓存，如:365天，也就是31536000秒。）
静态资源指内容不变的文件（如图片、CSS、JS），适合强制缓存。

1.源站缓存设置
在服务器（源站）的http响应头中配置:

Cache-Control: public, max-age=31536000  # 缓存1年（单位：秒）

适用文件后缀：

图片： .jpg , .png , .webp , .svg , .ico

样式与脚本： .css , .js , .css.map , .js.map

字体： .woff2 , .ttf

媒体： .mp4 , .mp3

注意事项：

使用哈希文件名（如 style.a1b2c3.css ），更新后文件名变化，自动失效旧缓存。

对 .html 文件避免长期缓存（因其可能引用新版本资源）。

2.CDN缓存设置

我们在源站中把缓存内容设置好以后，我在cdn缓存设置中，应设置相应的静态资源文件后缀。
Screenshot_2025-03-08-22-02-44-76_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

相应代码:

# 静态资源通用配置（图片、多媒体、字体、JS、CSS等）
    location ~* \.(jpg|jpeg|png|gif|bmp|webp|svg|ico|mp4|webm|ogg|js|css|woff|woff2|ttf|eot)$ {
    expires 365d;                          # 传统Expires头（兼容旧客户端）
    add_header Cache-Control "public, immutable, max-age=31536000, s-maxage=31536000";
    try_files $uri =404;  # 仅检查文件是否存在，避免目录遍历
    access_log off;
    error_log  /dev/null;
    log_not_found off;}

以上代码放在你的网站的nginx设置里面，一般网站会有一个自定义的缓存设置，直接替换成我的代码即可。

优化版本

在网站设置的nginx配置server块里放置以下代码：

# 静态资源通用配置（图片、多媒体、字体、JS、CSS等）
location ~* \.(?:jpg|jpeg|png|gif|bmp|webp|svg|ico|mp4|webm|ogg|js|css|woff|woff2|ttf|eot)$ {
    expires 365d;                          # 传统Expires头（兼容旧客户端）
    add_header Cache-Control "public, immutable, max-age=31536000, s-maxage=31536000";
    
    # 新增安全头
    add_header X-Content-Type-Options "nosniff";  # 阻止浏览器MIME嗅探
    add_header Referrer-Policy "strict-origin-when-cross-origin";  # 控制Referer信息
    
    try_files $uri =404;  # 防止目录遍历攻击
    
    # 日志优化
    access_log off;
    log_not_found off;
    
    # 性能优化指令（视情况启用）
    sendfile on;          # 启用零拷贝传输
    tcp_nopush on;        # 仅在sendfile开启时有效，优化数据包发送效率
# 主安全头配置（置于server块）
add_header Content-Security-Policy   "default-src 'none'; script-src 'self' 'nonce-{随机值}' https: 'strict-dynamic'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; frame-ancestors 'none'; base-uri 'self'; report-uri https://your-domain.com/csp-report" always;

add_header X-Frame-Options           "DENY" always;
add_header X-Content-Type-Options     "nosniff" always;
add_header Referrer-Policy           "no-referrer-when-downgrade" always;
add_header Permissions-Policy         "geolocation=(), camera=(), microphone=(), payment=()" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

# 现代浏览器增强
add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;

在源站放置好代码之后，我们在cdn那边就好设置了，由于源站缓存已经设置过，我们直接把静态文件后缀填写到cdn缓存设置的相应位置，缓存方式选择遵循源站或者遵循cdn规则都可以，我选择的是遵循源站。

二、动态内容：谨慎控制缓存

动态内容指实时生成的数据（如API响应、用户专属页面），通常不缓存或短时缓存。

1.源站缓存设置

在动态请求http请求中做以下声明:

Cache-Control: no-store                 # 完全不缓存（如支付页面）
或  
Cache-Control: private, max-age=60      # 仅浏览器缓存1分钟（如商品详情）

跟静态内容缓存声明差不多，只是缓存方式不一样。

动态内容在cdn中怎么设置呢？很简单，在cdn缓存设置中选择，目录缓存，不要选择文件后缀了，目录缓存就是一个斜杠（/）。缓存时间建议5分钟，也就是300秒。我缓存10分钟我的页面的音乐会出现播放不了的问题，后面我就缓存300秒了，问题解决了。
cdn那边的缓存方式选择遵循源站吧！
参数选择保留参数，静态资源一样选择保留参数，不然你后台进不去哈。

适用场景：

API 接口（ .json , .xml ）

用户个性化页面（如购物车、仪表盘）

实时数据（如股票行情、即时消息）

2.CDN 缓存设置

对动态路径（如 /api/* ）设置缓存时间为 0秒或仅边缘缓存。

启用 Edge Cache-Control 覆盖（部分CDN支持动态内容短时缓存）。

使用 Vary 头隔离不同用户（如 Vary: Cookie ）。

三、缓存配置的注意事项

敏感数据不缓存：用户隐私信息（如个人资料）必须设置 Cache-Control: no-store 。

版本控制：静态资源更新后，通过修改文件名或参数强制刷新缓存。

CDN 回源规则：确保CDN在缓存过期时正确回源，避免内容过期。