如果我理解正确,使用ETags的流程就像现在描述的那样:
>浏览器将请求发送到服务器.服务器使用ETag发回图像
>浏览器将资源与ETag一起保存
>在下一个请求中,浏览器使用包含已保存ETag的标题If-None-Match发送请求.
返回响应时,chrome dev工具告诉我这些是我的标题
Cache-Control:max-age=7200
Connection:keep-alive
Content-Type:image/png
Date:Thu,27 Apr 2017 13:42:57 GMT
ETag:"b36f59c868d4678033d318a182658e18371df8f5"
Expires:Thu,27 Apr 2017 15:42:57 GMT
Server:Nginx
Transfer-Encoding:chunked
X-Debug-Token:873c8f
X-Debug-Token-Link:http://localhost:8081/_profiler/873c8f
现在,当我重新加载页面时,不会收集新图像.它可以通过Chrome的内存缓存或磁盘缓存保存,如您所见
但为什么会这样呢?我发送了一个ETag,为什么浏览器不向服务器发出另一个请求,而是使用它自己的缓存?
我问的原因是,我们想要缓存我们的图像,但是一旦它们发生变化,它们应该立即更新.为什么Chrome会这样做?
更新
我只是注意到它在Firefox上很有用,所以这似乎是一个chrome“功能”而不是配置.
更新2
为此图像设置我的新标题后
Cache-Control:max-age=0,private
Connection:keep-alive
Content-Type:image/png
Date:Thu,27 Apr 2017 14:44:57 GMT
ETag:"e5b18bdebe44ed4bba3acb6584d9e6a81692ee27"
Expires:Fri,27 Oct 2017 14:44:57 GMT
Server:Nginx
Transfer-Encoding:chunked
X-Debug-Token:3447a6
X-Debug-Token-Link:http://localhost:8081/_profiler/3447a6
Chrome仍然使用磁盘缓存来处理数据.这是我的Nginx吧
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)${
access_log off;
add_header Cache-Control "max-age: 0,must-revalidate";
}
更新3
我刚做了一些进一步的研究.设置Expires标记后,Chrome会立即使用内存或磁盘缓存.与max-age相同.我不明白,即使设置了必须重新验证,只要设置了Expires或max-age => 0,Chrome就不会重新加载资源.
最佳答案
服务器告诉chrome该资源在接下来的2小时(7200秒)内是好的.据推测,你的第二个要求早于此.
最好使用max-age:0或者max-age:0,必须重新验证.然后,虽然你永远不会得到一个完全缓存的操作(甚至没有打扰到服务器),你仍然可以让服务器发送304 Not Modified响应来告诉浏览器它可以使用缓存的实体(并更新任何基于的元数据)标题(如果适用)因此,当您仍然发生请求响应时,将仅发送大约300字节而不是实体的数千字节或更多.