浏览器缓存(强缓存、协商缓存) --- cache-Control、Etag 、Last-Modified

浏览器缓存

缓存会根据请求保存输出内容的副本，例如页面、图片、文件，当下一次请求来到的时候，如果是相同的URL，缓存直接使用本地的副本响应访问请求，而不是向源服务器再次发送请求。

缓存机制

浏览器第一次请求

第二次请求

从以上两幅图，可以清楚了解浏览器缓存的过程

• 首次访问一个URL，没有缓存，但是服务器 会响应一些header信息，如：expire、cache-control、last-modified、etag等，来记录下次请求是否缓存、如何缓存
• 再次访问这个URL时，浏览器会根据首次访问返回的header信息，来决策是否缓存，如何缓存

第一条线路

当浏览器再次访问某个URL时，会先获取资源的header信息，判断是否命中强缓存，如命中，直接从缓存获取资源，包括响应的header信息（请求不会和服务器通信），也就是强缓存

第二条线路

如果没有命中强缓存，浏览器会发送请求到服务器，请求会携带一次请求返回的有关缓存的header信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服务器根据请求中的相关header信息来对比结果是否协商缓存命中，如果命中，服务器返回新的响应header信息***更新缓存***中的对应***header信息***，但是 不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容，也就是***协商缓存***

与强缓存有关的header字段有两个

1. expires
   这是**http1.0时的规范，它的值为一个绝对事件的GMT格式的时间字符串，如Mon,10Jun201521:31:12GMT，如果发送请求的时间在expires之前，那么本地缓存始终有效，否则就会发送请求到服务器来获取资源

2. cache-control

   cache-control:max-age=number,，这是http1.1时出现的header信息，主要是利用该字段的max-age来进行判断，它是一个相对值；资源第一次的请求时间和Cache-Control设定的有效期，计算出一个资源过期时间，再拿这个过期时间跟当前的请求时间比较，如果请求时间在过期时间之前，就能命中缓存，否则未命中，cache-control除了该字段外，还有下面几个比较常用 的设置值：

   • no-cache: 不使用本地缓存，需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务器验证，如果资源未被更改，则可以避免重新下载
   • no-store: 直接禁止浏览器缓存数据，每次用户请求资源，都会向服务器发送一个请求，每次都会下载完整的资源
   • public: 可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器
   • private: 只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存

tips: 如果cache-control与expires同时存在的话，cache-control的优先级高于expires

协商缓存

协商缓存都是由浏览器和服务器协商，来确定是否缓存，协商主要通过下面两组header字段，这两组字段都是成对出现的，即第一次请求的响应头带上某个字段（Last-Modified或者 ETag），则后续请求会带上对应的请求字段(If-Modified-Since或者 If-None-Match)，若响应头没有 Last-Modified或者 ETag字段，则请求头也不会有对应的字段

1. Last-Modified/If-Modified-Since
   二者的值都是GMT格式的时间字符串，具体过程：
   • 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在response的header加上 Last-Modified字段，这个header字段表示这个资源在服务器上的最后修改时间
   • 浏览器再次跟服务器请求这个资源时，在request的header上加上 If-Modified-Since字段，这个header字段的值就是上一次请求时返回的 last-Modified的值。
   • 服务器再次收到资源请求时，根据浏览器传过来 If-Modified-Since和资源在服务器上的最后修改时间判断是否有变化，如果没有变化则返回304NotModified，但是不会返回资源内容，如果有变化，就正常返回资源内容。当服务器返回304NotModified的响应时，response header中不会再添加 Last-Modified，因为既然资源没有变化，那么Last-Modified就不会改变，如果没有命中就会更新 Last-Modified
2. Etag/If-None-Match
   这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化这个值就会改变；其判断过程与 Last-Modified、If-Modified-Since类似，与 Last-Modified 不一样的是，当服务器返回304的时候， 由于Etag重新生成过，response header会把这个Etag返回，即使这个Etag跟之前的没有变化

tips: Last-Modified与ETag可以一起使用，服务器会优先验证ETag， 一致的情况下才会比对Last-Modifed

Modified与ETag可以一起使用，服务器会优先验证ETag， 一致的情况下才会比对Last-Modifed