HTTP Cache

SHOYUF

强制缓存指令:

  1. Expires: Thu, 10 Nov 2017 08:45:11 GMT
    服务器返回一个绝对时间,超过这个时间后为缓存过期,该指令会被 Cache-Control 覆盖

  2. Cache-Control
    不区分大小写,分为请求部分和响应部分

  3. 请求指令:

    no-cache // 强制所有缓存了该响应的缓存用户,在使用已存储的缓存数据前,发送带验证器的请求(对比缓存指令)到原始服务器 
    no-store // 缓存不应存储有关客户端请求或服务器响应的任何内容
    no-transform // 代理服务器不得对资源进行转换或转变
    only-if-cached // 如果有缓存,只用缓存
    max-age=<seconds> // 相对于请求时间单位为秒的缓存最大周期,超过则为缓存过期
    max-stale[=<seconds>] // 客户端支持接受一个过期的资源,并可选一个时间
    min-fresh=<seconds> // 客户端希望在指定时间内获取最新的响应
  4. 响应指令:

    must-revalidate // 缓存必须在使用之前验证旧资源的状态(对比缓存指令),并且不可使用过期资源。
    no-cache // 强制所有缓存了该响应的缓存用户,在使用已存储的缓存数据前,发送带验证器的请求(对比缓存指令)到原始服务器
    no-store // 缓存不应存储有关客户端请求或服务器响应的任何内容
    no-transform // 代理服务器不得对资源进行转换或转变
    public // 可以被任何对象缓存
    private // 不能被代理服务器缓存,可以被用户缓存
    proxy-revalidate // 仅适用代理服务器的 must-revalidate
    max-age=<seconds> // 相对于请求时间单位为秒的缓存最大周期,超过则为缓存过期
    s-maxage=<seconds> // 仅适用于代理服务器的缓存,私有缓存中它将被忽略

强制缓存举例:

禁止缓存:Cache-Control: no-cache, no-store, must-revalidate
静态资源缓存:Cache-Control:public, max-age=31536000 一年

对比缓存指令:

  1. Last-Modified: Thu, 10 Nov 2015 08:45:11 GMT
    此 Header 为一个响应头,展示上次修改时间

  2. Etag:hash
    分为弱验证器(不推荐)和强验证器
    弱验证器:W/
    强验证器:"<etag_value>"

服务器将客户端的ETag(作为If-None-Match字段的值一起发送)与其当前版本的资源的ETag进行比较,如果两个值匹配(即资源未更改),服务器将返回不带任何内容的304未修改状态,告诉客户端缓存版本可用(新鲜)。

浏览器 META 设置缓存命令

<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

总结

当前前端 Webpack 为例的模式生成的 JS 或 CSS 静态文件均为文件名中带 hash 的缓存模式,当更新文件时,hash 和 HTML 文件中引用的文件 hash 也会发生改变,同时服务器上的旧文件也会被删除,所以当前针对缓存的方案为:

  1. 可以给 HTML 文件设置 Meta 标签和禁止缓存 Header:Cache-Control: no-cache, no-store, must-revalidate,禁止其缓存。
  2. 给 JS、CSS 文件设置 静态资源缓存:Cache-Control:public, max-age=31536000 ,使其直接缓存与本机。

Quotes:

  1. MDN-Expires
  2. MDN-Cache-Control
  3. MDN-Last-Modified
  4. MDN-Etag

本站使用署名 4.0 国际 (CC BY 4.0) 创作共享协议,转载请署名,图片请转存。

提醒:本文最后更新于 423 天前,文中所描述的信息可能已发生改变,请谨慎使用。