浏览器HTTP缓存机制

深藏阁楼爱情的钟 2022-06-01 07:37 228阅读 0赞

# 浏览器HTTP缓存机制 #

> Web缓存是一种保存Web资源副本并在下次请求时直接使用该副本的技术。

Web缓存可以分为这几种：浏览器缓存、CDN缓存、服务器缓存、数据库数据缓存 。因为可能会直接使用副本免于重新发送请求或者仅仅确认资源没变无需重新传输资源实体，Web缓存可以减少延迟加快网页打开速度、重复利用资源减少网络带宽消耗、降低请求次数或者减少传输内容从而减轻服务器压力。

这篇文章主要讨论和前端密切相关的`浏览器HTTP缓存`机制。`浏览器HTTP缓存`可以分为`强缓存`和`协商缓存`。`强缓存`和`协商缓存`最大也是最根本的区别是：强缓存命中的话不会发请求到服务器（比如chrome中的200 from memory cache），协商缓存一定会发请求到服务器，通过资源的请求首部字段验证资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的实体，而是通知客户端可以从缓存中加载这个资源（304 not modified）。简略流程图如下：

![强缓存与协商缓存][1]

#### 浏览器HTTP缓存由HTTP报文的首部字段决定 ####

![报文结构][1 1]

#### 控制强缓存的字段按优先级介绍 ####

1.  Pragma        `Pragma`是HTTP/1.1之前版本遗留的通用首部字段，仅作为于HTTP/1.0的向后兼容而使用。虽然它是一个通用首部，但是它在响应报文中时的行为没有规范，依赖于浏览器的实现。RFC中该字段只有`no-cache`一个可选值，会通知浏览器不直接使用缓存，要求向服务器发请求校验新鲜度。因为它优先级最高，当存在时一定不会命中强缓存。
2.  Cache-Control        `Cache-Control`是一个通用首部字段，也是HTTP/1.1控制浏览器缓存的主流字段。和浏览器缓存相关的是如下几个响应指令：

<table style="display:inline-block; font-size:1rem; width:auto; overflow:auto; border-color:rgb(246,246,246)"> 
 <thead style="background:rgb(246,246,246); color:rgb(0,0,0)"> 
  <tr> 
   <th style="padding:1rem 0.6rem; line-height:2rem">指令</th> 
   <th style="padding:1rem 0.6rem; line-height:2rem">参数</th> 
   <th style="padding:1rem 0.6rem; line-height:2rem">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">private</td> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">无</td> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）</td> 
  </tr> 
  <tr style="background-color:rgb(252,252,252)"> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">public</td> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">可省略</td> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存</td> 
  </tr> 
  <tr> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">no-cache</td> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">可省略</td> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">缓存前必需确认其有效性</td> 
  </tr> 
  <tr style="background-color:rgb(252,252,252)"> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">no-store</td> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">无</td> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">不缓存请求或响应的任何内容</td> 
  </tr> 
  <tr> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">max-age=[s]</td> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">必需</td> 
   <td style="padding:1rem 0.6rem; line-height:2rem; min-width:10rem">响应的最大值</td> 
  </tr> 
 </tbody> 
</table>

*  max-age（单位为s）设置缓存的存在时间，相对于发送请求的时间。只有响应报文首部设置`Cache-Control`为非0的`max-age`或者设置了大于请求日期的`Expires`（下文会讲）才有可能命中强缓存。当满足这个条件，同时响应报文首部中`Cache-Control`不存在`no-cache`、`no-store`且请求报文首部不存在`Pragma`字段，才会真正命中强缓存。以下所有图片均为刷新（command+R）的截图。

![响应报文首部no-cache和max-age同时存在][no-cache_max-age] ![响应报文首部no-store和max-age同时存在][no-store_max-age] ![请求报文首部Pragma，响应报文首部max-age][Pragma_max-age]

*  no-cache 表示请求必须先与服务器确认缓存的有效性，如果有效才能使用缓存（`协商缓存`），无论是响应报文首部还是请求报文首部出现这个字段均一定不会命中强缓存。Chrome硬性重新加载（Command+shift+R）会在请求的首部加上`Pragma：no-cache`和`Cache-Control：no-cache`。
 *  no-store 表示禁止浏览器以及所有中间缓存存储任何版本的返回响应，一定不会出现强缓存和协商缓存，适合个人隐私数据或者经济类数据。
 *  public 表明响应可以被浏览器、CDN等等缓存。
 *  private 响应只作为私有的缓存，不能被CDN等缓存。如果要求HTTP认证，响应会自动设置为`private`。

1.  Expires        Expires是一个响应首部字段，它指定了一个日期/时间，在这个时间/日期之前，HTTP缓存被认为是有效的。无效的日期比如0，表示这个资源已经过期了。如果同时设置了`Cache-Control`响应首部字段的`max-age`，则`Expires`会被忽略。它也是HTTP/1.1之前版本遗留的通用首部字段，仅作为于HTTP/1.0的向后兼容而使用。

#### 控制协商缓存的字段 ####

1.  Last-Modified/If-Modified-Since        If-Modified-Since是一个请求首部字段，并且只能用在GET或者HEAD请求中。`Last-Modified`是一个响应首部字段，包含服务器认定的资源作出修改的日期及时间。当带着`If-Modified-Since`头访问服务器请求资源时，服务器会检查`Last-Modified`，如果`Last-Modified`的时间早于或等于`If-Modified-Since`则会返回一个不带主体的`304`响应，否则将重新返回资源。

> If-Modified-Since: , :: GMT Last-Modified: , :: GMT

1.  ETag/If-None-Match        `ETag`是一个响应首部字段，它是根据实体内容生成的一段hash字符串，标识资源的状态，由服务端产生。`If-None-Match`是一个条件式的请求首部。如果请求资源时在请求首部加上这个字段，值为之前服务器端返回的资源上的`ETag`，则当且仅当服务器上没有任何资源的`ETag`属性值与这个首部中列出的时候，服务器才会返回带有所请求资源实体的200响应，否则服务器会返回不带实体的`304`响应。`ETag`优先级比`Last-Modified`高，同时存在时会以`ETag`为准。

> If-None-Match: <etag\_value> If-None-Match: <etag\_value>, <etag\_value>, … If-None-Match: \*

![ETag与If-None-Match][ETag_If-None-Match]

> ETag属性之间的比较采用的是弱比较算法，即两个文件除了每个比特都相同外，内容一致也可以认为是相同的。例如，如果两个页面仅仅在页脚的生成时间有所不同，就可以认为二者是相同的。

因为`ETag`的特性，所以相较于`Last-Modified`有一些优势：

1.  某些情况下服务器无法获取资源的最后修改时间
        2.  资源的最后修改时间变了但是内容没变，使用ETag可以正确缓存
        3.  如果资源修改非常频繁，在秒以下的时间进行修改，Last-Modified只能精确到秒

#### 整体流程 ####

![整体流程][1 2]

[1]: https://user-gold-cdn.xitu.io/2018/1/23/161233e63a84f043?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 1]: https://user-gold-cdn.xitu.io/2018/1/23/161233e63aa13b30?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[no-cache_max-age]: https://user-gold-cdn.xitu.io/2018/1/23/161233e63adb83df?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[no-store_max-age]: https://user-gold-cdn.xitu.io/2018/1/23/161233e63ac99e71?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[Pragma_max-age]: https://user-gold-cdn.xitu.io/2018/1/23/161233e63a9363eb?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[ETag_If-None-Match]: https://user-gold-cdn.xitu.io/2018/1/23/161233e63a97e53e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 2]: https://user-gold-cdn.xitu.io/2018/1/23/161233e6685e5e73?imageView2/0/w/1280/h/960/format/webp/ignore-error/1