关于浏览器缓存你知道多少（关于浏览器缓存你知道多少）

Expires:Fri, 27 Oct 2017 07:55:30 GMT

可能在你查看这的时候发现时间不对啊，怎么都已经是过去了 ~

GMT 表示的是格林威治时间，和北京时间相差8小时。

上面的这个时间表示的是 2017年10月27日15:55:30。

通过设置 Expire 来设置缓存有一个致命缺点：

可以看出，这个是个绝对时间，也就是说，如果我修改了客户端的本地时间，是不是就会导致判断缓存失效了呢。

既然不能设置绝对时间，那我就设置个相对时间呗。

在 HTTP/1.1 中，增加了一个字段 Cache-Control ，它包含一个 max-age 属性，该字段表示资源缓存的最大有效时间，这就是一个相对时间。

Cache-Control:max-age=600

这个表示的就是最大有效时间是 600s ，对的，它的单位是秒。

Cache-Control 除了 max-age 属性之外还有一些属性：

no-cache：需要进行协商缓存，发送请求到服务器确认是否使用缓存。

no-store：禁止使用缓存，每一次都要重新请求数据。

public：默认设置。

private：不能被多用户共享。

现在基本上都会同时设置 Expire 和 Cache-Control ，Cache-Control 的优先级别更高。

当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据请求头中的部分信息来判断是否命中缓存。如果命中，则返回 304 ，告诉浏览器资源未更新，可使用本地的缓存。

从图中可以看出，协商缓存一般是这样一个流程：

把资源标识，比如 If-Modify-Since 或 Etag 发送到服务器，确认资源是否更新；

如果资源未更新，请求响应返回的http状态为 304 并且会显示一个 Not Modified 的字符串，告诉浏览器使用本地缓存;

如果资源已经更新，返回新的数据；

将新数据存入缓存。

浏览器第一次请求资源的时候，服务器返回的 header 上会带有一个 Last-Modified 字段，表示资源最后修改的时间。

Last-Modified: Fri, 27 Oct 2017 07:55:30 GMT

同样的，这是一个 GMT 的绝对时间。

当浏览器再次请求该资源时，请求头中会带有一个 If-Modified-Since 字段，这个值是第一次请求返回的 Last-Modified 的值。服务器收到这个请求后，将 If-Modified-Since 和当前的 Last-Modified 进行对比。如果相等，则说明资源未修改，返回 304，浏览器使用本地缓存。

well，这个方法也是有缺点的：

最小单位是秒。也就是说如果我短时间内资源发生了改变，Last-Modified 并不会发生变化；

周期性变化。如果这个资源在一个周期内修改回原来的样子了，我们认为是可以使用缓存的，但是 Last-Modified 可不这样认为。

所以，后来又引入一个 Etag。

Etag 一般是由文件内容 hash 生成的，也就是说它可以保证资源的唯一性，资源发生改变就会导致Etag 发生改变。

同样地，在浏览器第一次请求资源时，服务器会返回一个 Etag 标识。当再次请求该资源时， 会通过If-no-match 字段将 Etag 发送回服务器，然后服务器进行比较，如果相等，则返回 304 表示未修改。

**Last-Modified 和 Etag 是可以同时设置的，服务器会优先校验 Etag，如果 Etag 相等就会继续比对 Last-Modified，最后才会决定是否返回 304。**

当浏览器再次访问一个已经访问过的资源时，它会这样做：

看看是否命中强缓存，如果命中，就直接使用缓存了；

如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存；

如果命中协商缓存，服务器会返回 304 告诉浏览器使用本地缓存；

否则，返回最新的资源。