http缓存详解

单独拎出来的缓存问题，http的缓存

前后端的http交互中，使用缓存能很大程度上的提升效率，而且基本上对性能有要求的前端项目都是必用缓存的。

强缓存与弱缓存

缓存可以简单的划分成两种类型： 强缓存（ 200fromcache）与 协商缓存（ 304）。

区别简述如下：

• 强缓存（ 200fromcache）时，浏览器如果判断本地缓存未过期，就直接使用，无需发起http请求

• 协商缓存（ 304）时，浏览器会向服务端发起http请求，然后服务端告诉浏览器文件未改变，让浏览器使用本地缓存

对于协商缓存，使用 Ctrl+F5强制刷新可以使得缓存无效。但是对于强缓存，在未过期时，必须更新资源路径才能发起新的请求（更改了路径相当于是另一个资源了，这也是前端工程化中常用到的技巧）。

缓存头部简述

上述提到了强缓存和协商缓存，那它们是怎么区分的呢？答案是通过不同的http头部控制。

先看下这几个头部：

1. If-None-Match/E-tag、If-Modified-Since/Last-Modified、Cache-Control/Max-Age、Pragma/Expires

这些就是缓存中常用到的头部，这里不展开。仅列举下大致使用。

属于强缓存控制的：

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

2. （http1.0）Pragma/Expires

注意： Max-Age不是一个头部，它是 Cache-Control头部的值。

属于协商缓存控制的：

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

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

可以看到，上述有提到 http1.1和 http1.0，这些不同的头部是属于不同http时期的。

再提一点，其实HTML页面中也有一个meta标签可以控制缓存方案- Pragma。

1. <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

不过，这种方案还是比较少用到，因为支持情况不佳，譬如缓存代理服务器肯定不支持，所以不推荐。

头部的区别

首先明确，http的发展是从http1.0到http1.1，而在http1.1中，出了一些新内容，弥补了http1.0的不足。

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精确度的限制。

Max-Age相比Expires？

Expires使用的是服务器端的时间，但是有时候会有这样一种情况-客户端时间和服务端不同步。那这样，可能就会出问题了，造成了浏览器本地的缓存无用或者一直无法过期，所以一般http1.1后不推荐使用 Expires。而 Max-Age使用的是客户端本地时间的计算，因此不会有这个问题，因此推荐使用 Max-Age。

注意，如果同时启用了 Cache-Control与 Expires， Cache-Control优先级高。

E-tag相比Last-Modified？

Last-Modified：

• 表明服务端的文件最后何时改变的

• 它有一个缺陷就是只能精确到1s，

• 然后还有一个问题就是有的服务端的文件会周期性的改变，导致缓存失效

而 E-tag：

• 是一种指纹机制，代表文件相关指纹

• 只有文件变才会变，也只要文件变就会变，

• 也没有精确时间的限制，只要文件一遍，立马E-tag就不一样了

如果同时带有 E-tag和 Last-Modified，服务端会优先检查 E-tag。

各大缓存头部的整体关系如下图：