关于浏览器的缓存机制

Cache-Control:no-cache

当我们页面发起请求，服务端返回给浏览器response header，里面通常会包括cache-control,Last-Modified等信息；

而cache-control通常会设置为no-cache;

Cache-Control:no-cache 的意思是不使用缓存，但是还是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性；

服务器接受到请求时，就会校验资源是否要修改；

刷新动作返回 304 状态码与 Last-Modified

当客户端有刷新动作时或者强刷时，就会像服务器咨询服务端是否有修改，此时的请求头是带有If-Modified-Since:上次浏览器更新的版本的；
服务器收到请求，会根据请求头的If-Modified-Since 和本地文件的修改时间做对比，如果没有修改就返回304，如果有修改就返回200

etag

单纯的以修改时间来判断还是有缺陷，比如文件的最后修改时间变了，但内容没变。对于这样的情况，我们可以使用etag来处理。

etag的方式是这样：服务器通过某个算法对资源进行计算，取得一串值(类似于文件的md5值)，之后将该值通过etag返回给客户端，客户端下次请求时通过If-None-Match或If-Match带上该值，服务器对该值进行对比校验：如果一致则不要返回资源。
If-None-Match和If-Match的区别是：

If-None-Match：告诉服务器如果一致，返回状态码304，不一致则返回资源

If-Match：告诉服务器如果不一致，返回状态码412

expires

缓存过期其实缓存文件是没有删除的，所以你会看到现象expires时间有时候会比当前时间还小怎么没有200，实际上是它发头信息上去对比结果服务器上结果还是没有修改，所以还是返回304状态读取了本地缓存.

Expires 有缺点，比如说，服务端和客户端的时间设置可能不同，这就会使缓存的失效可能并不能精确的按服务器的预期进行

no-store优先级最高

在Cache-Control 中，这些值可以自由组合，多个值如果冲突时，也是有优先级的，而no-store优先级最高。

重复刷新访问，会发现每次的状态码都是200，原因是no-store的优先级最高，本地不保存，每次都需要服务器发送资源

Ctl+F5

Ctrl+F5要的是彻底的从Server拿一份新的资源过来，所以不光要发送HTTP request给Server，而且这个请求里面连If-Modified-Since/If-None-Match都没有，这样就逼着Server不能返回304，而是把整个资源原原本本地返回一份，这样，Ctrl+F5引发的传输时间变长了，自然网页Refresh的也慢一些。我们可以看到该操作返回了200，并刷新了相关的缓存控制时间。

FonZrh_J5auduA4JaqZKW9hZqXrG.png

实际上，为了保证拿到的是从Server上最新的，Ctrl+F5不只是去掉了If-Modified-Since/If-None-Match，还需要添加一些HTTP Headers。按照HTTP/1.1协议，Cache不光只是存在Browser终端，从Browser到Server之间的中间节点(比如Proxy)也可能扮演Cache的作用，为了防止获得的只是这些中间节点的Cache，需要告诉他们，别用自己的Cache敷衍我，往Upstream的节点要一个最新的copy吧。
在Chrome 51 中会包含两个头部信息，作用就是让中间的Cache对这个请求失效，这样返回的绝对是新鲜的资源。

状态码 200 from cache

浏览器发现该资源已经缓存了而且没有过期

浏览器缓存常见问题及解释

1. 问题：缓存多久是看浏览器传给服务端的头信息还是返回来的头信息？

是看服务器返回来的头信息Cache-Control，意思是服务器告诉浏览器需要缓存多久，对于缓存相关的头信息，Response Header 是告诉浏览器你要对缓存做什么比如缓存多久；如果服务器对请求头的信息有处理另说；

2.本地缓存过期看到过期时间比当前时间都早，还是返回304

原因：为本地缓存过期之后向服务器请求，服务器资源没有变化导致（If-Modified-Since和Last-Modified对比），其实这里还是读的本地缓存，过期不代表被删除了。

304 vs 200 from cache

304是指资源已经过期了，并且去服务器请求，服务器在检验完Last-Modified 与 etag 后告诉浏览器，没有更新，请继续使用本地缓存

200 from cache 服务器上次返回告诉浏览器过期时间，缓存没过期，不去服务器请求，继续使用本地缓存；

参考：

浅谈http中的Cache-Control

HTTP缓存控制小结

浅谈浏览器http的缓存机制