HTTP强缓存与协商缓存超详细图文讲解

1. 介绍

Web缓存大致可以分为: 数据库缓存、服务器端缓存(代理服务器缓存、CDN缓存)、浏览器缓存(http缓存、indexDB、cookie、localstorage、DNS缓存)，本次主要讲解http缓存。

2. 名词术语

在具体了解HTTP缓存之前先来明确几个术语:
缓存命中率
从缓存中得到数据的请求数与所有请求数的比率。理想状态是越高越好。比如说第一次请求后浏览器缓存了10个资源，第二个请求时有8个资源是可以重复利用的，那么缓存命中率就是80%,性能更高，网页加载速度更快

过期内容
从服务器请求回来的资源放到浏览器是有一个期限的，超过设置的有效时间，被标记为“陈旧”的内容。通常过期内容不能用于回复客户端的请求，必须重新向源服务器请求新的内容或者验证缓存的内容是否仍然准备。

验证
验证缓存中的过期内容是否仍然有效，验证通过的话刷新过期时间。

失效
失效就是把内容从缓存中移除。当内容发生改变时就必须移除失效的内容。

3. http缓存作用范围

浏览器第一次请求响应的时候到第二次请求或者后续请求时开始工作，也就是至少有两个http请求

4. 浏览器第一次请求

5. 浏览器第二次请求

6. 浏览器缓存分类

浏览器缓存分为强缓存和协商缓存
浏览器加载一个页面的简单流程如下:

1. 浏览器先根据这个资源的http头信息来判断是否命中强缓存。如果命中则直接加在缓存中的资源，并不会将请求发送到服务器。

2. 如果未命中强缓存，则浏览器会将资源加载请求发送到服务器。服务器来判断浏览器本地缓存是否失效。若可以使用，则服务器并不会返回资源信息，浏览器继续从缓存加载资源，这就是协商缓存。协商缓存会发请求到服务器。

3. 如果未命中协商缓存，则服务器会将完整的资源返回给浏览器，浏览器加载新资源，并更新缓存。

7. 强缓存

命中强缓存时，浏览器并不会将请求发送给服务器。在Chrome的开发者工具中看到http的返回码是200，但是在Size列会显示为(form memory cache or from disk cache)。

200 form memory cache
不访问服务器，一般已经加载过该资源且缓存在了内存当中，直接从内存中读取缓存。浏览器关闭后，数据将不存在（资源被释放掉了），再次打开相同的页面时，不会出现from memory cache。

200 from disk cache
不访问服务器，已经在之前的某个时间加载过该资源，直接从硬盘中读取缓存，关闭浏览器后，数据依然存在，此资源不会随着该页面的关闭而释放掉下次打开仍然会是from disk cache。

强缓存是利用http的返回头中的Expires或者Cache-Control两个字段来控制的，用来表示资源的缓存时间。

Expires 响应头字段
缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。如下图，这个时间就是这个资源的到期时间，是一个绝对时间。

Expires 缺点
是一个绝对时间，如果客户端本地时间被修改后，服务端和客户端的时间偏差变大，就会导致缓存混乱，于是发展出来了Cache-Control

Cache-Control
Cache-Control是一个相对时间，例如Cache-Control:3600，代表着资源的有效期是3600秒。在浏览器拿到资源时就开始算起，由于是相对时间，并且都是与客户端时间比较，所以服务器与客户端时间偏差也不会导致问题。
Cache-Control与Expires可以在服务端配置同时启用或者启用任意一个，同时启用的时候 Cache-Control优先级高。
Cache-Control可以由多个字段组合而成，主要有以下几个取值:

1. max-age指定一个时间长度，在这个时间段内缓存是有效的，单位是s。
   例如设置Cache-Control:max-age=31536000，也就是说缓存有效期为(31536000/24/60*60)天。
   

其他取值（了解）

2. s-maxage 同max-age，覆盖max-age、Expires，但仅适用于共享缓存，在私有缓存中被忽略。

3. public 表明响应可以被任何对象(发送请求的客户端、代理服务器等等)缓存。

4. private 表明响应只能被单个用户(可能是操作系统用户、浏览器用户)缓存，是非共
   享的，不能被代理服务器缓存。

5. no-cache 强制所有缓存了该响应的用户，在使用已缓存的数据前，发送带验证器的请
   求到服务器。不是字面意思上的不缓存。

6. no-store 禁止缓存，每次请求都要向服务器重新获取数据。

7. must-revalidate 指定如果页面是过期的，则去服务器进行获取。

8. 协商缓存

什么是协商呢？
浏览器发送请求到服务器询问我请求的文件是否更新过期

1. 没有更新过期，浏览器可以使用缓存，返回304，不会返回资源内容。
2. 过期了，浏览器不可以使用缓存，服务器发送新的资源到浏览器。状态码200

若未命中强缓存，则浏览器会将请求发送至服务器。服务器根据http头信息中的Last-Modified / If-Modified-Since或Etag / lf-None-Match来判断是否命中协商缓存。如果命中，则 http返回码为304，浏览器从缓存中加载资源。

Last-Modified
浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modified，Last-Modified是一个时间标识该资源的最后修改时间。

If-Modified-Since
浏览器再次请求该资源的时候，发送的请求头中会携带 If-Modified-Since，就为之前返回的 Last-Modified的值，服务器收到If-Modified-Since之后，根据资源的最后修改时间判断是否命中缓存。

ETag
与Last-Modify/If-Modify-Since不同的是，Etag / If-None-Match返回的是一个校验码。
etag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。类似于git的提交版本。 ETag值的变更则说明资源状态已经被修改。服务器根据浏览器上发送的If-None-Match值来判断是否命中缓存。

If-None-Match

为什么有了Last-Modified/If-Modified-Since还需要eTag？

1. Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间

2. 如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了导致文件没法使用缓存

3. 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形。

   Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

9. 注意

部分谷歌浏览器版本会存在协商缓存返回304的bug，可以升级最新版本或者使用火狐浏览器查看即可。