浏览器缓存策略

今天的主题让我想起了过去的无知和愚蠢，不过谁不是一点点进步的了~

有一次，向开发提了一个web端的bug，回归后还是有问题，忍不住和开发妹子一起复现，才知道连F5与ctrl+F5区别都没搞清楚。

1、强缓存与协商缓存

1）强缓存

强缓存指不需要再次请求服务器，直接使用缓存的资源；

2）协商缓存

请求资源时，本地该资源的Etag 同时带到服务端，和最新资源做对比。若Etag不变则返回304，浏览器读取本地缓存；反之，返回200和最新的资源。

2、Catche-Control与Expires关系

Expires 是http1.0的参数，设置的是绝对日期时间；

Cache-Control是http1.1的参数，其中max-age设置的是相对时间,缓存内容将在xxx秒后失效;

为什么说Catche-Control比Expire优先级高呢？是因为Expire也会因为本地与服务器的时间存在误差导致不准确。

3、浏览器缓存步骤

1）当浏览器第一发送请求时，获得响应资源，此外response_header里也包括Etag与Last-Modified。

PS:Etag是资源的唯一标识符，如果它的值变动，代表资源也变动（理解为映射关系）

2）展示页面，并将页面资源与Etag与Last-Modified一起缓存。

3）第二次发送请求时，请求头里携带if-None-Match（Etag)、if-Last-Modified（Last-Modified）发送给服务器。比较Expires/Cache-Control,如果未过期则进行强缓存。再比较标识符，如果标识符改变，说明资源改变，服务器返回200和资源，并将新的内容进行缓存。反之，返回304和空响应体（协商缓存），读取之前的缓存。

图片来源于网络

PS:if-None-Match的优先级高于if-Last-Modified；因为if-Last-Modified会因为本地与服务器的时间存在误差导致不准确。

4、F5与ctrl+F5区别

1）F5

浏览器将 cache-control 的 max-age 直接设置为0，让缓存立即过期，直接走协商缓存，且服务端返回304；

2）ctrl+F5

强制刷新下，浏览器强行设置 no-cache，强制获取最新的资源， if-modified-since等其他缓存协议字段都无效。

PS:

no-cache本地可以有缓存，需要服务器验证才可以使用；

no-store 彻底得禁用缓冲，本地和代理服务器都不缓冲，每次都从服务器获取。