面试笔记(2)请谈谈你对浏览器缓存理解?

浏览器缓存理解

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

原文章链接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),格式:

image-20210902115237532.png

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

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

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

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

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

响应报文(response),格式:


image-20210902120127293.png

二、缓存过程

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

image-20210902143648591.png

可以在过程中注意两点:(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。

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

image-20210902165415330.png

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

image-20210902165519761.png
  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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容