00:00
Hello,同学们好,这节课呢,我们带着大家一起来继续学习浏览器的缓存,这个浏览器的缓存啊,能够极大的呃提高我们整体的这个呃系统运行的效率,当然也能够极大的提高我们用户访问的速度啊。浏览器缓存呢,在呃几乎所有的网站里边都会使用那浏览器缓存啊,同时它分成两大类。第一类呢,叫强制的浏览器缓存啊,这种强制浏览器缓存指的就是当我们的用户访问站点的时候。呃,我们的这个站点啊,会给它返回一个呃时间或者一个日期,那你把我当前这个数据页面拉取到你的浏览器里的,呃,这个之后啊,只要是在当前的有效期之内,那么这份数据呢,都不再需要去向我服务器去请求了。啊,这是呃,我们我们一般能理解的这个缓存,大概的这个意思啊,就是请求回来之后呢,只要是没过期啊,那我就一直用我本机磁盘的,或者是本机内存里的啊,一旦它要过期了呢,我再去重新发起请求,这叫强制性缓存,但是啊,在这个。
01:10
强制性缓存里边呢,其实通常它都有一个问题,这个问题呢,其实就是呃,一旦要是时间日期,你的系统啊发生一定变化之后,比如我当前这个电脑刚装的系统对吧?呃,他可能这个日期不太对。那这样呢,这个缓存可能就会失效。啊,这个是,呃,这种强制缓存的,呃,一个问题啊。然后另外呢,就是这个协商缓存,什么叫协商缓存呢?就是你来查一下,看看我有没有发生变化,而不是一味的单纯的去认为你你的这个本机上的这个时间就一定是正确的,即使我给你下发了对吧,我当前这个index tml在30分钟之后过期对吧,那你接接下来你调一下本机的这个。这个时间那也能够达到这个立即过期这种效果是吧?那接下来呢,我们可以换一种这种方式,只要我的文件没有改动,那不以你本机的时间为这个过期的标准而已,你要访问当前这个文件的修改日期为标准,只要这个文件没有被改动,那么接下来你就不再需要去下载,但这种情况呢,还是需要去发起请求的,呃,这咱们这么干将啊,可能。
02:25
有一点那个不太好理解。大家,嗯,咱们还是在这个图里边。咱们再说一下。白的空白的底儿,这是我们的客户端,他去访问我们的NG格。在他访问N这个词的时候啊。呃,比如说他想要找的是这个index.html,这indextml它在发起请求的时候去找,找到之后呢,N给他给下发下来,同时呢,告诉他这个文件的修改日期是啥时候,啥时候修改的the Mo。
03:11
Modify啊,这个时这个时间啊,这个最好是最后的时间,就last modify啊,最后的这个修改时间是啥时候,然后并且把这个时间呢告诉他,比如说咱们写一个时间。2022年,比如说五月,呃,28号。然后时间啊,具体的我们都给他写的,呃,详细一些,包括秒啊也有我就不写了,把这个过期不是把这个修改时间告诉他啊,然后呢,我们的浏览器拿到这个文件之后,下次在发起请求的时候,还是请求这个index htl,但是呢,带上这个last Mo,带上这个时间。这一个请HTTP请求啊,它是分请求头和请求体的,对吧,那在请求头里边我们可以写上last modify,它的这个时间。
04:08
那么当服务器接到这个请求的时候。你不是想要in天苗吗?你并且把这个last movie fan这个时间给我传递过来了,那OK,我去看一下,我去本机磁盘上去看一下这个真正的这个文件。看这个文件的last范跟你这个是不是能够对上,如果能够对上的话,那这会儿这份数据我就不传了,我直接就给你返回一个状态码。返回个304。这份数据不读了,一定要注意啊,一旦要是返回304之后,它并没有真正的这个,呃,这个这个内容上的输出,只只是给他返回了一个响应头,那浏览器一看到哦,有这个304了,那这个文件呢,那我接下来我我就知道了啊,那我就从本地磁盘去读就可以了。啊,这叫协商,协商式的缓存,协商的缓存啊,呃,他需要发请求的,这是需要发请求的,不是这个,呃,直接用本地的。
05:13
然后这种强制缓存呢,就是用本地的强制缓存呢,就比较好理解,请求打到N几N几返回文件,然后。并且在后边跟他给他跟上另外一个这个express啊,就是过期时间,什么时候过期啊,比如说我可以在NG去配,比如说三天过期啊,三天之后这个文件过期,那你把这个文件拉到本地,那你就开始计算吧,什么时候拉回来的对吧,然后接下来我去算有没有超过三天,如果没超过三天,直接在本机去读,压根就不像N这个服务器去发送请求,那这叫这个。呃。这种这这叫这个强制缓存,那强制缓存跟这个过期缓存啊,其实我们可以配合着来使用,以达到这个缓存最终的效果啊,就是我们的目标就是让用户使用上缓存,而不要去一味的去发送这种这个这个这个请求给我啊,使用这种协商缓存呢,虽然说有一定的这个请求打到我的服务器上,但是它能够有效的避免。
06:16
这种这个呃强制缓存这种过期啊,一种是啊强它已经这个它的时间已经错乱了啊,它会额外的发起请求啊,造成这个缓存失效,另外一种情况呢,就是呃缓存一直都不失效,因为时间,因为它是根据这个呃时间去判定的缓存是否失效啊,这个时间呢,就是基于客户端的,客户端时间我就没法控制啊,另一种方式呢,我就可以控制最后修改时间,但是你得问问我这个修改时间是啥。那接下来我们看看咱们之前的NG服务器。我们把这个配置文件打开看一下啊。
07:04
嗯。User local n几。那天。不是。CF。这个配置文件呢,已经被玷污过了,我们把它呢稍微清除清楚,呃,第一呢,就是有可能会有冲突,很明显的冲突呢,就是GZP,它会和这个,呃,咱们的这个这个缓存啊有冲突,另外一个就是ssi也会有冲突,我们把这个ssi给它关了,也就是说如果你开了ssi,它默认情况下呢,在发送这个。呃,投的时候呢,会省略掉这个last modify啊,这样就是最原始的状态了。把这些呢,我们全都先全都给删了。然后这呢,有一个express。这个我们先给它给注释掉。然后其他的呢,基本都不受影响了,这是一个比较干净的状态,然后呢,我们重启一下。
08:08
重启完成之后呢,我们访问一下。这个咱们这个站点。现在就是海。咱们演示的时候啊,先简单的去演示一个这个请求一个页面,然后多个请求多个页面呢,它的原理基本上是一样的。啊,大家看啊,我们现在啥都没配的情况下,把这个缓存全部都给它清除了,怎么清除呢?第一种方式是在这个Chrome浏览器上,它的刷新按钮上,你按右键,你按左键它直接就刷新了,对不对。你按右键,然后清空缓存并硬性重新加载。那这样呢,我们可以看到这个请求的这个,呃,结果两个都是呃返回了具体的内容,对吧,它真正的去拉数据回来了,这个数据大小是1.7K。先记住这个1.7K啊,然后这个状态码是200,这个也是200啊,还请求了一个CSS对吧。
09:02
呃,这是我们默认的NG,啥都没配,那我们看它的返回的显像头里边都有啥。这里我们首先需要关心的第一个。就是这个东西叫1T。第二个就是这个last modified。这两个现在呢,我们啥都没配置,NG呢,就把这个两个头都给我们返回来了,大家再仔细看一下,我们现在这个NG呢,是比较干净的,什么都没有,这keep跟它没有关系,Upstream我们现在也没用上,对吧,这upstream是配合这个process用的。那我们这以location下呢,啊,之前我写了一个express这个300秒,现在也给他给注掉了。但是他还会给我们返回1T和这个。这个last modified这1TAG和last modified就属于协商缓存。嗯。
10:01
1T和这个last modified,这两个呢都去标记它,它所标记的都是时间,Last modified呢标直接是标记的这个最后修改时间,大家看。在这儿。然后这个1T呢啊,它是生成出来的这个一个哈希值表示我当前这个文件的,呃,相对来说比较精确的哈奇。如果拿着这个文件名啊,再加上哈希值,同样也可以去比对当前文件有没有修改过,一旦要修改过,那这个1T一定会变的啊,如果没改过,1T就不变,1T表示的不是时间,而是它的这个文件的哈希。这两个呢,都是可以去通过这两个字段去协商的,只要是文件内容没变,或者是修改时间没变,我都可以认为现在这个,呃,现在这个这这这这个这个请求呢,我就不需要再去发这个,这个结果就不需要再去发给你了,你用本机的这个缓存就可以了,那他第一次访问的时候就给我们返回了1TAG和这个。
11:07
Modify。然后这是第一次啊,它是有大小的,因为我第一次呢,要去拉取数据回来,那这会儿呢,在磁盘上讲道理,它就已经有了,那我再刷新一下你看。Site变了,注意看,看见了吗?204B了。哎,但好歹它还是有size的,对吧,它没有desk,也没有from这个,呃,这个这个这个。是吧,好歹他还是有size的,大家看啊,请求是发了。但是返回的是个304,这304表示的在HTTP协议里边就是not modified,就是没有修改过。啊,这304就是NG服务器给我们返回回来的,虽然说我啥都没配,这NG呢,已经帮我干了好多事儿了。把304状态码返回反馈回来,那么接下来呢,它就可以。
12:02
是我们的浏览器啊,就可以自作主张的啊,从本机去找之前已经持久化好的这个文件了。你不要考虑它有没有找这个,这个找得着找不着,如果没找着的话,这浏览器啊。他不会在请求的时候发送这个东西,你看。请求的时候,他也是干了一些事儿的啊,他发这个东西了,叫if modify science。这衣服moify science,这个这个日期就是他第一次请求的时候下发下来的,那么这日期他从哪拿来的呢?就是从本机的缓存文件里读出来的。那他前一秒已经读到这个文件了。那么请求打过去,返回来304,那么接下来他把这内容给展示出来就可以了,这出错或者展示不出来,唯一有可能就是你请求打过去了,然后你迅速的把这个文件给删了,然后再接下来呢,反馈回来1304,那304,那你想从本地里找就找不着了,正常情况下是可以找得着的,然后这还有一个if nu much。
13:08
这里边所匹配的就是他的tag,你看这1TAG呢,在我第一次请求的时候,他给我下发下来了。然后在第二次请求的时候,他就可以携带这个if much。带过去了,我们再去校验一下,你看轻松清空缓存并硬性加载,这样吧,我们再新开一个标签。来,大家看啊走。我们清空缓存并硬性加载啊,你看现在呢,换了个标签就变成了什么呢?That'catch了,对不对啊,直接从磁盘去找了。来刷新,这是第一次请求啊,你看第一次请求的时候,Request header里和我们第二次请求的request header里边有明显的变化,就是这两个东西,If modify science if none。
14:03
这俩啊,就表示了我已经有这个文件了,这会儿呢,他没有这个文件,他也不知道他的哈奇值和它的这个。和他的这个最后修改时间,那只能去请求一下。请求完成之后呢,这边给他返回了1TAG,返回了last Mo five,那么接下来就可以去使用了,这是我们啥都没配,它可以使用这种协商式的缓存啊,那我们接下来配置完成之后呢,就可以使用这个强制的缓存了。啊,就直接你就压根儿就别给我发请求。其实这个NG啊,这种页面上的缓存啊,我们基本上来说啊,可以用它默认的这种,呃,1T加上last five这就可以了,但是呢,我们还是给大家再详细去讲解一下啊,它有一些其他的配置。
我来说两句