http缓存问题

在前后端的http交互中，缓存是一个很重要的点，使用缓存在很大程度上可以提升效率，而且基本上对性能有要求的都必须要求使用缓存。

1、何为缓存？下面两幅图来描述：

浏览器第一次请求时：

浏览器后续请求：

2、缓存可以划分为强缓存和协商缓存：

强缓存：状态码200，浏览器如果判断本地缓存未过期，就直接使用，不需要发送请求到服务器；

协商缓存：状态码304，浏览器向服务器发起http请求，然后由服务器告诉浏览器文件并未改变，让浏览器使用本地存储；

通过header头部的来区分两种缓存机制：

强缓存控制：

扫描二维码关注公众号，回复： 2216165 查看本文章

（http1.1）Cache-Control /Max-Age

（http1.0）Pragma/Expires

协商缓存控制：

（http1.1）If-None-Match/E-tag

（http1.0）If-Modified-Since/Last-Modified

3、http1.0到http1.1缓存机制的变化

http1.0中的缓存控制：

Pragma：严格来说，它不属于专门的缓存控制头部，但是它设置 no-cache时可以让本地强缓存失效（属于编译控制，来实现特定的指令，主要是因为兼容http1.0，所以以前又被大量应用）
Expires：服务端配置的，属于强缓存，用来控制在规定的时间之前，浏览器不会发出请求，而是直接使用本地缓存，注意，Expires一般对应服务器端时间，如 Expires：Fri,30Oct199814:19:41
If-Modified-Since/Last-Modified：这两个是成对出现的，属于协商缓存的内容，其中浏览器的头部是 If-Modified-Since，而服务端的是 Last-Modified，它的作用是，在发起请求时，如果 If-Modified-Since和 Last-Modified匹配，那么代表服务器资源并未改变，因此服务端不会返回资源实体，而是只返回头部，通知浏览器可以使用本地缓存。 Last-Modified，顾名思义，指的是文件最后的修改时间，而且只能精确到 1s以内

http1.1中的缓存控制：

Cache-Control：缓存控制头部，有no-cache、max-age等多种取值
Max-Age：服务端配置的，用来控制强缓存，在规定的时间之内，浏览器无需发出请求，直接使用本地缓存，注意，Max-Age是Cache-Control头部的值，不是独立的头部，譬如 Cache-Control:max-age=3600，而且它值得是绝对时间，由浏览器自己计算
If-None-Match/E-tag：这两个是成对出现的，属于协商缓存的内容，其中浏览器的头部是 If-None-Match，而服务端的是 E-tag，同样，发出请求后，如果 If-None-Match和 E-tag匹配，则代表内容未变，通知浏览器使用本地缓存，和Last-Modified不同，E-tag更精确，它是类似于指纹一样的东西，基于 FileEtagINodeMtimeSize生成，也就是说，只要文件变，指纹就会变，而且没有1s精确度的限制。

4、E-tag相比Last-Modified？

Last-Modified ：

而 E-tag ：

如果同时带有 E-tag 和 Last-Modified ，服务端会优先检查 E-tag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304状态码。