00:00
嗨,同学们好,在学完这个浏览器缓存的具体使用方法之后呢,我们在最后给大家总结一些呃,使用上的一些技巧和经验吧。呃,因为浏览器缓存是几乎所有我们这些程序员在以后工作当中啊,必定会碰着的这些,呃,这个这个缓存数据,所以在这呢,嗯,给大家多讲一点这个一些使用上的一些心得和经验。那首先呢,第一个啊,我们看一下就是在多机负载的时候,也就是说在你的上游服务器上,你部署了好几台机器,那如果想要使用这个浏览器缓存的话啊,那么它的这个last Mo find,这就必须得保持一致,因为有很多时候我们在同步数据的时候啊,你这个所谓的垃last moify并不是你这个,呃,最终的上传时间,而是最后的修改时间,你一定要避免某些机器可能会修改文件里边的这个云数据信息啊,有很多时候可能会碰到这个云数据信息,他稍微一改一下这个拉moify它就不一样了,如果要是前面的NX作为这个反应代理服务器,然后做了一个集群的负载均衡,那么后边呢,有好几台机器。
01:10
那机器上的这个文件讲道理它应该是一样的,对吧,虽然说可能它内容一样,但最后拉目的范不一样,这也可能会导致呃客户端的混沌失效啊,因为文件它压根就不一个嘛,对吧,包括这个1T和这个也是一个道理,那1TAG呢也得是一样的。啊,才可以这个真正的把这个缓存用的这个比较好一些。那第二个呢,就是,呃,有的时候吧,我们可能会。不期望使用这个浏览器的缓存,但是又不太好把它给关掉,因为我们无法控制客户端的这些行为,那客户端又不是我们下发的,对吧,但是呃,我们的用户自己在网上下载的浏览器。那我们如何如何才能够彻彻底底的把这个客户端的缓存给禁用掉呢?那其实还有另外一种方法,就是我们呃可以这个,呃把他这个请求的URL啊,呃随着我的变化呢,给他额外的发这个这个额外的这个加上一些额外的信息。
02:10
啊,比如说加上这个版本号信息,呃,比如说加上这个一些这个额外的一些扰乱的这个,呃,这个哈希值的扰乱码,具体展示形式呢,比如说有可能你看见过这种API,比如说呃,V1,然后什么account。然后这个是这个,呃,什么ADD user,那就举个例子吧,比如这是一个API的地址,那前面这个V1就是VERSION1啊,对吧,你稍微改一改,你可以给它改成1.1 1.01对吧,1.02在一的这个版本项,你可以让他改100次,如果要再多的话,你可以随便加,那么他每次请求的地址压根就不一样了,所以他的这个缓存呢,基本上也就呃无法使用了。所以这是呃禁用缓存的一个简单的办法,另外还有就是直接在这个后边呢,加上这个呃额外的一些信息,比如写一个哈气值。
03:05
就是针对于当前这个版本号的一个哈希值,你把这个呃版本号呢,给它挪到后边,这个也是一种方法啊,因为有很多这个老的项目,这uri啊,它是不允许改变的,也是你已经用了那么多年了,你不可能把它前面再给它加一个版本,所以这也是一个比较好的办法啊,这是禁用浏览器缓存啊,加随机数什么的也都可以啊。呃,然后还有就是在缓存的时候,我们下发缓存,如果你要配置的这个,呃不太对,或者下配的话有可能。把这个跳转页面你也给它配成缓存了,但一般来说浏览器的识别三零几的这种请求的时候是不会缓存的。但如果你要是强制的让他去缓存到客户端,那这样其实也是呃导致缓存失效的这么一种情况啊,这种30G的跳转,呃,希望它redirect你不要再让它缓存了啊,一旦要是这跳转地址你发生变化了,你那么就非常有可能他还用的是老的地址啊。
04:04
然后这个嗯,CSSJS这些啊也是啊,可以拿这个版本号去这个去标记一下当前的这个,呃,文件的这个版本是啥,以避免它文件失效啊,这些其实我们通过观察各大网站,淘宝京东这些都可以看到,呃,他们现在正在使用的方式其实就是这样,一就是在前面加版本盒,第二就是在后边加版本号啊。呃,然后这里边呢,还有就是如果在页面当中呢,有一些这个数据啊,它不太需要特别强的一致性,嗯,那么我们就可以给它简单的缓存一会啊,比如说在页面当中有包含这种这种情况,我我我又引用了另外一个API的接口,那么实时的去展示价格,呃,或者是库存数。啊,如果你的并发量特别大,其实这会儿你就可以针对于当前这个接口给它,嗯,给这个稍微缓存,那么一会儿,那缓存的时效呢,由我们来配置,大家也都会配了,对吧,这样呢,就能极大的呃,提高这个我们的并发,并发的这个性能,减少用户的请求了。
05:09
呃,那再有就是异步加载这种接这种接口数据啊,那既然我们想要去缓存它,那么你如果要是在后端服务器上呢,你可你去加这个版本号,觉得比较麻烦的话,你可以采用一个通用的方式,就是通过ET来去做这个校验,就是在header里边加上当前的这份,呃,资源的1TAG,这个1TAG。他一定是在在你资源真正生成完之后,它才能够去生成这个1T的,因为它需要这个content的大小,对吧?呃,然后这个呃,我们可以用N几个S,或者是我们的上游服务器,比如tomca,呃,面向于切面去读取完整的这个响应数据,再去给它加一个1TAG的头,用这种方式呢,去把这个harder里边的这1T给他给传递过来,那客户端建到1TAG,如果下次没变的话,那么他可能就不请这这个这个呃,这服务器端就不会再发送出去给他了,这个用了一套之后,这个主动权发不发新数据,这主动权是在我们服务器端,当然呢,这个种情况也是增加了一些连接,因为它需要这个。
06:16
呃。协商对吧,就是我们之前讲的协商缓存,它还会向服务器端去发发请求,那如果要是用这个last modify这种啊,或者c control,它就不再发请求了,对吧。然后再有就是在服务器端呢,你可以增加一些这个server投信息啊,我们在看京东的这个header里边呢,也能看到它用的是index对吧,用淘宝能看见它是ten g啊,那么嗯,加了这些这个服务器的这个投信息,那么我们能够明显的呃,能够追踪一下这个服务器究竟是哪台机器给我们返回的这个数据了啊,多加一些这些信息呢,甚至有的时候呢,我们会把。这个这个这个多路多,这不叫多路啊,把这个上下游的这个每一台机器,它的唯一的标识都会给他写在我们这个header里。
07:04
它有便于我们去追踪整个请求的链路,究竟问题出现在哪儿,即使看不出来问题是啥,但我们能够去排查这几台机器,看是不是这这这几台机器上我们的配置有什么问题,那其他机器有没有这种问题,那我们就可以通过对比,然后呢就可以一步一步去排查错误了。然后再有就是这个,呃,我们的客户端啊,不一定全部都是这个,呃,浏览器啊,现在这个有很多同学去工作,那么去开发一些手机的这个API,是手机的这个应用的API,这种情况也比较多,对吧,那你如果要是手机的上边的这个开发的话,你一定要。嗯,在和这个呃,前端的这个这个这个程序员在沟通的时候,你要跟他聊好,你们用的是呃什么形式去请求后端的接口,对吧,你是否遵循标准的HTTP协议,因为不一定他是遵循HTTP协议的啊,有很多这个这个框架,他可能会改一些这个客户端这些请求,或者因为这个每。
08:08
每个这个平台上啊,它的具体实践也有一丝差异,所以在上线之前啊,尽可能还是多做一些测试啊。嗯,再有就是我们使用了缓存的一些好处吧,比如在没有联网。的状态下,也可以展示出来一部分数据,因为他之前有一些预先的缓存嘛,对吧,就是当前网络虽然说中断了,因为他这个嗯。用了这个客户端的缓存已经在本机里了,他在想点一下在在退回去之前的这个访问过这个地址,他不管是后后退操作,还是点击一个之前呃已经点击过的链接,这些都是可以给他展示出来的,就浏览器呢,就支持一种功能。啊,再有就是避免流量消耗过多啊,因为减少了请求嘛,所以流量呢,也就随之也减少了。呃,再有就是这个一些其他的场景啊,可以通过提前下发数据啊,来避免我们在呃这种高并发的场景下发送的请求数过多,然后造成我们这个流量洪峰达到这个瓶颈。
09:11
啊,我们尽可能的能够把这个能做缓存的呢,呃,都给他做了,尤其是在高并发的场景下,那么这样他点击的时候,他就不一定会请求到我的服务器端服务器端了。呃,这种提前下发呢,也可以提前,呃,给这个我们的手机APP去下发很多这种缓存,这和这个浏览器就不是一套规则了啊。再有就是兜底数据,呃这个兜底数据啊,如果大家上过Twitter的话,你在没有网络的情况下,或者你正在看着看着,嗯,你退回到首页,或者刷新一下首页,包括一些特也是它能能够给我们展示来一个框架,呃,上面呢,呃菜单,呃资源栏,包括一些之前你展示过的一些,呃基本的这些按钮,一些你登录状态什么的,它还是能给你展示出来,但是你想要的部分内容呢,它会提示你,对吧,当前网络可能不可用,你可以点击一下这个页面,而不会特别暴力的去展示,呃,这个网络连接不可用,特别这个。
10:09
呃,大的一个页面就是传统这种报错啊,浏览器给我们的这个提示报错,那这个呢,就。能够有效的提高咱们的这个系统的,呃,这种这种友好程度吧,给用户展示起来呢,看起来还还算是比较友好一些,总比给浏览器boss那个错要好看得多。这是这属于是兜底数据啊呃,另外就是这个查询一些API的时候,如果这API也变化不大的话,或者你用了这个,呃,客户端的缓存就是强缓存,而不是那种携程缓存,那么他也不会发请求,那正常的这个接口里的数据他也会给我们展示出来,因为他压根就不会去请求而过,对吧,所以还会有一些兜底数据给我们,给我们展示一下。呃,然后一般来说这个缓存呢,我们都会呃。清理对吧,但是这个客户端的这个。清理清理的这个他在什么时候清理,我们也没法控制啊。
11:01
对吧,但一般来说我们这个,嗯。可以设置一些这种临时缓存,为了也是为了有效的避免他过多的去使用这个缓存,导致。我们页面呢,永远都显示不了最新的。嗯,还有就是这种固定缓存啊,你像一些这个站点的首页,呃,整个这个骨架,就像刚才咱们说的去做兜底数据的这个股架,那我们就可以把它呃长时稍微长一点的时间缓存到我们的客户端里,当他没有网络的时候呢,也可以给他比较好的提示,对吧,但有的时候也要看需求啊,那如果你这个首页的这个框架不像是YouTube或者是Twitter这种特别固定的这种形式的话。呃,你像一些这个,嗯。这种这种这种变化稍微频繁一些,比如几天或者是一段时间,你就会变一下。那你尽可能的不要把它缓存的时间过长啊,主要就是这个这个首页的框架,因为它是用户访问站点的第一入口,也是他第一个接触到的资源,由他来加载额外的资源。那么这个框架其实。
12:05
要根据这个具体的需求,我们再去缓存啊。然后还有就是这种父子连接啊。这种附子连接呢,嗯。就相当于两个URL地址吧,比如说ul的第一个地址和ul第二个地址,那你的点击一个链接跳到第二个地址的时候,那要不要把第二个地址页里边的所有资源全都重新加载一遍。其实没有必要,因为这两个爷们他一定会长得比较像的啊,那这也不是一定啊,是大多数都是长得比较像的,只是部分内容发生变化了,比如我们看了一个新闻,那再看下一条新闻,那么有有很多这种重叠的内容是吧,包括看商品其实也是一样的。那这会儿就可以从这个上级的这个页面呢,把这个资源给它给带过来,所谓的带过来就是利用了上一个页面,这个刚刚我加载完的这个缓存啊,这个它是呃,在浏览器的这个规则里边,它会去做这种判断啊。
13:02
然后还有就是做一些预加载啊。嗯,这个预加载呢,怎么这这这这这个怎么理解呢?你像微信的这个,呃,这个这个公众号,还有这个一些新闻的客户端。呃,它其实都是做了很多的预加载。你在你在点击它的这个内容,在展示的过程当中是速度极快的,为什么那么快,因为它根本就没有再次去加载里边的内容,他在下载标题的时候,直接把内容全部都给我们展示出来了,当然这些都是一些前端的这些技术啊,我们作为嗯这个后端开发者的话,你稍微的了解一下就可以了,它是可以这么做的,就是把资源加全部都加载到客户端,一个文章有标题,有内容,但我就只给你展示标题,然后在点击这个标题的时候呢,啪,然后把这内容一块展示过来。啊,因为现在大伙的网速都比较快了,对吧,你一下下载,呃,把所有的标题全都给这个标题列表下载下来,你可能连1K都不到对吧?那如果把这个当前你下载下来标题,这几十个标题的所有的内容全都给拉下来,那可能也就是几百K啊,如果到不了几百K的话,可能也就几十K,那现在咱们手机上网速度也都还可以对吧?一次加载,那接下来的所有操作呢,都不再去发送请求了,因为移动端现在的这种情况就是你开车的时候,嗯,在高速公路上啊,或者是进了地库啊,啊,或者是在一些信号不太好的地儿,你试试它还它是这个这个网络,它其实是极不稳定的,那这样呢,也。
14:34
给我们的这个用户使用过程当中,这种体验度啊,感受也不太好,通过这种预加载可以让这个用户体验起来会更好一些,这都是前端的东西啊,大家了解嗯就就够了,你你没必要去把它给实现出来。然后这个加载过程也是啊,先展示框架,再再去异步加载嘛,对吧?啊,主要也是去做这种呃异步化提高并发这个线程的个数,然后呃展示的速度啊,当然有很多部分呢,我们也可以去呃调整和优化,增加一些缓存进来,然后在做这种异步加载展示缓存的时候,我们要。
15:12
额外的小心,哪些接口都是动态取数据的,那么我们就可以采用之前教大家的两种缓存方式。一种是强制缓存啊,另外一种呢,就是协商缓存,一般在调用接口的时候呢,我们都可以把它设计成这种基于1TAG的这种协商缓存,无论如何你要请求一下,只是我返回数据呢,只给你返回一个ha就结束了啊,这样这个服务器端的性能消耗也不是特别大,然后这个你又能够实时能拿到这个最新的数据,因为数据一变1TALK就变,1TALK1变我就给你发东西。这是浏览器缓存的一些额外的一些给大家聊的东西,浏览器缓存之前跟家说了,你上班时候,呃,基本上都会接触的到。所以这块呢,多了解一些啊嗯,好,那我们就讲到这儿。
我来说两句