浏览器缓存机制

浏览器缓存的规则是在HTTP请求头和响应头中定义的。分别从资源的新鲜程度和校验值来规定浏览器是否可以直接使用缓存。
与缓存相关的请求头响应头如下，其中Expires和Pragma属于http1.0，如果同时存在max-age和Expires，max-age覆盖Expires

Expires: Wed, 21 Oct 2015 07:28:00 GMT
Cache-Control: public/private/no-cache, max-age = ?,
Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
ETag: 33a64df551425fcc55e4d42a148795d9f25f89d4
Pragma相当于Cache-Control

与缓存相关的请求头如下

If-Modified-Since
If-None-Match

缓存策略

浏览器与缓存相关有三个策略：过期策略、协商策略、存储策略，前两个策略用来确定浏览器是否取缓存；存储策略则用来确定如何缓存资源。
如上图所示，浏览器发起一个请求，首先判断是否有本地缓存，如果没有的话向服务器请求资源，否则判断缓存是否过期，过期的话向服务器发起验证，否则取缓存，服务器验证通过的话，返回304状态码，浏览器取缓存，并且根据响应头跟新对应的资源的缓存信息，如果验证没有通过，服务器返回200状态码，并将新的资源返回给浏览器，浏览器根据响应头更新缓存信息。
过期策略由Expires、Cache-Control、Pragma等响应头决定；协商策略由If-Modified-Since、If-None-Match等请求头决定；Last-Modified和ETag用来决定存储策略

过期策略

浏览器缓存的资源的时候把对应的Expires或者Cache-Control响应头一同缓存下来，Expires用来决定资源什么时候过期，Cache-Control中的max-age用来决定保存多长的时间，单位为秒。
max-age比Expires优先级更高，Expires是属于http1.0的，当服务端时间和客户端时间不同步的时候会导致一些问题，所以max-age更加可靠一些

协商策略

浏览器缓存的资源的时候把对应的Last-Modified或者ETag响应头一同缓存下来，Last-Modified用来标识资源最近一次被修改的时间，ETag用来标识资源内容等信息，比如可以根据当前的资源内容生成md5的字符串。
浏览器请求该资源的时候，发送If-Modified-Since请求头，请求头对应Last-Modified的缓存信息；发送If-None-Match请求头，对应ETag缓存信息。
服务器收到请求的时候，查看资源最近一次修改的时间或者对应的ETag信息。如果匹配的话，就返回304状态码，同时可以发送新的响应头，用来跟新缓存信息，比如延长缓存时间。
但是对于及其敏感的文件，Last-Modified存在缺陷，只能识别秒的级别的变化，ETag会比较可靠一些，但是ETag需要服务器端自己去生成tag，会消耗一定的响应时间。

存储策略

浏览器缓存资源的时候，缓存上面提及的那几个响应头

ctrl + f5和f5、在浏览器里面输入url并回车的区别

输入url并回车是最普通的刷新页面的方式，会走所有的缓存机制。f5是忽略过期策略，比如firefox会发送请求头Cache-Control: max-age = 0，向服务器发起请求。ctrl + f5，就是忽略过期策略和协商策略向服务器发起请求，例如浏览器不发送If-Modified-Since和If-None-Match请求头，直接向服务器发起请求。这三种方式，不同浏览器的处理方式不同。