浏览器缓存控制

web资源在浏览器端的缓存通常是通过相应头和请求头里的相关字段来控制的，包括 etag、last-modified、expires，cache-control，这几个字段出现的顺序有时间先后，作用也有所不用。

1. etag
etag类似于用MD5给文件进行电子签名，它以文件的时间戳、文件内容等作为参数生成一小段唯一的标识字符串，每次对文件的修改都会在etag上体现出来。响应头里的etag会被浏览器保存下来，在再次发起请求时，其作为请求头中if-none-match的值返回给服务器，进行比对，决定返回304还是200.如果etag没发生变化，则返回一个body为空的响应，也就是304。

   ETag:"107-554cb4803cf6c"

2. last-modified
作用于etag类似，但是其值是以秒为单位的时间，既文件最后一次被修改的时间。请求头中与last-modified相对应的字段为if-modified-since。

 Last-Modified:Fri, 21 Jul 2017 08:30:37 GMT

3.expires与cache-control

Expires:Mon, 24 Jul 2017 07:00:01 GMT
Cache-Control:max-age=604800

expires和cache-control都可以控制文件的过期时间。不同的是：expires的值是一个时间的绝对值，然而用户浏览器的时间、服务器时间、多台负载均衡服务器之间的时间通常是不太一致的。cache-control的是值是一个时间的相对值，既一段时间，超出这段时间范围既失效。

4.etag、last-modified、expires，cache-control之间的关系
etag和last-modified 都是服务器端产生，在浏览器端保存，最后返回到服务器端验证。虽然通过这种方式能够减轻服务器的压力，解决一些请求资源时的性能问题。但是细细看来，还是存在一些浪费：每个都要去带上条件请求服务器来看资源是不是最新的，大多情况下是最新的情况下每次都在做无意义的验证，于是expires、cache-control 派上了用场。expires、cache-control都是在服务器端产生，在浏览器端保存，同时也是在浏览器端验证的。如果文件还在有效期内，则直接采用缓存，不需要再向服务器验证文件的有效性。

如果比较粗的说先后顺序应该是这样：
1. Cache-Control —— 请求服务器之前
2. Expires —— 请求服务器之前
3. If-None-Match (Etag) —— 请求服务器
4. If-Modified-Since (Last-Modified) —— 请求服务器

如果同时有 etag 和 last-modified 存在，在发送请求的时候会一次性的发送给服务器，没有优先级，服务器会比较这两个信息（在具体实现上，大多数做法针对这种情况只会比对 etag）。服务器在输出上，如果输出了 etag 就没有必要再输出 last-modified（实际上大多数情况会都输出）
如果同时有 expires 和cache-control 存在，一般采用cache-control的过期时间。

最后完事后的讨论 – 各种途径的访问
浏览器输入 url 之后敲下回车，刷新 F5 与强制刷新(Ctrl + F5)，又有什么区别？

实际上浏览器输入 url 之后敲下回车就是先看本地 cache-control、expires 的情况，刷新(F5)就是忽略先看本地 cache-control、expires 的情况，带上条件 If-None-Match、If-Modified-Since，强制刷新(Ctrl + F5)就是不带条件的访问。

值得注意的是，如果是 浏览器输入 url 之后敲下回车 你在 network 里面看到的状态往往是 200，但是大小是 0。这是因为这个 200 是上次访问资源返回的状态码。