一、缓存（cache）是用来干什么的？

主要是通过减少对服务器的访问，加快页面的加载速度，提升用户体验。

满足一定条件下，客户端就不需要向服务器发送请求，而是直接在本地缓存中读取资源，这大大加快了获取资源的速度，也减小了服务器的压力。

在第一次浏览器向服务器请求资源时，服务器就会在 Response Headers 里对缓存进行配置。如 cache-control: max-age=？ public no-store ...

二、强缓存？

浏览器不会向服务器发送任何请求，而是直接在本地缓存中读取资源，并返回状态码200

强缓存的header参数

1.Expires：过期时间，如果设置了时间，则浏览器会在设置的时间内直接读取缓存，不再请求

2.Cache-control: 当cache-control里的 max-age=300(s)，则意味着在这个请求后的五分钟之内再次加载相同资源，会直接命中强缓存; cache-control还有一些其他字段，在这里只简单介绍了max-age

图片来自网络

三、协商缓存？

上面说的强缓存简单来说就是给缓存资源设置一个过期时间，浏览器每次想要请求资源时都会判断一下这个资源是否过期，只在过期的时候才去向服务器请求资源。

如果浏览器在某次请求资源的时候发现本地缓存的资源过期了，这时候就会向服务器发送请求，并设置协商缓存

因此，协商缓存是需要浏览器向服务器发送请求的，服务器会根据 request header 里面的一些参数来判断是否命中协商缓存：如果命中，则返回 304 状态码，并且在 response header中携带新的参数，通知浏览器从缓存中读取资源；如果没有命中，则返回 200 状态码，并且服务器会返回新的缓存资源给浏览器

协商缓存的header参数：

Etag / If-None-Match(每个资源的唯一标识字符串) ：

1.Etag：（由服务器返回）用来帮助服务器控制浏览器端的缓存验证，如果文件被更改了 If-None-Match 就变了

2.If-None-Match: 当资源过期后，浏览器向服务器发送请求，并在 header 中带上 If-None-Match (值为Etag的值)，服务器收到后判断该值与最初返回给浏览器的Etag值比对有没有发生变化，如果变了则说明文件被更改了，则返回新的资源和状态码200；没变则返回状态码304通知浏览器从缓存中读取资源

Last-Modified / If-Modified-Since：

1.Last-Modified : （由服务器返回）服务器向浏览器发送的资源的最后修改时间

2.If-Modified-Since: 在浏览器向服务器发送请求时会携带 If-Modified-Since(值为Last-Modified的值)。服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response header