浏览器的缓存机制

1:缓存类型

 1：强缓存
 2：协商缓存

1: 强缓存：不会向服务器发请求，直接从浏览器的缓存里面读取。状态码为200，size为from disk cache 或者 from memory cache。

2: 协商缓存：会向服务器发送请求，服务器会根据request header里面的参数判断是否命中缓存，如果命中就会返回304，并且带上新的response header返回通知浏览器从缓存文件里面读取数据。

2: 与强缓存相关的request header

1: Expires
2: Cache-Control

先来看一下各自的用法：

1: Expires: Wed, 21 Oct 2015 07:28:00 GMT
2: Cache-Control: 'max-age=60'

Expires设置的是一个在服务器端的绝对时间，意思是在这个绝对之间之前的请求，浏览器都直接从浏览器本地的缓存里面读取资源，不发请求。
Cache-Control: 'max-age=60' 里面的60，单位是秒，以上设置的意思是指之后的60秒以内的请求都从浏览器本地缓存里面读取，不发请求。
Expires是http1.0的，而Cache-Control是http1.1的，当两者都有的时候，是Cache-Control生效。只有在不支持http1.1的情况下，Expires才生效。
Expires属于response header, 但是，Cache-Control即可以出现在request header里面，也可以出现在response header里面，它的值也还有很多，下一篇再细讲。

3: 协商缓存
跟协商缓存相关的header主要有四个，其中request header 2个，response header 2个。
1: request header

1: If-None-Match
2: If-Modified-Since

2: response header

1: Etag
2: Last-Modified

1: 先解释一下2个response header是什么：
Etag
Etag是资源的唯一标识，只要资源发生变化，Etag就是重新生成。Etag会在上一次资源加载时，通过reponse header返回，浏览器会把这个Etag保存起来。
Last-Modified
Last-Modified是资源最后一次被修改的时间，也是通过response header返回，浏览器也会把这个时间保存起来。
2: 再来看看这2个response header怎么用
浏览器在请求的时候，会把Etag的值赋给If-None-Match；把Last-Modified的值给If-Modified-Since,也就是：

If-None-Match: ${Etag}
If-Modified-Since: ${Last-Modified}

服务器处理这条请求，拿到这次的Etag和Last-Modified的值与服务器上的资源的Etag和Last-Modified比较，如果相同，那就命中协商缓存。

这两队的作用是一样的，但是都有各自的优缺点：
1: 精确度
Etag > Last-Modified
因为Last-Modified的精读是秒，如果一个文件在一秒之内改变了很多次，那Last-Modified不会变。但是Etag是只要资源发生变化，Etag就会更新，那缓存的命中率就会高一些，也可以说是更精确。
2: 性能
Last-Modified > Etag
因为Last-Modified只需要保存一个时间值就好，而Etag需要服务器用算法算一个hash值。
3: 优先级
Etag> Last-Modified

PS: 虽然在上面的内容里面，在cache-control出现在强缓存那节，协商缓存也没有提到cache-control，但是cache-control的某些情况下也会触发协商缓存，这个内容在下一篇文章再讲。