浏览器缓存解析

浏览器缓存
浏览器缓存分为几个阶段：
浏览器缓存阶段
一.强制缓存阶段
1.cache-control: 决定了浏览器端和服务器端缓存的策略，可以出现在响应头response header中，或者 请求头 request header中

max-age：指定缓存的最大有效时间，eg:cache-control:max-age=315360000,注意与expires做区分（与cache-control平级）,max-age优先级高于 expires，这个属性时HTTP1.1中新增的属性

s-maxage：指定public的缓存，缓存设备有很多，不仅仅浏览器是缓存设备，在整个网络中，可能会存在代理服务器，CDN属于public缓存设备，因为可以多用户访问并读取信息；什么是private缓存呢，指的是只是你个人访问的设备，浏览器就属于private缓存设备，eg:s-maxage=31536000；他的优先级高于max-age，只能设定public的缓存设备
private
public

no-cache：错误理解：不使用缓存；no-cache指的是不管本地是否设置了max-age（即忽略本地浏览器端的缓存策略），都要向服务器端发送请求，由服务器端来判断缓存情况

no-store：完全不使用任何的缓存策略，不管是服务器端还是浏览器端的

2.expires:Thu, 14 Mar 2019 17:29:17 GMT，这个属性时HTTP1.0中配置，

缓存过期时间，用来指定资源到期时间，是服务器端具体的时间点。
告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。

二.协商缓存阶段
基于客户端和服务器端的协商缓存机制
1.last-modified
last-modified – response headerif-modified-since – request header
需要与cache-control共同使用，如果配置了max-age 且没有过期，就不会使用last-modified；过期了之后，才会使用last-modified。
last-modified 缺点：

服务器端不能精确获取 文件变更时间时
文件修改时间改了，文件内容没有变
以秒为单位，如果是ms内修改了文件，就体现不出来

2.ETag
文档内容的hash值ETag —- response headerif-None-Match —-request header
etag优先级高于last-modified
状态码解析

200(from cache): 浏览器端缓存，cache-control:max-age=315360000 或者expires起作用

304: 服务器端缓存,last-modified 或者 etag 起作用
200：浏览器端没有缓存，或者服务器端缓存失效，或者用户点击了ctrl+F5 浏览器直接从服务器端下载最新的数据

注意：Chrome浏览器，手动点击刷新按钮都会 在请求头中，添加 chche-control:max-age=0,这样就肯定不会使用浏览器端的缓存！
更加详细，请参考：缓存详解