有关浏览器缓存的字段

  • 对用户来讲,用户在浏览我们网站的时候,打开曾将浏览过的页面速度加快
  • 对开发人员来讲,利用缓存减少了对服务器的请求次数,缓解服务器的压力,减少带宽

请求和响应头中有关缓存的重要字段:Expires, Cache-Control, Last-Modified, If-Modified-Since, Etag, If-None-Match

启用缓存

Expires

Expires (HTTP1.0)值为日期,reponse返回,如果这个时间没有过期,那么浏览器就不会去向服务器发送请求,存在的问题是有可能本地时间与服务器的时间不同步,所以这个值不能完全作为判断资源是否过期的条件。

Cache-Control

在HTTP1.1中定义了Cache-Control字段,弥补了Expires的缺陷,也是response返回,最常用到的值有max-age=10800,public,第一个值代表的是从发送请求那一时刻开始的多少秒后缓存失效,public是指所有内容都将被缓存。

缓存验证

Last-Modified 与 If-Modified-Since

Last-Modified是写在response的header里,告诉浏览器服务器最后一次修改本文件的时间,当浏览器本地的缓存过期后,再次发起请求时就会带上If-Modified-Since,服务端会把这个值与文件当前的Last-Modified做对比,如果相同,则返回304,还是从缓存拿资源;如果不同,则返回200,并且返回新的资源。

Etag 与 If-None-Match

Etag response返回,浏览器会保存Etag字段的值,对于Etag是怎么生成的暂时还没有去研究,我想后端的同学应该是比较清楚的.当资源过期后,在request header中浏览器会带上If-None-Match字段,这个字段的值与Etag的值相同,服务器收到If-None-Match后会与当前的Etag值比较,原理与last-modified是相同的,

Image.png

既生Last-Modified 何生Etag

这两组字段都是用来做缓存验证的,用一组不就完了吗?
接下来说很重要的一点:

如果我们的服务端在一秒内修改了文件,那么Last-Modified是验证不到的

这个时候Etag的值就显得尤为重要,所以如果我们的系统同时用到这两组字段来验证缓存,那就意味着必须这两项都通过才能返回304

用户行为

F5刷新,此时的Cache-Control和Expires是以最新的请求时间开始计算的,所以之前的值无效;而Last-Modified和Etag的值还是有效的。
Ctrl+F5强制刷新,这时请求头如下,无论当前的缓存是否过期,服务器上的文件是否修改过,都要重新下载,这次请求不会再带上上面提到的用来做缓存验证的字段,返回status code200

image.png

未完,待续。。。

你可能感兴趣的:(有关浏览器缓存的字段)