00:00
好,同学们,上节课呢,我们把这个con这个模块呢,呃,已经呃编译到这个咱们的NG里了,那接下来呢,我们实验一下这个con模块它怎么用,呃,先看一下它这个官方文档。在这里边呢,呃,有个这个example啊,有个简单的例子,Contact on,这很明显就是开关嘛,对吧,然后max file,这基本意思就是一个这个呃,请求里边它最多能包含多少个文件啊,但是你不能在这个一个请求里边一下包含太多的文件,因为它也是需要这个读文件,并且把它给合并到一块儿的。是吧,然后这个呃,配置呢,我们把它给。过来它是在location下的是吧,然后在。咱们的NG配置文件里。找一下。呃,我们现在的这个。呃,Location就一个,那我们就配到这个根根的这个location下。
01:01
然后保存,然后接下来我们就不管了啊,这个配置呢,就到这儿了,然后看看咱们这个首页啥样。192.44.101啊,这太难看了,那接下来呢,我们试验一下,让它同时加载两个CSS文件,我们改一下这个,呃,现在的这个HTML页面。Index。那嗨。哎,是尼玛这里面写的,我以为这打开的是配置文件呢,咱们改一下吧,就hello的吧。Hello。该死的强迫症,然后呢,把这文件呢,我们给他。这个内容多搞一些是吧。这样看看。这怎么也能断板?
02:01
这是因为用了中文的字符集啊,比如这感叹号吧,可能是再来一下。Hello,英文的hello word。都搞一些出来。然后再刷新啊,这就没问题了,对吧,那接下来呢,我们加CSS,嗯。CSS呢,嗯,咱们一般都会简单的写一点是吧,可能不太多。Style。那在这里边呢,我们,呃,为了区分啊,我们设置两个CSS,一个是它的background,还有一个是fo color,就是这个字体颜色和它这个背景颜色,这样就能区分开了。在这呢,我们先来一个back back background color。
03:02
我们让他。000,这是全黑是吧,然后呃,不不是front color color,直接就color,然后让它全白。然后保存刷新。没有效果。哦,不好意思。在这儿再加一个body,在外边包上它。再来。来大家看颜色本来是黑的,现在变白了,然后背景本来是白的,现在变黑了,现在就黑白颠倒了,对吧,就是这段CSS,那我们现在呢,把这段CSS啊,现在已经试验成功了,接下来呢,把它分到这个文件里,我们去加载一下。在这儿啊,我们。新建一个。文件。在这里边儿呢,我们搞一个叫凤。
04:01
第二,CSS。这是。我们去配置这个。字体的CSS是吧。Fo CSS。这样。那就不要了,对吧。这是整个页面里边的字体颜色,Phone就是CSS。然后咱们再。来。BG对CSS。背景颜色。Background color。你粘的时候注意这个body它得有。OK。然后接下来呢,我们这个CSS呢,就不要了啊,我们去引一下。Link是吧,等于这个fo。
05:07
点CSS。然后后边那re用写吗?他他可能不用啊,我先试一下。呃。好像不好使是吧,那还那还得写rel,等于都要一套。再试试。哎,好使了对吧,现在是把颜色给它全变白了。那背景呢,我们是不是还得再整一个BG来保存再看。OK,那注意这会儿我们观察一下这个。呃,我们的这个控制台啊,来刷新你看。怎么不出来了?
06:12
咦,这怎么回事?哦。别慌,这这个过滤器这儿啊,我们把这个。这个这个这个JS给他给勾上了是吧。在这点O,然后所有的就出来了,这CSS就能看见,CSS这所有的我们能看到,现在他发起了两个请求,对吧?啊,一个是凤,一个是BG。嗯。很正常啊,基本操作基本上都这么干,那么有了这个can模块之后呢,我们就可以在这有一点变化了,在这边一个请求让它加载两个,比如说我们现在。这样做实验,我们一步一步来,要不你看不见效果,比如说你现在只留了一个这个CSS,就是一个phone,然后我们再刷新。只加载了phone对吧,那我们想让它第二个CSS,同时也一块儿让它显示出来。
07:05
那就可以这么干,加个逗号,然后BG.css然后link的her后边呢,加两个问号,然后保存来。诶是不是效果就出来了,对吧,白色的和黑色的凤呢,是白的,然后BG呢,呃是黑的,那现在我们再观察一下这个,呃,他的这个请求你看。现在是不是就一个了,然后请求回来,我们在这儿可以看这个response,或者这个preview在这里边就能看到,呃,它当前这个文件内容是啥?其实它就是把两个文件给它无缝的拼接到一块儿了啊,两个Bo啊给它连到一起了,这就是它这个contact,这样能极大的有效的给我们去压缩请求啊,你如果CSS。呃,比较多,或者JS特别多,你像淘宝那里边呢,就有呃至少十几个吧,啊JS那就可以分成那么几个请求啊,就能把这些GS全都给拉回来了,当然啊,这东西不能跨服务器啊,你不能第一个CSS,呃在第一台机器上,那另外一个它合并不了,只能在本机本地去这个做这种合并啊,这是呃基于这个文本文档的这种。
08:20
请求合并啊,刚才我们不是说了嘛,还有这种多媒体类型的合并,这种PNG的呢,同样也能合并请求,但这种合并请求呢,更多的就是前端的技术了,我们作为这个Java工程师或者是架构师,但是你你需要简单的去了解一下,这样也能有效的去降低请求数啊,比如我们的前页面里边呢,有N多的这个。这个这个图片啊,这个图片呢,呃,又比较小啊,以icon为呃这种实例。就是一些这个简单图标,像这个呃,一些按钮啊什么的,嗯,我们看一个例子吧,比如说我们看看这个淘宝或者京东,我们看一下京东吧。
09:06
打开京东,然后看这个图片。嗯,你看比如这个,这看上去很像啊,这不是这是一个一个图片。你看他请求里边肯定会有好多图片这种,你看这儿了吗?啊,这一个PNG,这一个PNG里边呢,你看它是一个大号的,这个京东的logo,还有一个小号的京东的logo,对吧,上面展示大号的肯定有一地儿呢,它还展示了一个小号的。呃,但是呃,他又没有完整的展示出来,那如果我们作为这个比较新手级别的前端工程师,或者是Java后端工程师啊,你可能一个image这整个图片全显示出来了,这肯定就不合适了嘛,对吧。那这会儿呢,有这么一种方式。就是通过这个CSS在展示图片的时候,它有一个position去显示。这张图片从哪儿到哪儿啊,以达到一张图片我拉回来之后呢,可以把里边分割成几个小块,然后同时去展示,那这种一般来说在展示一些这个呃,像一些icon啊logo啊什么的呢,这会儿比较合适,你像log这个这个这个logo对吧,虽然说它这这这这个这个有两个这个logo在一张图片里啊,还有就是icon,你像很很多按钮,你就这一块这些按钮,你机票什么的,刚才这些没有了,它肯定是一个icon。
10:28
我们看看。能不能找到?这不好找,我们按这个大小,嗯,来。来一下看看。来大家看这儿,你看这个图呢,虽然说它是这个以这个贝斯64压缩的,但是它其实是一张图,这一张图一旦它要是加载上来之后呢,它就可以用这个position去切割啊,跟之前我们讲的这个contact很像啊,虽然说它这是贝64的,但是你可以不做贝贝斯64,直接去服务器端去拉一个PNG回来,然后我们去切割,也达到了这个合并请求的效果,呃,原本呢,你这有十个图标的话,我要发十个请求,现在呢,只发一个请求,拉回来之后,我去展示不同的这个position,我就展示这块,展示这块或者这块。
11:19
呃,以达到这个和平请求这种效果,就是针对这个,呃。图片的合并啊,像一些PNG,它比较适用于像logo啊,Icon这种啊,不需要发送那么多请求了,那只要我们把请求减少了,那么我们的系统的整体的并发量肯定也能提高,这是处理高并发的一个比较取巧,也是大家都会用的一种方式啊,怎么去处理高并发,让并发量变小,那么这这个高并发就算我们处理了是吧?啊比如像我们呃这个,比如我这个怎么去更好的去解决问题,那么就是让问题变少。啊,那这些问题它就比较好解决了啊,你这除了这种呃方式之外,在处理高并发的时候呢,还有很多其他的方式,我们慢慢给大家讲。
我来说两句