《四》HTTP 缓存

前端缓存可分为两大类：HTTP缓存和浏览器缓存。

HTTP 缓存主要是后端设置；浏览器缓存是前端设置。

HTTP缓存指的是当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有要请求的资源的副本，就直接从浏览器缓存中提取，而不是从服务器中提取这个资源。

常见的HTTP缓存只能缓存GET请求响应的资源，对于其他类型的响应则无能为力。

HTTP缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在响应头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到请求头中传给服务器，看是否命中协商缓存，命中则返回304，否则服务器会返回新的资源。

使用HTTP缓存的原因：

1. 减少了冗余的数据传输，节省了网费；
2. 缓解了服务器端的压力；
3. 加快了客户端加载网页的速度，大大提高了网站的性能；

HTTP缓存的分类：

强制缓存和协商缓存：

根据是否需要重新向服务器发起请求来分类，可分为强制缓存和协商缓存。强制缓存如果生效，不需要再和服务器发生交互；而协商缓存不管是否生效，都需要和服务器发生交互。

强制缓存：

强制缓存在缓存数据未失效的情况下，即Cache-Control的max-age没有过期或者Expires的缓存时间没有过期，那么就会直接使用浏览器的缓存数据，不会再向服务器发送任何请求。强制缓存生效时，HTPP的状态码为200。

这种方式页面的加载速度时最快的，性能也是很好的，但是如果在这期间，服务器端的资源修改了，页面上是拿不到的，因为它不会再向服务器发请求了。

跟强制缓存相关的头属性有Expires和Cache-Control，用来表示资源的缓存时间。

1. Expires：响应头的缓存字段。GMT格式日期，代表资源过期时间，由服务器返回。如果时间没过期，不发起请求，直接使用本地缓存；如果时间过期，发起请求。是HTTP1.0的属性，在与max-age共存的情况下，优先级要低。
2. Cache-Control：请求头/响应头的缓存字段。

   属性值：

   1. no-store：所有内容都不缓存；
   2. no-cache：缓存，但是浏览器使用缓存前，都会请求服务器判断缓存资源是否是最新。
   3. max-age：单位秒，请求资源后的xx秒内不再发起请求。属于HTTP1.1属性，与Expires类似，但优先级要比Expires高。
   4. s-maxage：单位秒，代理服务器请求源站资源后的xx秒内不再发起请求，只对CDN有效。
   5. public：客户端和代理服务器（CDN）都可缓存。
   6. private：只有客户端可以缓存。

其实这两者差别不大，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，两者同时存在的话，Cache-Control优先级高于Expires；在某些不支持HTTP1.1的环境下，Expires就会发挥用处。所以Expires其实是过时的产物，现阶段它的存在只是一种兼容性的写法。

协商缓存：

当浏览器第一次向服务器发送请求时，会在响应头返回协商缓存的头属性：ETag和Last-Modified，其中ETag返回的是一个hash值，Last-Modified返回的是GMT格式的时间，标识该资源的最新修改时间；然后浏览器发送第二次请求的时候，会在请求头中带上与ETag对应的If-Not-Match，与Last-Modified对应的If-Modified-Since；服务器在接收到这两个参数后会做比较，会优先验证ETag，一致的情况下，才会继续比对Last-Modified；如果返回的是304状态码，则说明请求的资源没有修改，浏览器可以直接在缓存中读取数据，否则，服务器直接返回数据。

在强制缓存失效后，服务器会携带标识去请示服务器是不是需要用缓存，如果服务器同意使用缓存，则返回304，浏览器使用缓存。如资源已经更新，服务端不同意使用缓存，则会将更新的资源和标识返回给浏览器并返回200。

跟协商缓存相关的头属性有Last-Modified/If-Modified-Since、ETag/If-Not-Match，请求头和响应头需要成对出现。

1. Last-Modefied： 响应头的缓存字段。资源最新修改时间，由服务器告诉浏览器。
2. if-Modified-Since：请求头的缓存字段。资源最新修改时间，由浏览器告诉服务器，和Last-Modefied是一对，它两会进行对比。（其实就是上次服务器给的Last-Modified，请求又还给服务器对比）
3. Etag：响应头的缓存字段。资源标识，由服务器告诉浏览器。
4. if-None-Match：请求头的缓存字段。资源标识，由浏览器告诉服务器，和Etag是一对，它两会进行对比。（其实就是上次服务器给的Etag，请求又还给服务器对比）

HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：

1. Last-Modified标注的最新修改时间只能精确到秒，如果某些文件在1秒以内被多次修改的话，它将不能准确标注文件的修改时间；
2. 如果某些文件是被定期生成的话，内容没有任何改变，但Last-Modified却变了，导致文件无法再使用缓存；
3. 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形；
4. ETag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识，ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化，ETag值的变更则说明资源状态已经被修改，ETag能够更加准确地控制缓存。Last-Modified是可以与ETag一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

私有缓存和共享缓存：

根据是否可以被单个或者多个用户使用来分类，可分为私有缓存和共享缓存。

私有缓存（浏览器级缓存）：

私有缓存只能用于单独的用户。Cache-Control: Private

共享缓存（代理级缓存）：

共享缓存可以被多个用户使用。 Cache-Control: Public

使用HTTP缓存的方法：

静态的HTML页面想要设置缓存的话，可以通过HTTP的META设置expires和cache-control。

<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />