瞎搞

2020-04-08  本文已影响0人  王云飞_小四_wyunfei
image

世界上最宽阔的是海洋,比海洋更宽阔的是天空,比天空更宽阔的是人的胸怀。——雨果

“工欲善其事,必先利其器”,好的工具才能让我们的工作事半功倍。这一节我们来介绍 Chrome 开发者工具中自带的 performance 面板(在老的Chrome浏览器版本当中,performance 面板叫 Timeline 面板),performance 面板会实时地反应网站运行的活动,它可以帮助我们很好地定位问题。

准备工作

1.首先我们需要打开新的无痕窗口,进入隐身模式,这里是为了避免相关的浏览器插件带来的干扰。打开隐身模式的位置在浏览器右上角的设置,选择打开新的无痕窗口即可进入,进入之后可以看到如下提示,如图:

图片描述

2.按F12进入开发者工具,打开performance面板。performance面板如下图所示:

王云飞的图片

3.可以看到上图中performance面板内正中间的英文已经告诉我们如何开始使用这个面板了,点击最左侧的黑色圆就可以开始一个新的监测记录,也可以点击刷新按钮记录整个刷新过程中的监测记录。然后右侧我们如果勾选了Screenshots,就可以记录整个监测过程中每一帧的截图。如果勾选了Memory,我们就可以看到内存的详细使用情况以及垃圾回收的周期,也可以观察到内存有无泄漏的情况。

点击最右侧的小齿轮,可以看到一些配置项,打开CPU的节流开关,可以模拟移动端项目。打开Network的节流开关,我们模拟弱网(2g/3g)条件下网站的一些表现情况,然后根据弱网的具体表现进行相关优化。

案例分析

image.png

接下来我们就用performance面板来具体分析一下慕课网。上面是我的一个简单录屏,我们打开performance面板之后,然后点击刷新按钮,就可以看到慕课网首页加载过程中的性能表现:

图片描述
首先是最上面的总览区域,这上面我们可以直观地看到页面的整个加载过程,右侧是4个关键的指标,我们下面来一一介绍:

总览区域的下面是Frame,这个展示的是整个加载时间段的帧率展示。将鼠标移动上去可以看到各个时间段的帧率,在加载过程中也可以使用快捷键command + shift + p打开可以实时展示帧率的面板。接着把面板往上拉,可以看到非常重要的一个指标Main,它代表主线程,如下图:

图片描述
图中各种颜色的矩形代表加载过程中做的所有工作。横轴代表时间,纵轴代表具体的调用堆栈。调用堆栈就像是浏览器当中的解释器,我们可以利用它追踪函数的执行流。当浏览器中调用了多个函数,通过这种机制可以追踪到哪个函数正在执行,具体函数体中又调用了哪个函数。这里我们随便点击一个矩形,如下图: 图片描述
点击之后我们看到了这个事件下对应的一些具体信息,这里我们还可以点击Range右侧链接,点击之后会直接跳到sources面板对应的代码位置,这个功能可以说大大方便了我们定位具体的代码,如下图: 图片描述
最下面的区域分为4个tab,Summary与统计总览区域面板CPU相对应,Bottom-Up则是代表调用堆栈的前后调用关系,Call Tree是调用树,最后的Event Log则是事件日志。这个区域用到的情况不多,更多的是辅助作用。

小结

这一节我们以图文的形式向大家介绍了Chrome浏览器performance的使用,大家下去可以找一个网站利用这个工具进行性能优化的分析,然后根据给出的反馈再去进行具体的优化,相信有了这个工具,对你的优化工作可以起到事半功倍的作用。

上一篇下一篇

猜你喜欢

热点阅读