- 对用户来讲，用户在浏览我们网站的时候，打开曾将浏览过的页面速度加快
- 对开发人员来讲，利用缓存减少了对服务器的请求次数，缓解服务器的压力，减少带宽
请求和响应头中有关缓存的重要字段：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
未完，待续。。。
网友评论