今天的主题让我想起了过去的无知和愚蠢，不过谁不是一点点进步的了~
有一次，向开发提了一个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 彻底得禁用缓冲，本地和代理服务器都不缓冲，每次都从服务器获取。
网友评论