00:01
大家好,今天的话给大家分享一个面试题,这个面试题的题目大致就是说关于一个页面加载缓慢,我们该怎么去排查以及优化,这个题的话主要就是在我最近找工作当中遇到的,因为这个题的话,我也成功入职我面试的这家公司,嗯,这道题的话也让我成为一起去面试当中脱颖而出的一个亮点,所以说在这里分享给大家,首先的话,我们通过这个题目去看这个问题,关于一个页面加载缓慢。去排查和优化,也就是说我们至少要两你理解到三个点,页面加载缓嘛,这是一个点,也就是说我们的问题点,另外的话就是怎么去排查,就是说怎么去发现问题,哪个地方导致缓慢的。最终的话就是我们的一个解决方案,就是说怎么去优化这个东西,我相信可能有很多小伙伴在面试当中有被问到过这个问题,可能一上来的话就会提到那售后我们去加,嗯,建索引啊,加缓存啊这样的一个回答,大家试想一下,那一个页面去加载法吗?它难道仅仅就是去查询数据库,然后缓存这一块的吗?肯定这道题不会这么简单,所以说我们在答这个题的时候,我们就要去站在面试官的角度上面去思考一下这个问题。
01:29
我们可以简单的想一下,嗯,我们在请求一个页面的时候要发生哪些操作,我这里的话罗列了一个图。这个图的话,我把它放大一点,首先的话,我这个地方是去加载了一个百度,我搜索了一个高并发,高并发的话,我们通过F12可以进行调试,右边的控制栏的话可以就打开。这个地方可以看到这个页面它加载了哪些内容,首先的话,它有一些图片,还有一些其他的接口,比如说接视文件,还有一些嗯,媒体的文件,像一些图片视频呀,还有一些接口的一个数据,我们通过这个图片可以看到,其次总体来说的话,加载时间很多,就加像加载这些图片的话,它是两三百毫秒,那然后加载这些资源的话,它是超过一秒多的时间的,同时我们可以看一下下面。
02:29
总共发起了151个请求,传输的一个文件大小的话,差不多是1.4兆啊,总共的话有多少个资源,后面是加载了多少秒,就这个页面整体加载完的话,它是用了多少秒,那差不多两秒多的样子,其实它显示的红色相对来说它应该算是一个慢的加载。所以说我们首先理解到我们去加载打开一个网页的时候,它要发生哪些操作,我们直接可以通过F12检查,我们就可以点击就可以看到我们加载的这个页面的话。
03:12
是去加载了哪些东西,我们可以看一下GS啊什么,嗯,图片的一些内容之类的,同时我们可以通过分组,然后CSSGS看,通过不同的分组去查询加载了哪些内容,这个的话。我们通过这个去调试,我们能够调试说,诶,我们这个页面有可能是因为图片过大,有可能是因为某个接口。响应会比较慢,或者是页面的一个渲染会比较慢,还有甚至比较情况可能会比较小一点的,有可能是我们的网络会比较慢,这样的一个情况。这是我们的一个情况分析,我刚才讲的是怎么去分析这个思路,然后的话我们就要理解一下,当我们用户去访问一个网站的时候,这个网站发生了一个什么,就是具体做了一些哪些操作,这题的话也是我们常见面试题当中常问到的一个东西,首先当我们用户输一个网址去浏览器里面的时候,首先客户端会去DNS系统里面,然后进行域名解析,然后找到对应的,比如说IP地址在哪个,在哪个服务器上面。
04:26
然后我们找到对应服务器过后,它会把对应的端口转发到这个服务器上面,对应的服务,比如说我们本服务器上面有可能是N是啊之类的,转发给对应的N进SNS的话,它有对应的,比如说是PHP,然后要转发到PHP上面去,他PH执行相应的业务逻辑啊,PH里面的话,他是去数据库拿数据,然后拿到数据库后依次返回给客户端,这时候我们就能看到这个页面的内容了,这几个大致的请求流程,更多的细节的话,大家可以去网上查看一下。
05:06
同时下面这几张图的话,也是我刚才给大家演示的,就是说那通过F22怎么去查看这些资源,通过分组这种。这里的话我罗列了一个思,嗯,思维导图,这思维导图的话就是通过不同的端口去分析有可能某个环节导致这个页面加载缓慢的一个过程,然后这是一个大致的思维导图,当然这一个里面不一定很全面,只是说属于我个人在。去做这个事情的时候,我会按照这个逻辑去处理这个东西,首先的话,我去分为前端、后端,还相当于我们的网络以及我们硬件设备这几个维度去分析这个东西,然后我们通过不同的维度,然后再去具体发现问题,这样的话我们就可以事半功倍,很快能够发现问题以及解决问题。首先的话,通过前端,我们前端一般首先要做什么的事情,首先从代码的一个角度来说,我们代码里面要去渲染。
06:13
要去处理对应的页面逻辑,那另外一个就是前端的页面,它要去加载一些静态的资源,我像我们的一些静态资源,它有图片揭示视频,那像一些动画啊什么之类的这样的一些资源,然后有可能我们图片它是和视频有很大,这样的话它也会占用一个网络带宽,而且它加载的速度也是比较慢的。当然。就是很。可以直接通过F12去调试这个东西,就很容易发现这个问题,比如说我要发现找到这个页面,看静态文件有没有加载比较慢的,我可以去看对GS image媒体字体库这样的一个,比如说我要查看图片,诶图片的话它差不多是。
07:06
最多的话是300多毫秒,那加载大小量2.1KB,其实也是差不多的,这个108KB60毫秒,其实它也不是影响我们页面慢的一个因素,所以说我们直接这种情况就可以排查掉了,诶有可能我们要发现GSGS它有可能是比较耗时的,那我们可以点击GS去找到对应GS里面看哪个就是S这一个和time这个看哪一个适合是。是否说比较大,或者它加载的时间特别长,我们发现这个的话,其实300多毫秒属于一个正常的逻辑,不会影响,那么就可以排除一个前端的这样的一个操作。还有前端这一块的话,其实它。跟代码这块也是有一个紧密相连的,有可能我们比如说嗯,在处理代码的时候,我通过一个简单的循环去处理就行了,然后你写了很大一坨的代码,多重循环或者很更复杂的一个逻辑,他也会去影响我们页面加载缓慢的一个情况,当然总体来说的话,这种情况应该还是偏少的,所以说嗯,这两点的话是我针对前端上面可能需要排查的两个点,那接下来的话就是我们后端,我们后端的话就是。
08:33
比较重要的一个点,因为很大程度上可能是我们后端导致的,后端的话,它其实的个嗯情况,它是比较涉及到的范围是比较广的,有可能是我们的微部服务,有可能是我们业务代码,比如说我们的加务代码,PH代码或者让代码导致的,还有可能是我们的一个数据库,那数据库的那像MYQ,然后数据量比较大,这种问题给导致来的。
09:03
然后我们来具体分析一下业务逻辑,有可能我们业务逻辑是比较复杂的,然后我把它全都写在一个方法或者一个类里面,然后这个类,然后这个方法里面又加载了很多很多其他跟当前请求不太相关的,其实它也会影响到一这样的一个速度的。还有一个同步模式,这里的同步模式怎么去理解,像我们的PHP,它属于一个单进程的一个模式,像我们的Java go,它可以实现一个嗯,异步携程和线制线程这样的一个处理操作。其实我们,嗯,比如说某一个请求,他的业务逻辑比较复杂,我们要去创建用户,创建用户的记录,还有给用户增加积分等等等等,很多业务逻辑都要在这里面处理,然后在一个请求里面,它都是特别耗时的,这时候我们可以通过多线程啊,或者就是异步或者一些队列这样的一个技术去解决这样的一个问题,把同步的模式改为异步的模式,就相当于。
10:11
我有一堆货,我用一辆卡车可能要拉十趟,我用十辆卡车,它就只需要一趟,这样的话就大大减少了我们的一个嗯,时间上面这一块的就提高了我们的一个代码执行效率。还有可能会涉及到一些代码缓存之类的,像我们本来动态的编程语言跟静态的编程语言,它本身来说就比较性能上就有比较低,比比如说我们的PP,然后我们推荐使用这样的,把一些给缓存起来,然后这样的话也会加载我们的一个速度,像go浪,然后嗯。还有我们的Java,它是一些静态型的语言,它会事先是编译成一个自建码,这样的话它也是一个提高效率这一块的,还有我们的数据库,数据库的话就是我们。
11:06
必考的一个知识点呢,是非常重的,数据库的话,首先我们可能一提到数据库,我们就会考虑到一个索引这一块之类的。当我们一个请求比过来的时候,他要去查询数据库,有可能这个数据表里面有。千万条数据,然后我只去查询这一条数据,这样的话他就查询的范围是比较大的,你在不见索引的情况下。然后还有一个,然后如果说我们每次请求就去查询数据库,这样的话也是比较慢的,我们会用到一些缓存类的一些。中印件或者一些。服务这一块来实现对应的一个处理,比如说我们RA Dis可以把一些基本的一些数据给缓存在RA Dis里面。我去请求的时候,直接从。
12:02
内存里面去取,这样的话就大大提高了我们的一个效率。还有一个我们的网络问题,比如说有可能我这个请求里面的一个传输包,它比较大,有可能有几兆或者几百KB,然后我们带宽有可能是一兆的,这样的话,它其实传输的一个慢速度也是比较慢的。还有我们DNNS,因为我们刚才讲到了,他在其实一个网络请求里面,他会去。通过DNS找到对应的IP地址,然后再找到对应的服务器,所以说DNS这一环节的话,其实它也会影响到我们的一个请求的,嗯,响应速度的,那接下来客户端延迟,嗯,这种情况的话怎么来理解?有比如说那A和B打开同一个网站,A他这个人打开的非常慢。那B它打开呃非常快,那这里的话有可能就是我们客户端给导致的,那导因为你本地的一个网络是比较慢的,所以说你打开也比较慢。
13:10
但是这种情况的话,是跟我们的应用程序来说是不挂钩的,但是它也会影响的一个用户速度这一块用户体验,但是这个的问题的话,就是用户在这一块导致的,我们基本上可以不用去考虑这个东西,那像一些好的系统的话,它可能会考虑到用户在没有网络或者网络慢的时候,他要去通过一些技术来。优化这一点,那像这样的一些软件的话,然后大家在日常当中可能也会遇到这样的一些功能。那接下来的话就是我们的硬件设备,那硬件设备比如说我们的一个服务器和我们的客户端的一个,然后我们先讲客户端,其实客户端这里的话就跟我们刚才网络里面讲到的,你客户端网络其实是一个道理,有可能你的电脑配置比较好,然后我的电脑配置比较差,那这样的话,配置差的,然后它响应起来应该是会比较慢的,这种情况的话,基本上我们作为一个程序来说,也基本上是不会去考虑这种东西的,但是我们在写代码当中。
14:24
嗯,多多少少其实也可以去思考一点都。这种东西,因为我们代码里面,比如说你在做前端渲染的时候,呃,很耗CPU,我们可不可以优化这个代码,让他减少CPU的调调度,那这样的话,客户端它在硬件设备差的情况下,可以减少CPU的调度,其实它也可以影响。就是优化用户访问这个体验的,那这一点的话就是我们的服务器设备,那我们服务器设备很简单的例子,你一核2G的肯定比不过两核4G的,甚至更比远远比不了,比如说八核16G的更高的一个配置,这种情况如果说我们排查了其他情况,发现没什么问题,那我们就有可能要考虑我们的硬件设备的,那提高我们的一个CPU内存啊等等等等这样的一个硬件设备啊,或者就是那多台硬件设备来进行支撑。
15:22
然后这样来提高我们的一个网络,就是系统的一个性能这一块之类的,然后这些点的话。我当时在面试的时候,基本上也是从这些角度维度上面去分析啊,并提出的一个解决方案,更多的点的话是在数据库层面这一块的,比如说我们数据库一,然后做一些缓存,那添加索引,那还有就比如说像我们的E这一块之类的。大家可能需要注重数据库这一块,就这种还有静态资源,就前端资源,我们可以进行一些压缩,或者放CD上面,那这两个地方的话,大家要着重去注意一下。
16:07
然后你在看数据库的时候,就更需要去看我们的索引,因为索引的话是必考必考的一个知识点嘛,然后还有一个缓存这一块之类的,那像我们瑞或者其他的一些缓存系统这一块之类的,那这个问题的话就给大家分享到这里,后面的话有嗯,更多的一些有价值的面试题,我也会给大家一一分享出来,如果说大家比较感兴趣的话,也可以持续关注我一下,然后期带领大家学习更多一些像高并发,高大流量之类的业务场景的一些解决方案。谢谢大家,视频就给大家录到这里。
我来说两句