说明：浏览器缓存是将文件保存在客户端，页面的缓存状态是由header决定的

强缓存

强缓存主要使用Expires、Cache-Control 两个头字段，两者同时存在Cache-Control 优先级更高。当命中强缓存的时候，客户端不会再求，直接从缓存中读取内容，并返回HTTP状态码304，下面是响应状态（response headers）

http/1.0 Expires：

1. 响应头，代表该资源的过期时间，如果客户端在过期时间之前再次获取该资源，就不需要再请求我服务器了，可以直接在缓存里面拿，Expires：max-age=3600
2. Expires优点：在过期时间以内，直接从本地缓存读取，减少了网络请求，首屏渲染更快，用户体验更好
3. Expires缺点：由于是基于时间来判断缓存是否过期，缓存过期以后，不管服务器文件有没有变化，都会重新发起请求；判断缓存是否过期，要依赖客户端的时间，客户端时间可能不准确，就可能发起请求

http/1.1 Cache-Control：

请求/响应头，缓存控制字段，精确控制缓存策略

响应头：

1. max-age：缓存最大的有效时间
2. s-maxage：用于共享缓存(CDN缓存)，只对 public 缓存有效
3. public：指定响应会被缓存，并且在多用户间共享
4. private：响应只作为私有的缓存，不能在用户间共享，HTTP认证，响应会自动加上private
5. no-cache：指定不缓存响应，资源不进行缓存，加上private
6. no-store：绝对禁止缓存
7. must-revalidate：指定如果页面是过期的，则去服务器进行获取

请求头：

1. max-stale：3600，表示客户端到代理服务器上拿缓存的时候，即使代理缓存过期了也不要紧，只要过期时间在3600 秒之内，还是可以从代理中获取的
2. min-fresh：3600，表示缓存需要一定的新鲜度，在到期前 3600 秒之前的时间拿
3. only-if-cached：这个字段加上后表示客户端只会接受代理缓存，而不会接受源服务器的响应，如果代理缓存无效，则直接返回504

协商缓存

last-modified/if-modified-since和cache-control：

1. Last-Modified：表示这个响应资源的最后修改时间
2. If-Modified-Since：当资源过期时（cache-control：no-cache,max-age=0），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头If-Modified-Since:Last-Modified的值
3. web服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对，若最后修改时间变化了，说明资源又被改动过，则响应整片资源内容，HTTP 200；若最后修改时间没有变，说明资源无修改，则响应HTTP 304,告知浏览器继续使用本地缓存

etag/if-none-match和cache-control（优先级高）：

1. etag：根据实体内容生成一段hash字符串，标识资源的状态，由服务端产生
2. if-none-match：当资源过期时（cache-control:no-cache,max-age=0），发现资源具有etag声明，则再次向web服务器请求时带上头,if-none-match：etag的值
3. web服务器收到请求后发现有头if-none-match则与被请求资源进行相应的比对，若资源内容没有修改返回304，否则返回200

LocalStorage和sessionStorage

LocalStorage：本地持久化存储

sessionStorage：会话存储，关闭浏览器就会删掉