请谈谈你对浏览器缓存理解?

浏览器缓存理解

学习浏览器缓存知识时整理了下看的文章,感谢原作者的分享。希望读者能指出不足之处,大家一起进步。

原文章链接https://www.cnblogs.com/chengxs/p/10396066.html
https://baijiahao.baidu.com/s?id=1632338894380251715&wfr=spider&for=pc

一、http请求报文和相应报文

http报文份两种:请求报文和响应报文。请求报文是客户端向服务端发送请求的信号,响应报文是服务端响应处理后回传给客户端的信号。

  1. 请求报文主要由四个部分组成,分别是请求行、请求头、空行和请求体。

    (1)请求行:内容分为请求方法(常见有get和post)、url和http协议版本,每个字段由空格分隔,行最后以回车+换行(CR+LF)结尾。这里值得一提的是CR回车符的作用是回到改行的行首,LF换行的作用是换到下一行但不一定是下一行的行首;

    (2)请求头:主要内容是一些字段的名字和值,比如Accept: application/json、Accept-Encoding: gzip,deflate,br、User-Agent:~~~这些字段。客户端用来向服务端传递一些特殊的信息;

    (3)空行:由CR+LF组成,该行不能够缺少,用户分割请求头和请求体;

    (4)请求体:用户存放客户端向服务端发送的参数或者说是数据,当时get请求时,没有请求体,因为数据都在url后面拼接。

    请求报文(request),格式:

在这里插入图片描述
2. 响应报文是服务端接收到客户端的请求后进行处理,完事后会向客户端发送一个http响应报文,里面携带了一些参数信息和返回给客户端的数据内容。主要由四个部分组成:分别是状态行、响应头、空行和响应体。

(1)状态行:http版本、状态码(200,304,404等)和状态描述符,由空格间隔,行最后以CR+LF结尾;

(2)响应头:服务端回传给客户端的一些标识信息;

(3)空行:由CR+LF组成,不可缺少;

(4)响应体:服务端返回给客户端的数据;

响应报文(response),格式:
在这里插入图片描述

二、缓存过程

在第一次浏览器向服务器发起请求获取资源后,服务器端将资源和缓存信息一起返回给浏览器,浏览器根据服务器返回的缓存规则来判断是否将资源放入浏览器缓存中。

在这里插入图片描述

可以在过程中注意两点:(1)浏览器每次在向服务器请求资源之前会先去浏览器缓存查看是否缓存存在以及是否过期,如果该缓存不存在或者已过期,则才会向服务器进行请求新的资源;(2)浏览器每次接收到服务器传回的资源后会根据其中携带的缓存规则,判断是否将资源写入浏览器缓存;

三、强制缓存

  1. 控制强制缓存的字段为Expires和Cache-Controll,其中Cache-Controll的优先级比Expires要高,同时存在时,只有Cache-Controll生效。

    Expires是http1.0中控制网页缓存的字段,记录了服务器返回给客户端资源的到期时间。客户端再次发送请求时如果客户端的时间小于Expires的值,则直接读取缓存,否则向服务器重新获取资源。

    而Cache-Controll则是属于http1.1中控制网页缓存的字段,代替了原来http1.0中的Expires。原因是Expires字段控制缓存的原理是使用客户端时间与服务端返回的时间进行对比 ,如果客户端与服务端的时间由于某些原因,比如说时区的不同发生误差,那么会导致强制缓存失效。

    在HTTP/1.1中,Cache-Control是最重要的规则,主要用于控制网页缓存,主要取值为:

    (1)public:所有内容都将被缓存(客户端和代理服务器都可缓存)

    (2)private:所有内容只有客户端可以缓存,Cache-Control的默认取值

    (3)no-cache:客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定

    (4)no-store:所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存

    (5)max-age=xxx (xxx is numeric):缓存内容将在xxx秒后失效

  2. 接下来可以分析浏览器的缓存是放在哪的?

    打开网页的检查功能,点击network,可以在Size这一栏中看到三种情况:xxkB、(memory cache)和(disk cache)。其中xxkB表示这个资源的大小,一般是第一次请求、客户端没有缓存资源、Cache-Controll字段配置no-cache(协商缓存)等。memory-cache表示内存缓存。disck-cache表示硬盘缓存。这三个情况代表了该资源的来源,缓存被读取的顺序是:memory-disk。下面针对memory-cahce和disk-cache做出详细介绍。

    memory-cahce:表示从内存中读取缓存。一般来说,浏览器会将解析后的文件存入进程的内容中,占据该进程的一定内存资源,方便下次运行使用时的快速读取(文件免解析)。但是一旦该进程被关闭,则该进程的内存会被清空。

    disk-cache:表示从硬盘中读取缓存。及把资源文件直接存入硬盘文件中,读取该缓存时要对硬盘文件进行I/O操作(意味着耗时麻烦),然后需要重新解析该文件的内容(意味着耗时麻烦),速度要比memory-cache要慢很多。

  3. 关于强制缓存的个人理解

    对于强制缓存生效我个人的理解是这样的,需要满足两个条件:(1)浏览器端根据服务器传递的缓存规则一定是缓存了该文件的,且Cache-Controll这个字段不是no-cache(协商缓存);(2)如果有资源缓存失效时间,则一定没有失效;当上面两个条件有一个条件不满足时,强制缓存失效,浏览器开始走协商缓存或者是重新获取资源。

四、协商缓存

  1. 协商缓存是在强制缓存失效后,浏览器携带缓存的表示符号向服务端发起请求,然后服务器根据缓存表示来决定浏览器是否是否缓存的过程。协商缓存有两种情况,成功和失败对应返回状态码分别为:304和200。

    情况一:协商缓存成功,浏览器成功获取缓存内容。

在这里插入图片描述

​ 情况二:协商缓存失败,浏览器重新获取服务器传来的资源。

在这里插入图片描述

  1. 控制协商缓存的字段

    协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的,控制协商缓存的字段分别有:Last-Modified / If-Modified-SinceEtag / If-None-Match,其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。

    (1)Last-Modified / If-Modified-Since

    Last-Modified是服务器响应请求时,返回该资源文件在服务器最后被修改的时间。

    浏览器在再次请求时将Last-Modified的值写入请求头 If-Modified-Since的字段中传递给服务器。通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求,发现请求头含有If-Modified-Since字段,则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比,若服务器的资源最后被修改时间大于If-Modified-Since的字段值,则重新返回资源,状态码为200;否则则返回304,代表资源无更新,可继续使用缓存文件。

    (2)Etag / If-None-Match

    Etag是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成)

    If-None-Match是客户端再次发起该请求时,携带上次请求返回的唯一标识Etag值,通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后,发现该请求头中含有If-None-Match,则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值