复习状态码跨到了解浏览器缓存是什么操作?

311 阅读4分钟

初衷是复习状态码,但通过抓包实践发现常用的也就200和304,既然都复习了状态码,那也做下总结代表我看过了,重头戏感觉更是副作用的304,浏览器的缓存机制(强缓存和协商缓存)。切入正题如下


  • 状态码做啥的?你见过404么?
    相信大家在打开网页时都见过404吧,一个漂亮的找不到送给你,这个404就是所谓的状态码。我在mdn上找到定义如下:

HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。响应分为五类:信息响应(100–199),成功响应(200–299),重定向(300–399),客户端错误(400–499)和服务器错误 (500–599)。状态代码由 section 10 of RFC 2616定义

大概理解就是服务器告诉你你请求的东西的状态,404只是其中之一,具体可分为五大类信息响应类(1xx),成功响应(2xx),重定向(3xx),客户端错误(4xx),服务器错误(5xx)具体见下图

看完头大么?大家应该不会看完吧,挑点常用的记吧

  • 101:换协议了
  • 200:成功了(最喜欢的)
  • 301:永久性重定向(搬家了,浏览器自动跳到重定向资源位置)
  • 302:临时重定向(上别人家玩玩,临时性的犯2,不会像301那样直接给换了)
  • 304:协商缓存(一会儿接着说)
  • 400:语义错误,请求无法被服务器理解,或者请求参数有误
  • 403:禁止访问,通常由于服务器上文件或目录的权限设置导致的WEB访问错误
  • 404:资源找不到,大概是请求网址打错了或者服务器真没有你要的
  • 500:服务器端在执行请求时发生了错误(后端的错不是前端的锅)
  • 503:服务器正忙(停机维护)

  • 你知道状态码304么?谈一谈对该状态的理解
    想回答好这个问题,就得了解浏览器的缓存机制了,大神们写的太好了,我的表述达不到他们的高度(那我也要说说我的理解),建议大家看看,我最后会附在参考资料

储存位置
从这个图来看Service Worker(不太熟悉,看了后知道是独立线程,不阻塞js等执行,需要在https协议中使用)

  • 有存在运存的(memory cache);
  • 有存在硬盘的(disk cache),具体咋存我不太清楚,但我知道存在运存中的数据读取比硬盘中的快,且减少损耗硬盘;快慢附张图说明

但也不能因为运存储存的优点肆意妄为,运存占多了会卡(计算机大脑就那么多,自己都精打细算,随便用不太好,凡事都是有得有失么!)

  • 还有一个国内不太用的,因为http2推广不好(push cache)

用户行为会影响浏览器的请求行为

  • 第一次进url时先看浏览器缓存硬盘表中有没有记录,有的话看看过期没,没过期直接用,过期在协商
  • 当用户普通刷新时先看运存中有没有有先可运存来,然后是硬盘
  • 强刷时就直接向服务器发请求,不考虑缓存

最后总结强缓存和协商缓存

  • 强缓存是设置expires(据说是个老东西快过时了)字段和Cache-Control字段,在时间范围内直接拿去用,但迟早会有过期那天,过期也就有了协商缓存
  • 协商缓存对应etag(类似于中国人的身份证号,具有唯一性,只要文件变它就变)和Last-Modified:文件的修改时间;当协商时浏览器请求时会带上他俩但变了个名字(ETag-->If-None-Match,Last-Modified-->If-Modified-Since)服务器做比对,如果没变就返给客户端说我没变化你就上缓存中拿去吧,这时状态码就是304,那如果不一样呢则会直接更新etag和Last-Modified,存到浏览器对应表中,供下次使用状态码是200

参考资料