关于html缓存设置

本文转载地址 :
https://blog.csdn.net/cominglately/article/details/77685214

通过HTTP的META设置expires和cache-control

   
  

指令不区分大小写,并且具有可选参数,可以用令牌或者带引号的字符串语法。多个指令以逗号分隔。

缓存请求指令

客户端可以在HTTP请求中使用的标准 Cache-Control 指令。

Cache-Control: max-stale[=]
Cache-Control: min-fresh=
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=
Cache-control: s-maxage=

拓展Cache-Control指令

拓展缓存指令不是HTTP缓存标准的一部分,使用前请注意检查 兼容性!

Cache-control: immutable
Cache-control: stale-while-revalidate=
Cache-control: stale-if-error=

可缓存性

public
表明响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存。

private
表明响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存它)。

no-cache
强制所有缓存了该响应的缓存用户,在使用已存储的缓存数据前,发送带验证器的请求到原始服务器

only-if-cached
表明如果缓存存在,只使用缓存,无论原始服务器数据是否有更新

到期设置

max-age=
设置缓存存储的最大周期,超过这个时间缓存被认为过期(单位秒)。与Expires相反,时间是相对于请求的时间。

s-maxage=
覆盖max-age 或者 Expires 头,但是仅适用于共享缓存(比如各个代理),并且私有缓存中它被忽略。

max-stale[=]
表明客户端愿意接收一个已经过期的资源。 可选的设置一个时间(单位秒),表示响 应不能超过的过时时间。

min-fresh=
表示客户端希望在指定的时间内获取最新的响应。

重新验证和重新加载

must-revalidate
缓存必须在使用之前验证旧资源的状态,并且不可使用过期资源。

proxy-revalidate
与must-revalidate作用相同,但它仅适用于共享缓存(例如代理),并被私有缓存忽略。

immutable
表示响应正文不会随时间而改变。资源(如果未过期)在服务器上不发生改变,因此客户端不应发送重新验证请求头(例如If-None-Match或If-Modified-Since)来检查更新,即使用户显式地刷新页面。在Firefox中,immutable只能被用在 https:// transactions.

禁止缓存

发送如下指令可以关闭缓存。此外,可以参考Expires 和 Pragma 标题。

Cache-Control: no-cache, no-store, must-revalidate

缓存静态资源

对于应用程序中不会改变的文件,你通常可以在发送响应头前添加积极缓存。这包括例如由应用程序提供的静态文件,例如图像,CSS文件和JavaScript文件。另请参阅Expires标题。

Cache-Control:public, max-age=31536000

缓存策略介绍

缓存主要两个策略 强制缓存 ,协商缓存
强制缓存就是设置本地资源html img js等等缓存多长时间 超过时间就去服务器端取。
协商缓存就是每次都询问服务器资源是否已经过期 没有过期就使用缓存 已经过期就从服务器上重新取。

缓存流程总结

缓存流程可以分三个阶段 本地缓存,协商缓存 ,缓存失败

  • 本地缓存
    就是查看响应头返回的缓存时间是多久 超过了就失效 进入协商阶段,相关控制字
    段是 cache-control: max-age, public ,private , exprice 超时时间

  • 协商缓存
    本地缓存失败后 就查看响应头字段 Etag(资源的唯一标识) 是否有值 ,如果有 就发一个带 If-None-Match(值等于Etag) 字段请求头过去询问 资源是否已经变更 变更了就发新资源过来。
    如果无Etag就检查 last-modify是否有值 ,如果有 就发送一个带有 If-Modified-Since 字段的请求头去询问资源是否已经更新,返回对应结果

  • 缓存失败
    就是指通过检查上面的各个字段 都失效了 就返回新的资源

结语

现在的vue项目里都不是这样缓存的 我个人感觉这是在静态页面时的缓存办法
现在都是webpack打包时通过 hash chunkhash contenthash来决定缓存方式 主要就是在请求的文件名称后面加一个id 来判断文件是否已经更新。

你可能感兴趣的:(关于html缓存设置)