世界上最宽阔的是海洋,比海洋更宽阔的是天空,比天空更宽阔的是人的胸怀。——雨果
“工欲善其事,必先利其器”,好的工具才能让我们的工作事半功倍。这一节我们来介绍 Chrome 开发者工具中自带的 performance 面板(在老的Chrome浏览器版本当中,performance 面板叫 Timeline 面板),performance 面板会实时地反应网站运行的活动,它可以帮助我们很好地定位问题。
准备工作
1.首先我们需要打开新的无痕窗口,进入隐身模式,这里是为了避免相关的浏览器插件带来的干扰。打开隐身模式的位置在浏览器右上角的设置,选择打开新的无痕窗口即可进入,进入之后可以看到如下提示,如图:
2.按F12进入开发者工具,打开performance面板。performance面板如下图所示:
3.可以看到上图中performance面板内正中间的英文已经告诉我们如何开始使用这个面板了,点击最左侧的黑色圆就可以开始一个新的监测记录,也可以点击刷新按钮记录整个刷新过程中的监测记录。然后右侧我们如果勾选了Screenshots,就可以记录整个监测过程中每一帧的截图。如果勾选了Memory,我们就可以看到内存的详细使用情况以及垃圾回收的周期,也可以观察到内存有无泄漏的情况。
点击最右侧的小齿轮,可以看到一些配置项,打开CPU的节流开关,可以模拟移动端项目。打开Network的节流开关,我们模拟弱网(2g/3g)条件下网站的一些表现情况,然后根据弱网的具体表现进行相关优化。
案例分析
image.png接下来我们就用performance面板来具体分析一下慕课网。上面是我的一个简单录屏,我们打开performance面板之后,然后点击刷新按钮,就可以看到慕课网首页加载过程中的性能表现:
首先是最上面的总览区域,这上面我们可以直观地看到页面的整个加载过程,右侧是4个关键的指标,我们下面来一一介绍:
- FPS:相信不少打游戏的同学对这个指标较为熟悉,这个指标是衡量动画是否流畅的一个重要指标。我们可以看到图中的绿色柱状图很高,这就代表FPS帧率很高,体验也就越流畅,如果FPS帧率较低,那么图中则会是红色的横条,表明帧率较低,影响用户体验,这里图中并没有出现红色,说明我们网页的整个体验还是非常流畅的。这里特别说明一下不管是游戏还是网页,都是帧率越高,体验越好。
- CPU:CPU自然就是展示CPU的使用情况。这个指标和下面的Sumarry指标是一一对应,而且这里它们的颜色所代表含义也是相同的,每个颜色代表各个过程所耗费的时间。从图中我们可以看到,整个加载过程中,白色部分(ldle)占比是最大的,英文好的同学根据ldle的意思就能猜到这里代表的是空闲性能,第二大占比的橙色对应的是脚本加载时间,所以要想更快我们可以试着从加快脚本加载速度方面去优化。
- NET:这个是展示各个请求所花费的具体时间,这里看不太清,我们可以直接去 Network 面板当中去具体观察各个请求所花费的时间,然后针对具体的请求具体分析。
- HEAP:这里展示的是请求过程中内存的使用情况,这个指标对性能优化帮助不大。
总览区域的下面是Frame,这个展示的是整个加载时间段的帧率展示。将鼠标移动上去可以看到各个时间段的帧率,在加载过程中也可以使用快捷键command + shift + p打开可以实时展示帧率的面板。接着把面板往上拉,可以看到非常重要的一个指标Main,它代表主线程,如下图:
图中各种颜色的矩形代表加载过程中做的所有工作。横轴代表时间,纵轴代表具体的调用堆栈。调用堆栈就像是浏览器当中的解释器,我们可以利用它追踪函数的执行流。当浏览器中调用了多个函数,通过这种机制可以追踪到哪个函数正在执行,具体函数体中又调用了哪个函数。这里我们随便点击一个矩形,如下图: 图片描述
点击之后我们看到了这个事件下对应的一些具体信息,这里我们还可以点击Range右侧链接,点击之后会直接跳到sources面板对应的代码位置,这个功能可以说大大方便了我们定位具体的代码,如下图: 图片描述
最下面的区域分为4个tab,Summary与统计总览区域面板CPU相对应,Bottom-Up则是代表调用堆栈的前后调用关系,Call Tree是调用树,最后的Event Log则是事件日志。这个区域用到的情况不多,更多的是辅助作用。
小结
这一节我们以图文的形式向大家介绍了Chrome浏览器performance的使用,大家下去可以找一个网站利用这个工具进行性能优化的分析,然后根据给出的反馈再去进行具体的优化,相信有了这个工具,对你的优化工作可以起到事半功倍的作用。
网友评论