强缓存、协商缓存具体过程

当我们第一次访问某个页面时，我们会获取这个页面的静态资源文件，把他保存在本地磁盘，这种缓存被称为 http缓存 ，http缓存分为两种，强缓存 和 协商缓存 ，接下来就具体分析一下这两者。

一、判断强缓存和协商缓存

根据上面的图，当浏览器第2——>n次访问此网页时，首先会去本地磁盘 判断是强缓存还是协商缓存，根据第一次请求时，服务端返回的expires和Cache-Control来判断(第一次请求返回的响应头同样被保存在磁盘里，里面有expires和Cache-Control两个字段的信息)，expires和Cache-Control具体字段：


expires是http1.0的规范，里面有该资源的失效时间，只要是在失效之前，该资源始终有效。

expires:Mar, 06 Apr 2020 10:47:02 GMT。

Cache-Control: 是http1.1中出现的，一般利用该字段的max-age来判断，这个值是一个相对时间。

Cache-Control:max-age=3600 // 代表着资源的有效期是3600秒

除了该字段还有其他的几个常用的值。

no-cache：不直接使用强缓存，每次都使用协商缓存。
no-store：直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。

Cache-Control比expires的优先级要高

cache-control:max-age=691200
expires:Fri, 06 Mar 2020 10:47:02 GMT

那么表示资源可以被缓存的最长时间为691200秒，会优先考虑max-age。

二、协商缓存继续判断

以上判断出了，如果没过期，这个就是强缓存，过期了后，这必定就是协商缓存了，以下涉及到了四个属性

Last-Modify  If-Modify-Since

Etag  If-None-Match

Last-Modify是第一次访问此页面时，服务端返回的值，我们把他保存在本地磁盘(像expires和Cache-Control一样)，当我们再次发起请求时(已经判断是协商缓存不是强缓存了)，会把Last-Modify的值复制一份，放在请求头里发送给服务端，而此时这个属性名就改变为 If-Modify-Since，也就是说，Last-Modify只存在响应头，If-Modify-Since只存在请求头。
If-Modify-Since的值被服务端判断(服务端最后一次更新资源时间会被记录下来，对比这两个时间，如果更新时间 等于If-Modify-Since的值)，返回304，请求体无数据，前端获取304，自己拿协商缓存。如果（服务端资源更新时间 新于If-Modify-Since的值），返回200和最新的缓存数据。


从上面看可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag呢？

服务端一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新获取；
服务端某些文件修改非常频繁，比如在秒以下的时间内进行修改，还是在这一秒，内容改变了，时间还是这个时间。

所以Etag作为唯一标识，可以进行缓存内容的对比，而不是仅仅时间的对比。
Last-Modified与ETag作用是一模一样的，而且，Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

同样，这里的ETag和 If-none-match也是这个意思，浏览器第一次请求资源，获取ETag的值，浏览器将此值赋值给If-none-match，发送给服务器(ETag只存在于响应头，If-none-match只存在于请求头)，
返回对应状态码和缓存和以上last-modify类似。