HTTP缓存小记

HTTP缓存

HTTP缓存的意义

在请求一个静态文件的时候（如图片文件、JS、CSS、HTML文件），这些文件有个显著特点就是文件不经常变化，如果我们客户端每次访问这些文件都需要经过网络传输，那么其实会造成很多没必要的损耗，将这些"冷数据"存储起来，对于客户端可以减少加载时间，优化用户浏览体验，对于服务端来讲，可以极大减少服务器压力。

不缓存模型

我这里用如下的模型来模拟不设置缓存的场景，并且假设10分钟内有2w个用户共造成了10w次访问：

那么对于10w次访问，流量高达1.144GB。

简单时间缓存模型

而如果我们做了一个简单的基于时间的缓存，那么这10w次的访问，对应的流量则应该是2w*12KB=0.2288GB。

就这么一个最简单的优化策略就已经有了极大的节流作用，如果进一步详细深入，HTTP缓存的意义不言而喻。

深入HTTP缓存控制策略

我们通常在HTTP的header中对缓存进行控制，而目前仍广泛使用的请求头包括Cache-control、Expires、Etag等控制头

Expires

Expires是HTTP1.0时代的产物，它的值是一个时间点，目前的使用率应该是下降了不少了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8GhJLdOi-1639324538107)(C:\Users\WYQ51\AppData\Roaming\Typora\typora-user-images\image-20211206084659732.png)]

在当前时间大于这个时间点时，浏览器才会真正发送请求去获取该资源，否则从缓存中读取该文件。而相似的，cache-control中的max-age则是指定生命时长的秒数，比如600s。为了向前兼容，expries和这个属性仍是同时支持的，但是对应的cache-control的控制优先级更高。

If-Modified-Since搭配Last-Modified

和Expires以及max-age一样，这两个请求头是基于时间做判断，但类属于协商缓存。

其中，Last-Modified代表服务器在响应请求时，告诉浏览器资源的最后修改时间，而If-Modified-Since则是服务器返回的资源最后修改时间。

基本操作流程是

• 第一次请求将response header的Last-Modified保存
• 第二次请求通过request header的If-Modified-Since传到服务端进行验证

该过程会产生实际的请求，服务器收到请求会将If-Modified-Since与资源最后被修改时间对比。

若资源的最后修改时间大于If-Modified-Since，说明资源被修改过，则返回对应资源内容与状态码200；若资源的最后修改时间小于或等于If-Modified-Since，则说明资源无新修改，则响应HTTP 304，浏览器应继续使用缓存的资源。

If-None-Match搭配 Etag

Etag和If-None-Match是比较特殊的字段，不再以时间作为区分，只区别资源是否已被修改

其中，Etag是服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器，一般来讲使用Nginx等框架的话开发者无需过多操心）；而If-None-Match则是浏览器向服务器再次发送请求时，将之前收到 的Etag携带，服务器收到后会将其与当前资源Etag匹配，如果相同，则响应HTTP 304，浏览器应继续使用缓存的资源。

tip：同为资源验证型的字段，一般来讲Etag比Last-Modified的级别更高

Cache-control

cache-control是最高级别的缓存协议头，它和其他字段相比具备更多的属性。

max-age/smax-age

max-age，即上文提到过的较expires的属性，用于控制缓存的生命周期，不同的是Expires指定的是过期的具体时间，例如Sun, 21 Mar 2027 08:52:14 GMT，而max-age指定的是生命时长秒数315360000。

较Expires的好处是简单好用，作为Expires的具体时间，存在时区差、时间表示方式差别（如表示小时的数字缺少了一个0），这些问题可能导致缓存失效、缓存生命周期异常等问题。

---

而smax-age其实作用类似，但是该字段是作用于中间缓存服务器或者是更专业的CDN服务器

public/private

public和private用于控制中间服务器是否只有浏览器可以对资源进行缓存，当我们认为某些文件是只属于用户的，这种情况下我们应当设置private属性，禁止中间服务器缓存该文件

no-cache/no-store/must-revalidate

强大的cache-control中可以设置更多要素，上述这些值如下：

• no-cache: 对资源使用缓存，但每一次在使用缓存之前必须向服务器对缓存资源进行验证。
• no-store: 不使用任何缓存，这是绝对不使用缓存的属性
• must-revalidate: 如果我们配置了max-age，当缓存资源仍然新鲜（小于max-age）时使用缓存，否则需要对资源进行验证。所以must-revalidate可以和max-age组合使用Cache-Control: must-revalidate, max-age=600

max-stale

max-stale的作用比较别致，它可以指定浏览器即使过期也照常接收，这个值的单位是秒，如果不填就是永远

no-transform

no-transform的基本操作是防止缓存或者代理压缩图片，更多的体现还包括屏蔽搜索引擎转码，当用户进入第三方网站时,先进入中间提示页,页面将引导用户自主选择跳转至原网页

扩展cache-conntrol

cache-control提供了extension服务，通过cache-extension标记(token)可以扩展cache-control