有关浏览器缓存的字段

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

请求和响应头中有关缓存的重要字段: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

未完,待续。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浅谈浏览器Http的缓存机制 ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ 针对浏览器的http缓存的分析也算是老生常谈了,每隔...
    meng_philip123阅读 1,065评论 0 10
  • 针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必...
    全端玩法阅读 905评论 0 9
  • 针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必...
    单纯的土豆阅读 406评论 0 2
  • 浏览器缓存,也就是客户端缓存,既是网页性能优化里面静态资源相关优化的一大利器,也是无数web开发人员在工作过程不可...
    单纯的土豆阅读 417评论 0 1
  • 哈哈。今天上了一次大学生职业规划课程,开始老师给每位同学发了一个长一百岁的纸条,做了个游戏。首先让我们没人撕下自己...
    oneyi123阅读 201评论 0 0