理解浏览器缓存 - Githubissues

问题背景 在网路服务器上新建了一个目录，用来给产品同学上传用户的半身像，突然有一天产品跑来说，我在服务器上替换了一个用户的半身像，为什么在页面上看到的还是旧的图片而不是新的？此时的你可以怎么解释给产品同学听呢？反正这时的只跟产品说是缓存的问题，但是对于缓存的细节还是没有很能解释清楚，比如

基于上面这些问题，就整理了下面这个文章，希望能一篇文章把Web缓存的各个方面都理解了，那我们就带着上面的问题场景，来阅读下面的内容吧。

默读三百遍，背下来！

Web缓存是一种保存资源副本并在下一次请求时直接使用该副本的技术；

当Web缓存发现请求资源已经被存储时，它会拦截请求，并返回该资源的副本，而不会去源服务器下载。

既然Web缓存好处那么多，那永久缓存资源是否可行呢？答案当然是不可以的，因为缓存只有有限的空间用户存储资源副本，所以缓存会定期将一些副本删除，这个过程叫做缓存驱逐。

所以才有下面比较复杂的缓存机制，有人也会说，既然那么麻烦，能不能服务器资源更新的时候，自动通知客户端缓存更新呀？答案当然是不可以的，因为HTTP是C/S模式的协议。意思就是说，服务器与客户端的通讯只能由客户端主动发起，而不能由服务器端自动下发的。

简单流程如下

比较具体的流程如下

Expires是HTTP/1制定的，受限于本地时间，所以会有不准确的情况，目前部分网站已经放弃了对这个字段的缓存策略，毕竟如果有Cache-control，Expires就会被忽略，这里对Expires的流程就后补吧（其实是发现同时在一个流程图上面体现有点困难...）

这两个字段由服务器的响应头返回，

expires 资源超时时间，即文件到了这个记录的时间点，就不能取缓存的内容，要重新请求服务器；时间是相对于服务器的时间，如果客户端时间与服务器时间不一致，那么缓存就会失效；
last-modified 该资源在服务器中最近更新的时间；

Cache-control可以在响应头或请求头中设置，并可以组合使用多种指令：

指令	作用
public	表示响应可以被客户端和代理服务器缓存
private	表示响应只可以被客户端缓存
max-age=30	缓存30秒后过期，需要重新请求
s-maxage=30	覆盖max-age，缓存30秒后过期，需要重新请求；只在代理服务器中生效
no-store	不缓存任何响应
no-cache	资源被缓存，但是立即失效，下次会发起请求验证资源是否过期
max-stale=30	30秒内，即使缓存过期，也使用该缓存
min-fresh	希望在30秒内获取最新的响应

在浏览器Network选项中看到该请求200的状态码，并且Size是 from disk cache 或者是 from menory cache。用google地址为例，可以看到该资源是强缓存策略下返回的资源

协商缓存就是强缓存失效后，浏览器携带缓存标识想服务器发起请求，有服务器根据缓存标识决定是否使用缓存的过程。

minhuaF / blog