我们经常会看到请求地址中状态存在304、200
如果客户端（浏览器）发送的是一个条件验证请求,则web服务器可能会返回304响应,这就表明了客户端中所请求资源的缓存仍然是有效的,也就是说该资源从上次缓存到现在没有被修改过，浏览器会自动识别并读取缓存中的文件来显示
在进行条件请求时，一般请求头会带上 If-Modified-Since、 If-None-Match，这两个值分别对应响应头 Last-Modified、 ETag 返回的值
服务器会读取到这两个请求头中的值,判断出客户端缓存的资源是否是最新的,如果是的话,服务器就会返回304 Not Modified响应,客户端收到304响应后,就会从缓存中读取对应的资源.
另一种情况是,如果服务器认为客户端缓存的资源已经过期了,那么服务器就会返回200 OK响应,响应体就是该资源当前最新的内容.客户端收到200响应后,就会用新的资源覆盖掉旧的缓存资源.
只有在客户端缓存了对应资源且该资源的响应头中包含了Last-Modified或ETag的情况下,才可能发送条件请求.如果这两个头都不存在,则必须无条件请求该资源,服务器也就必须返回完整的资源数据.
当用户访问一个网页时,条件请求可以加速网页的打开时间(因为可以省去传输整个响应体的时间),但仍然会有网络延迟,因为浏览器还是得为每个资源生成一条条件请求,并且等到服务器返回304响应,才能读取缓存来显示网页.更理想的情况是,服务器在响应上指定Cache-Control或Expires指令,这样客户端就能知道该资源的可用时间为多长,也就能跳过条件请求的步骤,直接使用缓存中的资源了.可是,即使服务器提供了这些信息,在下列情况下仍然需要使用条件请求:
- 在超过服务器指定的过期时间之后
- 如果用户执行了刷新操作的话
浏览器缓存机制
第一步： 当前缓存是否过期？ 第二： 服务器中的文件是否有改动？
200状态 ------ （浏览器没有缓存）或者（Etag和Last-Modified缓存失效的时候）或者（ctrl + f5），浏览器直接去服务器下载新的数据
304状态 ------ （当Expires和Cache-Control失效的时候）或者（f5刷新），浏览器就会发送请求给服务器，如果没有变化，则返回304
200状态（from cache）------ 当Expires（绝对时间）和 Cache-Control（相对时间）有效的时候，浏览器访问自己的缓存，Cache-Control优先级比Expires高
判断是否缓存过期
主要的方式有两种，这两种都是设定请求头中的某一个字段来实现的：1、Expires；2、Cache-Control。Cache-Control设置后优先级比Expires高，先说下通过Cache-Control来控制缓存。
Cache-Control：max-age =86400；如果在请求头中设定了
那么在86400s内，如果再去请求这个文件的话，是不会发起请求的。因为还没有过期呢！唯一例外是如果这个文件是你在浏览器地址栏输入的地址来请求的（比如你请求http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/prettify.css），当你刷新的时候就会让当前的这个文件所设定的过期时间失效，直接去请求服务器来看是返回个304还是返回新文件。一般这么请求的都是我们常说的入口文件（例如index.html），入口文件一刷新就会重新向服务器请求，但是入口文件里面所引入的文件如js，css等不会随着刷新而另过期时间失效。除非你单找出来那个引入链接，通过浏览器地址栏去查询它并刷新
判断文件变动
常用的方式为Etag（一般是文件的MD5值）和Last-Modified，思路上差不多，这里只介绍Last-Modified的用法。
Last-Modified方式需要用到两个字段：Last-Modified 和 if-modified-since。
先来看下这两个字段的形式：
-
Last-Modified:
Sat, 28 Oct 2017 06:01:34 GMT
-
If-Modified-Since:
Sat, 28 Oct 2017 06:01:34 GMT
当第一次请求某一个文件的时候，就会传递回来一个Last-Modified 字段，其内容是这个文件的修改时间。当这个文件缓存过期，浏览器又向服务器请求这个文件的时候，会自动带一个请求头字段If-Modified-Since，其值是上一次传递过来的Last-Modified的值，拿这个值去和服务器中现在这个文件的最后修改时间做对比，如果相等，那么就不会重新拉取这个文件了，返回304让浏览器读过期缓存。如果不相等就重新拉取。