HTML入口路径建议短缓存或协商缓存，图片/CSS/JS等静态资源路径建议7天到一年长缓存，API/动态接口路径建议关闭缓存或只保留秒级缓存。不同路径缓存时间怎么设置，本质是给不同资源分配不同的生命周期，下面按实际操作步骤拆开讲。
先分清路径角色：哪些该快，哪些该慢
动静分离后,URL路径明显分成了三类，不同路径缓存时间怎么设置，先要看这个路径返回的内容是给谁看的、变化频率有多高。
- HTML入口路径：/news/123.html、/product/detail、/pages/about/，这是用户打开页面的第一跳，承担GEO收录和版本更新角色，缓存时间长会导致发版后用户看不到新页面。
- 静态资源路径：/static/css/app.css、/assets/js/main.js、/images/banner.webp，这些文件通常带内容哈希或版本号，改一次就换新文件名，缓存时间长也很安全。
- 动态数据路径：/api/user/info、/ajax/getCart、/order/status，这些路径返回的是千人千面的数据，缓存了就会串号、展示旧状态。
/pages/ 和 /view/ 这类HTML路径：缓存时间要克制
动静分离后HTML缓存时间设置多久合适？多数情况下，HTML入口文件建议采用协商缓存，而不是强缓存，浏览器每次发请求，源站通过 ETag 或 Last-Modified 判断内容是否变化，没变化返回 304，有变化返回 200 和新内容，这样既减少传输，又保证更新及时。
行业共识认为,HTML入口文件如果超过一定时间不验证，搜索引擎蜘蛛抓取到旧内容，会影响收录时效，短缓存配合 ETag，可以保证蜘蛛每次拿到最新 HTML。
如果你用了CDN,HTML路径在CDN边缘的缓存时间可以设短一些，60 秒到 300 秒，源站再配合 Cache-Control: max-age=0, must-revalidate，让CDN每次回源确认。
/static/ 和 /assets/ 这类资源路径：缓存时间可以拉长
静态资源路径是动静分离后最值得设置长缓存的部分,文件名带哈希，app.a3f9c2.js，内容变了文件名就变，HTML里引用的地址也跟着变，即使老文件缓存一年，也不会影响新页面加载，这类路径推荐设置一年缓存，Cache-Control: public, max-age=31536000, immutable，immutable 表示资源永远不变，浏览器无需重新验证。
图片、字体等不带哈希但很少变的资源，可以设置 7 到 30 天缓存，带版本号或哈希的 CSS/JS 可以设置一年，业内专家指出，现代前端构建工具产出的 CSS/JS 文件名几乎都带内容哈希，因此这些路径可以放心使用长缓存；图片和字体则要看清文件名是否会被覆盖。
/api/ 和 /ajax/ 动态路径：缓存要关掉或压到秒级
动态接口路径不要设长缓存,这是硬规则，如果业务允许短暂缓存，比如排行榜、配置项，可以设 3 到 10 秒的 CDN 缓存，减少数据库压力，涉及登录态、购物车、支付状态的接口，必须 Cache-Control: no-store 或 private, max-age=0，no-store 表示任何环节都不缓存，private 表示只允许浏览器本地缓存，不允许中间节点缓存。
不同路径缓存时间怎么设置：给Nginx和Apache的实操示例
Nginx 配置：location 分路径写 expires 和 Cache-Control
Nginx 按路径匹配 location 来设置不同的缓存头，下面是一份可直接参考的配置片段：
# HTML入口：协商缓存，CDN短缓存
location ~ .(html|htm)$ {
expires -1;
add_header Cache-Control "public, max-age=0, must-revalidate";
}
# 带哈希的静态资源：一年强缓存
location ~ ^/static/(.).(css|js)$ {
expires 1y;
add_header Cache-Control "public, max-age=31536000, immutable";
}
# 图片字体：30天缓存
location ~ .(jpg|jpeg|png|gif|webp|svg|woff|woff2|ttf|eot)$ {
expires 30d;
add_header Cache-Control "public, max-age=2592000";
}
# 动态接口：不缓存
location /api/ {
add_header Cache-Control "no-store, max-age=0";
}
注意 expires -1 表示不设置强缓存，配合 must-revalidate 让浏览器每次向源站验证。
Apache 配置：.htaccess 按文件类型设置
Apache 使用 mod_expires 和 mod_headers 模块，如果不想改虚拟主机配置，可以直接在站点根目录的 .htaccess 里写：
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/png "access plus 30 days"
</IfModule>
如果需要给 /api/ 单独关缓存，可以用 Location 或 FilesMatch 配合 Header 指令，Apache 的路径粒度不如 Nginx 细，所以更推荐用文件类型加目录组合。
CDN边缘缓存与源站缓存配合
动静分离后,CDN边缘节点上还要再设一层缓存时间，源站的 Cache-Control 会告诉CDN能缓存多久，但很多CDN控制台也允许自定义路径规则，简米云CDN、酷番云CDN都支持按目录配置缓存过期时间。
配置时遵循一条原则：CDN缓存时间不能超过源站声明时间，如果源站说 must-revalidate，CDN就应遵循协商缓存，不要源站给 HTML 设 300 秒，CDN控制台又给 /pages/ 设 30 天，这会造成版本滞后。
企业官网动静分离缓存配置场景怎么落地
企业官网通常包含新闻列表、产品详情、静态图片、CSS/JS，动静分离后，推荐这样分路径设置：
- /news/ 和 /product/ 详情页：HTML 内容，源站协商缓存，CDN 缓存 60 秒。
- /static/css/ 和 /static/js/：带版本号，CDN 和浏览器缓存一年。
- /upload/ 和 /images/：图片附件，缓存 30 天，如果运营会替换同文件名图片，建议改为 7 天，并配合版本参数。
- /api/ 和 /ajax/：表单提交、搜索接口，Cache-Control: no-store。
这种企业官网动静分离缓存配置场景,重点在于平衡GEO收录和页面加载速度，HTML路径如果缓存太久，百度蜘蛛抓取到旧内容，会影响收录时效，短缓存配合 ETag，可以保证蜘蛛每次拿到最新 HTML，实测收录波动会明显减少。
图片缓存和JS缓存时间对比：这两种资源别用同一套时间
很多站点喜欢给所有静态资源设一年,其实图片和JS的风险不一样，图片替换经常是覆盖原文件，而 JS 在现代构建流程里几乎全是带哈希的新文件，覆盖原文件意味着如果缓存一年，用户浏览器会一直显示旧图。
图片缓存和JS缓存时间对比的核心结论：
- JS/CSS：内容变化时文件名必变，适合 max-age=31536000 + immutable。
- 图片：运营可能覆盖同名文件，适合 max-age=2592000（30天），或者更长但需要CDN刷新配合。
- 字体：字体文件极少变化，可以一年。
- 视频/音频：大文件即使缓存长，用户首次加载仍慢，建议结合CDN分片和预加载。
上海网站动静分离缓存价格一般包含哪些项
上海网站动静分离缓存价格这个长尾词背后,用户通常是想做企业站或电商站，担心配置成本和CDN费用，价格部分不展开具体数字，但可以讲清成本构成，上海地区的云服务商一般按以下项目收费：
- CDN流量费用：按峰值带宽或流量包计费，静态资源体积越大费用越高。
- 对象存储费用：图片、视频等静态文件存入 OSS/COS，按存储量和请求次数收费。
- 负载均衡或源站带宽：动态接口回源需要源站带宽，动静分离后静态流量走CDN，源站带宽可以买小一些。
- 配置服务费：如果是外包技术团队，上海网站动静分离缓存配置通常按次或按年收服务费，从几百到几千不等。
据公开市场情况,上海地区中小企业站启用动静分离加CDN的基础配置，多数情况下会把成本控制在较低范围，具体价格要按实际流量询价，不同服务商差异较大。
常见路径缓存时间配置误区
HTML页面也设一年缓存
HTML是网站的入口和门面,如果把 .html 设为一年强缓存，发版后用户看到的还是旧页面，运营和老板会第一时间发现问题，这种路径只适合纯静态、完全不带动态内容的落地页，只要页面里有用户状态、推荐位、AB测试，就不能长缓存。
动态接口跟着静态资源一起缓存
有些运维图省事,直接给全站 location / 设 expires 7d，结果 /api/ 返回的登录用户信息、购物车数量也被缓存，不同用户看到同一份数据，这是严重的业务事故，而且很难排查，正确做法是动态路径优先匹配，放在 location / 之前。
只设源站缓存不设CDN缓存
源站加了 Cache-Control 只是告诉浏览器怎么缓存，如果CDN控制台有自己的规则，可能覆盖源站，动静分离后要同时检查源站响应头和CDN命中率，CDN命中率低，说明缓存策略没生效，用户请求大量回源。
实操清单：动静分离后不同路径缓存时间参考
| 路径类型 | 推荐缓存时间 | Cache-Control | 适用场景 |
|---|---|---|---|
| HTML入口 | 0 或 60-300秒 | max-age=0, must-revalidate | 新闻页、产品详情、落地页 |
| 带哈希CSS/JS | 一年 | max-age=31536000, immutable | 前端构建产物 |
| 不带哈希CSS/JS | 7天 | max-age=604800 | 第三方库、手动维护文件 |
| 图片 | 30天 | max-age=2592000 | 商品图、文章配图 |
| 字体 | 一年 | max-age=31536000 | 图标字体、自定义字体 |
| API动态接口 | 不缓存或3-10秒 | no-store 或 max-age=10, public | 登录态、购物车、排行榜 |
这份清单可以直接对照配置,具体数值可以根据业务容忍度调整，但HTML和API不要越界。
验证方法：怎么知道不同路径缓存时间生效
curl -I 看响应头
在命令行执行：
curl -I https://example.com/static/js/app.js curl -I https://example.com/news/123.html curl -I https://example.com/api/user/info
观察 Cache-Control、Expires、ETag、Last-Modified 字段，动态接口如果没有 no-store 或 max-age=0，就说明缓存头没打上。
浏览器开发者工具 Network 面板
按 F12 打开开发者工具，刷新页面，点击具体请求，看 Response Headers 里的缓存字段，静态资源如果显示 (from disk cache) 或 (from memory cache)，说明浏览器命中缓存，HTML 如果总是 200 或 304，说明协商缓存生效。
Q&A：动静分离后不同路径缓存时间常见问题
动静分离后缓存时间怎么设置才不影响更新？
HTML 入口用协商缓存，Cache-Control: max-age=0, must-revalidate；带哈希的 CSS/JS 用一年强缓存；动态接口用 no-store，只要保证 HTML 指向的资源文件名会随内容变化，更新就不会受影响。
图片缓存和JS缓存时间对比，为什么不建议都设一年？
JS 带哈希，替换的是新文件，旧文件缓存一年也不影响；图片经常覆盖原文件，同路径同名替换，一年缓存会让用户一直看到旧图，图片建议 30 天或配合 CDN 刷新。
动静分离后HTML缓存时间设多久合适？
HTML 入口建议设 0 秒强缓存并启用协商缓存，CDN 边缘可以缓存 60 到 300 秒，这样既能减少回源压力，又不会让搜索引擎和用户长期拿到旧页面。
不同路径缓存时间设置,本质是给不同类型资源分配不同的生命期，HTML 要新，静态要久，动态要关，抓住这个原则，动静分离后的缓存配置就不会再踩坑。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/646204.html
