瞎搞

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个关键的指标，我们下面来一一介绍：

• 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的使用，大家下去可以找一个网站利用这个工具进行性能优化的分析，然后根据给出的反馈再去进行具体的优化，相信有了这个工具，对你的优化工作可以起到事半功倍的作用。