1.状态码304

客户端有缓存的文档发出一个条件性的请求（提供If-Modified-Since头标识客户端缓存修改时间），服务器告诉客户端，原来缓存的文档还可以继续使用。

2.具体过程

• 客户端请求一个资源时，发现自己缓存的文件有Last Modified，那么在请求中会包含If Modified Since,这个时间就是缓存文件的最后修改时间。
• 服务器根据这个时间和当前请求文件的修改时间，就可以确定是否返回304还是200，对于静态文件，服务器会自动完成最后修改时间的比较，完成缓存或者更新，返回304则表明，该资源从上次缓存到现在并没有修改过，条件请求可以确保客户端资源是最新的同时，避免每次都请求完整资源给服务器带来的性能问题。
• 对于动态页面，往往没有Last Modified信息，浏览器和代理服务器不会做缓存，每次请求的时候都会完成一次200的请求。
• 如果要对动态html页面做缓存加速，那么服务器要在响应报文的头部添加Last Modified定义，再根据请求报文中的If Modified Since来决定返回200还是304，如果返回304则返回的只是一个响应报文的头部，不包含主题部分，从而大大降低带宽的消耗，提高用户体验。

3.浏览器判断缓存是否可用的流程

process.png

• 浏览器如何判断缓存是否过期？
  根据相应报文的Cache-Control和Expires这两个属性，这两个属性记录了资源过期的时间，在该日期前的所有对资源的请求都会直接使用浏览器缓存，返回200状态码，而不会向服务器请求，两个属性都存在时Cache-Control优先级较高。

• 服务端如何判断缓存已失效？
  Last-Modified
  当缓存过期时，发现资源具有Last-Modified声明，则在请求头部带上If-Modified-Since，服务器收到相应请求后，会将这个信息与请求资源最后修改时间进行对比，如果资源修改时间较新，则说明资源被改动了，则相应HTTP200和相应资源，若最后修改时间较旧，说明资源无新修改，则相应HTTP304，浏览器直接继续使用所保存的cache
  Etag
  资源在服务器的唯一标识（生成规则由服务器决定），缓存过期时，发现资源带有Etag声明，则会在请求头部带上If-None-Match，服务器收到请求后会与被请求资源的相应校验串对比，决定返回200或204
  注意：服务器可以根据自己的缓存机制的需要，选择ETag或Last-Modified来做缓存判断的依据，甚至可以两个同时参考

• 为什么有Last-Modified还要Etag？
  1.Last-Modified标注的时间只能精确到秒
  2.如果文件被定期生成，当有时内容没有什么变化，但Last-Modified改变了，导致文件没法使用缓存
  3.服务器没有准确获取文件修改时间

• 200OK(from cache)和304 Not Modified的区别？
  1.200OK不会向服务器发送请求，本地的资源没有过期，直接使用本地缓存文件。
  2.304Not Modified则向服务器询问，如果服务器认为浏览器的缓存还能使用，则返回304。
  一般手动刷新时，都会向服务器询问本地缓存是否能使用，返回304

4.Cache-Control策略

指明资源的有效期，选择更多设置更细致，与Expires同时设置，优先级高于Expires,其中max-age指示资源的过期时间
而Expires策略则是，返回的到期时间为服务端的时间，客户端时间和服务器时间相差很大，那么误差就会很大，在HTTP1.1版开始，使用Cache-Control的max-age字段来代替
例如，外网一般会对html文件设置一个较短的缓存时间，如cache-control: max-age=600；对于js和css文件设置一个较长的缓存时间，如cache-control: max-age=31536000，js和css文件由文件的md5后缀来决定是否重新加载；图片文件则可以在链接中加上max_age参数，服务端会以此返回对应Cache-Control响应头

参考博客：
浏览器 HTTP 协议缓存机制详解
浏览器缓存机制