00:00
嗯,同学们好,我们之前呢,给大家讲了,呃,GZP等等这些压缩的方式,这是基于服务器端的,让我们去把这个文件的这个大小呢减小,以提高这个访问速度,对吧?那么接下来呢,我们给大家呃聊一个稍微轻松一点的啊,这比较简单的一个拈,这是压缩请求数,呃,给大家先讲一下这个压缩请求数究竟是啥意思。当我们的这个呃,客户端访问到我们的这个服务器的时候,我们的N这个服务器。呃,发起的这些请求呢,肯定不只是一个啊,大家随便我们打开一个站点都能看到它的一个HTML页面里呢,会内嵌很多的这个CSSJS,包括一些图片等等这些,那么我们从两个角度去给大家来聊,一个是这个,呃,文本类的就JS,呃,还有这个CSS,另外呢,就是啊这些,呃,图片多媒体类的吧。多媒体啊,就是像PNG啊。
01:05
PNG啊这种图片,那么我可以把这两种类型呢,它的请求数压缩一下,这和这个文件大小没有关系啊,我们前面讲这个,嗯,像GZ那些呢,是在传输的过程当中呢,我们可以让服务器把JSCSS打一个压缩包,然后给我们的客户端让它再解开,对吧?咱们来聊的就是这个请求的个数,因为这一一个HTML页面里边会内嵌,这么就他他会内嵌很多的这个呃,资源。那么可以让是不是可以让他把这些请求合并成一个啊,比如说我这HTML页里面,呃内联了三个CSS,那这会呢,呃打开这页面,接下来呢,下一步会向这三个CSS的地址发起请求,去读这个CSS,对吧?那读完之后呢,在客户端呢,就在网页里边TM页面里再去渲染这个页面,那这会儿就要发起三个请求啊,你读三个CSS就要发三个请求,这听起来好像嗯很合乎常理,没什么太大的问题,那这个额额外有这么一个模块叫呃,CA。
02:13
这个can这个模块就可以让我们把这个请求压缩一下,比如三个请求,让它变成一个请求,然后把这个三个文本类型的CSS或者是JS啊,把它一块儿通过一个请求把它给拉回来,这样呢就能有效的减少这个并发请求的个数,注意啊,它是减少的并发请求个数。减少并发请求,也就意味着我们的服务集算能够承载更多的并发量啊,原来我要承受你三个,现在呢,只需要一个就可以了,非常轻松,So easy是吧?那这个它实现的原理是啥样的呢?啊,就是这是基于文本类型的,比如说现在本本地,本地现在存着有三个CSS文件。那我现在呢,想让他一次全部都给它给加载上来,那客户端呢,发起请求的时候就不能再像以前那样了,呃,什么link的her对吧?哎,我去引三个,这分别HERF3次,那现在呢,只能一次了,那一次的话,那发这个请求你是不是要带一些参数和变量对吧?都写过动态的这些程序对吧?啊,你像写Java程序,你可以接参数。
03:22
对吧,比如说我这,呃,举个例子啊,比如get CSS,后边呢,1.css,然后and什么2.css再and。3.css。那这样的话,我是不是可以让我们的服务器端去解析你这个请求对吧?当他请求到这个get CSS这份资源的时候,有点像这个,比如咱们写的这个spring boot的web程序对吧?啊,那打到这controller里了,那么你接了这三个参数,我去读这三个参数。啊,对吧,你你究竟想要哪三个CSS文件,那么接下来他可以把这三个文件呢,引流的形式呢,读到我程序的内存里。
04:03
并且把它给合并起来,合并完成之后。有一个合并的操作啊,首先是毒。读完之后呢,去合并。对吧,合并完之后呢。在完,在完事之后,以一个文件的形式。哎,那这样我们去给它推送给我们的这个客户端就可以了,对吧?啊,大家可以看出来了吧,那么这会儿我们就把这个请求给它压缩了啊,那这会儿是不是有同学可能会想,哎,那我这样我能不能把直接把这三个CSS文件,我给它直接写成一个文件不就完了吗?那这样有一点脱裤子放屁的这种感觉有没有对吧?啊,我硬得把一个一个请求能够干完的事儿呢,我把它放到三个文件里,然后再给它合起来,其实啊,咱们在做一些系统设计的时候啊,包括一些软件设计或者系统架构的时候,我们不应该不应该只考虑这个性能的问题,更多的呢,作为一个这个软件管理者。
05:03
啊,我们应该考虑着整个软件的架构的这种清晰程度,以便于我们的这些呃团队的这些人员呢,去合合作分工,去完成完成一些任务啊,但如果这是只部署了一个CSS,那你在呃研发阶段啊,这会儿可能就会变得手忙脚乱,会会错综复杂,特别特别的麻烦,那这会儿也就是我们牺牲了一部分的性能,对吧,因为有合并操作。啊,牺牲了一部分性能呢,来换取来我们这种这个开发,还有这个管理上这种高效,因为它合并之后呢,一定会读这三个文件啊,它一也一定会读到程序内存里边,所以它会有内存区域的复制啊,也就是用户态,从我们的内核态到用户态的复制啊,那这样的话,那send file它也使不了了啊,性能呢,略有下降,但是压缩的请求也就是从我们的这个。呃。计算性能上呢,向我们的这个网络上呢,妥协了一下,这样呢会少建立几个网络请求啊,这个很多的大型网站呢都在用。
06:05
这个并且这个模块呢,就是淘宝网研发出来的,并且他现在还正在用给大家看一下。我们打开这个淘宝网。诶,大家看啊,打开这页面呢,它有N多的请求是吧?啊现在有80多个,然后在这呢,我们看这有一标签分类与CSS,诶这是不是有问号问号,然后TB home这是个目录对吧?然后后边跟了一个配m.CSS。然后还接了一个什么呢?index.css。下边这个也是两个问号,然后这里边儿呢,呃,这虽然说它是两个问号,但是它只加载出来了一个CS,一个CSS对吧。但上面这个呢,它是加载出来了两个CSS文件,很明显这是以参数的形式传到了我们的后端,后端服务器里了啊,这就是一个典型的案例,淘宝网呢,现在就在这么用,但是啊,我们再反过头来,再仔细的再去琢磨琢磨啊,嗯,也不一定,有的时候这也这个也不一定啊,我们这个处理高并发就一定得这么做啊,更多的时候呢,还有很多其他的方式去处理这种,呃,这种请求,让他减少一些请求,比如说我们用客户端的缓存。
07:25
这是咱们下一节课给大家讲的,这节课咱们先看看这个它这CSS究竟怎么合并的,不光CSS的JS呢也能合并,只要你看它开头是两个问号的。这说明他都走了,这个看这个模块,你看两个问号后边跟了JS,然后这还一个JS,然后这还一个JS,这有一个请求呢,他给我漏上来了三个JS啊,相当于把三个JS合并成了一个大文件是吧?这还有这也有,这也有啊,JS用的比较多,CSS呢用的并不多是吧。那么好,这就是现在淘宝网啊,淘宝网也是现在的这个并发量极高的一个站点了啊,他这么做,那我们其实可以参考就是做架构师或者系统设计,呃,最先是先看一些成功的案例啊,就别人怎么做的,尤其是一些比较成功的这些项目啊,看看他们怎么做的,我们可以拿过来去借鉴一下。
08:21
啊,这不单纯是说呃去抄,呃更多的时候呢,呃,因为他们有这个这么大的并发量,有他有这个实验的空间,有这个场景,对吧,你可能咱们做的项目呢,没有这么这么高的并发,比如真正到了一级流量的也就是腾讯淘宝这几大家了,对吧?咱们自己做的项目呢,嗯,很难做到这么高的并发量,那他做到这么高的并发量,用了这些模块,那我们是不是也可以参考和学习一下。是吧,因为它有这个实验环境和生产环境,真正的在跑对吧,那这就是呃,它这个合并,那合并的这个呃原理呢,简单跟大家讲了讲,那接下来呢,带着大家,嗯,把它配置起来,在咱们的这个服务器上。
我来说两句