关于html缓存设置

通过HTTP的META设置expires和cache-control 指令不区分大小写，并且具有可选参数，可以用令牌或者带引号的字符串语法。多个指令以逗号分隔。 客户端可以在HTTP请求中使用的标准 Cache-Control 指令。 Cache-Control: max-stale[=<seconds>] Cache-Control: min-fresh=<seconds> Cache-control: no-cache Cache-control: no-store Cache-control: no-transform Cache-control: only-if-cached 服务器可以在响应中使用的标准 Cache-Control 指令。 Cache-control: no-cache Cache-control: no-store Cache-control: no-transform Cache-control: public Cache-control: private Cache-control: proxy-revalidate Cache-Control: max-age=<seconds> Cache-control: s-maxage=<seconds> 拓展缓存指令不是HTTP缓存标准的一部分，使用前请注意检查 兼容性 ！ Cache-control: immutable Cache-control: stale-while-revalidate=<seconds> Cache-control: stale-if-error=<seconds> public 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存。 private 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）。 no-cache 强制所有缓存了该响应的缓存用户，在使用已存储的缓存数据前，发送带验证器的请求到原始服务器 only-if-cached 表明如果缓存存在，只使用缓存，无论原始服务器数据是否有更新 max-age=<seconds> 设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与Expires相反，时间是相对于请求的时间。 s-maxage=<seconds> 覆盖max-age 或者 Expires 头，但是仅适用于共享缓存(比如各个代理)，并且私有缓存中它被忽略。 max-stale[=<seconds>] 表明客户端愿意接收一个已经过期的资源。 可选的设置一个时间(单位秒)，表示响 应不能超过的过时时间。 min-fresh=<seconds> 表示客户端希望在指定的时间内获取最新的响应。 must-revalidate 缓存必须在使用之前验证旧资源的状态，并且不可使用过期资源。 proxy-revalidate 与must-revalidate作用相同，但它仅适用于共享缓存（例如代理），并被私有缓存忽略。 immutable 表示响应正文不会随时间而改变。资源（如果未过期）在服务器上不发生改变，因此客户端不应发送重新验证请求头（例如If-None-Match或If-Modified-Since）来检查更新，即使用户显式地刷新页面。在Firefox中，immutable只能被用在 https:// transactions. 发送如下指令可以关闭缓存。此外，可以参考Expires 和 Pragma 标题。 对于应用程序中不会改变的文件，你通常可以在发送响应头前添加积极缓存。这包括例如由应用程序提供的静态文件，例如图像，CSS文件和JavaScript文件。另请参阅Expires标题。 缓存主要两个策略 强制缓存 ，协商缓存 强制缓存就是设置本地资源html img js等等缓存多长时间 超过时间就去服务器端取。 协商缓存就是每次都询问服务器资源是否已经过期 没有过期就使用缓存 已经过期就从服务器上重新取。 缓存流程可以分三个阶段 本地缓存，协商缓存 ，缓存失败 现在的vue项目里都不是这样缓存的 我个人感觉这是在静态页面时的缓存办法 现在都是webpack打包时通过 hash chunkhash contenthash来决定缓存方式 主要就是在请求的文件名称后面加一个id 来判断文件是否已经更新。

一条缓存规则，该规则表示html后缀的文件会缓存5分钟。 不管访问多少次，X-Cache 始终是 MISS，X-Swift-CacheTime 也一直为 0。 X-Cache 为 MISS，X-Swift-CacheTime 为 0，CDN不缓存。 X-Cache 为 MISS，X-Swift-CacheTime 为 0，CDN不缓存。 X-Cache 为 MISS，X-Swift-CacheTime 为 0，CDN不缓存。 试下能否正常被CDN缓存。 X-Cache 变成了 HIT，X-Swift-CacheTime 变成了 300，也就是CDN缓存5分钟。 缓存规则权重不同，有两条缓存规则，其中 /static/ 目录类型的权重最大，意味着优先级最高。 请求 /static/ 目录下 html 后缀的文件，看下匹配到哪条规则？ X-Swift-CacheTime: 120，这是匹配到了 /static/ 目录类型的规则。 缓存规则权重相同， html 文件后缀名的规则创建时间最早，正常情况应该是匹配到该条规则。 X-Swift-CacheTime: 300，确实匹配到了 html 文件后缀名规则。 CDN不要设置缓存规则，然后nginx配置内容如下，Cache-Control设置为60秒，Expires设置为120秒。 源站响应头部有 Cache-Control 、 Expires 、 Last-Modified 、 ETag ，测试看看哪个优先级最高。 X-Swift-CacheTime: 60，Cache-Control 的优先级高一些。 在nginx配置中将 add_header Cache-Control "max-age=60" 去掉再试试。 X-Swift-CacheTime: 120，缓存规则是用 Expires 的时间了。 去掉nginx配置中的 expires 120s。 X-Swift-CacheTime 会随着时间变化，这是因为缓存过期了，CDN重新去源站拉取，然后重新计算缓存过期时间。 ok，最后一步，将 Last-Modified 响应头部给干掉。 只有 Etag 响应头部，不管访问几次，依旧是 X-Swift-CacheTime: 10。 将4个响应头部都干掉，看下CDN是否会缓存。 多次测试始终是 X-Cache: MISS 和 X-Swift-CacheTime: 0，这说明如果这4个响应头部都没了，CDN是不缓存的。

---