浅谈前端缓存类型之http缓存

前端缓存主要是分为HTTP缓存和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器代码上设置；而浏览器缓存则主要由前端开发在前端js上进行设置。

前端缓存.png

1、http缓存流程

在了解http缓存之前我们要先了解http请求流程：

http缓存请求流程.png

图片来自http协议缓存机制

在流程图中发起请求后判断是否已缓存这里我们需要了解http报文。

2、http缓存优点

通过网络获取内容既缓慢，成本又高：大的响应需要在客户端和服务器之间进行多次往返通信，这拖延了浏览器可以使用和处理内容的时间，同时也增加了访问者的数据成本。使用http缓存能节约带宽，能降低后端服务器的访问压力极大的加快响应的速度。

3、http缓存分类

http缓存分为强缓存和协商缓存
强缓存：Pragma > Cache-Control > Expires
协商缓存：If-None-Match/ETag > If-Modified-Since/Last Modified
如果强缓存是新鲜的，优先强缓存。
如果强缓存是不新鲜的，判断有无协商缓存

1、强缓存（强制缓存）

强制缓存的含义是，当客户端请求后，会先访问缓存数据库看缓存是否存在。如果存在则直接返回；不存在则请求真的服务器，响应后再写入缓存数据库。

强制缓存直接减少请求数，是提升最大的缓存策略。它的优化覆盖了请求、处理、响应的三个步骤。如果考虑使用缓存来优化网页性能的话，强制缓存应该是首先被考虑的。

可以造成强制缓存的字段是Pragma、 Cache-control 和 Expires。

1.Pragma

Pragma: no-cache

当该字段值为“no-cache”的时候，告诉客户端不要读取缓存，这个报文已经很少用了但需要知道Pragma的优先级是高于Cache-Control 。

2.Cache-control

Cache-control: max-age=2592000

为当前主流浏览器通用的强缓存识别报文，
下面列举一些 Cache-control 字段常用的值

max-age：即最大有效时间，在上面的例子中我们可以看到
must-revalidate：如果超过了 max-age 的时间，浏览器必须向服务器发送请求，验证资源是否还有效。
no-cache：虽然字面意思是“不要缓存”，但实际上还是要求客户端缓存内容的，只是是否使用这个内容由后续的对比来决定。
no-store: 真正意义上的“不要缓存”。所有内容都不走缓存，包括强制和对比。
public：所有的内容都可以被缓存 (包括客户端和代理服务器，如 CDN)
private：所有的内容只有客户端才可以缓存，代理服务器不能缓存。默认值。

3. Expires

表示缓存到期时间

Expires: Thu, 10 Nov 2017 08:45:11 GMT

在响应消息头中，设置这个字段之后，就可以告诉浏览器，在未过期之前不需要再次请求。

但是，这个字段设置时有两个缺点：
(1)由于是绝对时间，用户可能会将客户端本地的时间进行修改，而导致浏览器判断缓存失效，重新请求该资源。此外，即使不考虑自信修改，时差或者误差等因素也可能造成客户端与服务端的时间不一致，致使缓存失效。
(2)写法太复杂了。表示时间的字符串多个空格，少个字母，都会导致非法属性从而设置失效。

2、协商缓存（对比缓存）

若强缓存失效，则浏览器会将请求发送至服务器。服务器根据http头信息中的Last-Modify/If-Modify-Since或Etag/If-None-Match来判断缓存是否失效。如果未失效，则http返回码为304，浏览器从缓存中加载资源。

1.Last-Modify/If-Modify-Since

(1)服务器通过 Last-Modified 字段告知客户端，资源最后一次被修改的时间，例如

Last-Modified: Mon, 10 Nov 2018 09:10:11 GMT

(2)浏览器将这个值和内容一起记录在缓存数据库中。
(3)下一次请求相同资源时时，浏览器从自己的缓存中找出“不确定是否过期的”缓存。因此在请求头中将上次的 Last-Modified 的值写入到请求头的 If-Modified-Since 字段
(4)服务器会将 If-Modified-Since 的值与 Last-Modified 字段进行对比。如果相等，则表示未修改，响应 304；反之，则表示修改了，响应 200 状态码，并返回数据。

但是他还是有一定缺陷的：
1.如果资源更新的速度是秒以下单位，那么该缓存是不能被使用的，因为它的时间单位最低是秒。
2.如果文件是通过服务器动态生成的，那么该方法的更新时间永远是生成的时间，尽管文件可能没有变化，所以起不到缓存的作用。

2.Etag/If-None-Match

为了解决上述问题，出现了一组新的字段 Etag 和 If-None-Match

If-None-Match: "56fcccc8-1699"

Etag 存储的是文件的特殊标识(一般都是 hash 生成的)，服务器存储着文件的 Etag 字段。之后的流程和 Last-Modified 一致，只是 Last-Modified 字段和它所表示的更新时间改变成了 Etag 字段和它所表示的文件 hash，把 If-Modified-Since 变成了 If-None-Match。服务器同样进行比较，命中返回 304, 不命中返回新资源和 200。
Etag 的优先级高于 Last-Modified。
浅谈前端缓存类型之浏览器缓存