http:200(from-cache)&http:304

200 (from-cache) vs 304

静态资源的本地缓存有两种形式，一种是200(from-cache)，另一种是304。 这两种方式有什么区别？

简单的来讲，200(from-cache)就是没有发起 http 请求。

而304则是向服务器发起了一次请求，服务器发现文件没有被改变，则返回304使浏览器应用本地文件。

那么，这两种方式，又是通过什么来触发的呢？

简单的说就是通过cache-control来控制的。通过浏览器调试工具，我们可以看到，在触发304时，cache-control的值为max-age=0 。当cache-control为max-age=0时，可以当成是浏览器强行向服务器发起请求，当服务器获得请求之后，检查请求，发现对应文件并没有变化，这时就会返回304，而浏览器接到304回应，则会调用本地缓存的文件。

通过comand+r或f5刷新浏览器的时候，会触发浏览器将cache-control设置为max-age=0，这时就会接收到304请求了。

说到浏览器调试工具，chrome 浏览器调试工具中，还有一项是Disable cache。当启用这个选项时，会发现所有的请求都是正常的200请求，也就是每次都会从服务器完整的下载静态资源，这个又是怎么实现的？

还是继续来看cache-control，这时我们会发现cache-control的值变成了no-cache，也就是说强行不使用缓存，所以在服务端接到这个请求的时候，会静态文件再完整的返回。

bonus:

• Expires

  Expires也可以控制缓存。使用Expires，可以为资源设置一个“保质期”，在超过“保质期”之后，浏览器会自动强行从服务器取回完整的静态文件内容，并根据返回的 http response 重新为其设置一个“保质期”。 虽然使用Expires也可以达到缓存的效果，但是使用Expires也有一些弊端：

  1. 因为Expires是一个时间格式，也就是它的值是一个具体的日期值，这就要求服务器时间要和用户时间一致。
  2. 还有就是，因为Expires是一个时间值，如果不小心将其写死，那么当日期过了这个值的时候，每次请求都将请求完整的静态文件内容。

• cache-control

  除了Expires之外，还可以通过cache-control来控制静态文件的缓存。cache-control是一个可以设置多种类型值的字段，可设置的类型如下：

  1. max-age=[seconds] 当response中使用这个类型时，这个类型的值可以将文件的缓存设置为当前用户之间的的多少秒之后过期，当request中这个值为max-age=0时，将强行向浏览器发送请求，检测该文件是否已被修改。
  2. s-maxage=[seconds] 与max-age类似，但是不同的是，这个值只能用于共享缓存
  3. public 当response中使用这个类型时，标记该文件缓存可以被共享
  4. private 当response中使用这个类型时，标记该文件缓存不可被共享
  5. no-cache 当request中使用这个类型时，浏览器将强行从服务器取得文件的全内容
  6. no-store 当response中使用这个类型时，声明该文件内容不应该被缓存
  7. must-revalidate 当response中使用这个类型时，使用该文件时，每次都会向服务器请求，查看该文件是否被更新
  8. proxy-revalidate 与must-revalidate类似，只是标记该文件不能被共享