如何使用谷歌浏览器开发者工具中的Performance分析网页性能

当我们在进行大并发的直播消息互动时，对浏览器的负荷是比较大的，如何提供一种方法来评估实时网页性能以及相关的数据呢？

可以用谷歌浏览器开发者工具中的Performance绘制火焰图对网页进行分析。

---

接下来我们通过一步步使用Performance，来看看Performance有哪些强大的功能！

1、工具位置

 打开f12开发者工具，选中Performance。我们可以看到如上界面。

1. 表示绘制火焰图，可实时绘制一段时间当前页面时间轴的性能轨迹，然后生成一张图表（这个在后面详细讲）
2. 表示网速控制，可选3G快、3G慢、或者自定义网速
3. 表示是否对CPU进行减速，可选4倍减速、6倍减速，可用来测试CPU在极端环境下对页面性能的影响

 

2、绘制火焰图

我们拿虎牙直播举例，点击上图中的1按钮会得到下图中的绘制画面。可自己控制时长，时间为秒。这里我们绘制5秒后点击stop完成。

 

绘制完成后会得到如下火焰图，显示性能报告，我们根据性能报告用来分析页面得性能，从而找到性能瓶颈。 

 

3、分析帧率

下面绿色这条波浪线表示 每一秒的帧率（FPS），这是用来分析动画的重要指标，如果能保持在每秒60帧的话，那么体验是比较流畅的。下面的绿色长条越高表示越流畅，如果为红色则表示帧率有问题。

 

将鼠标移动到FPS、CPU、NET对应的位置，DevToos就会展示这个时间点页面的截图，左右移动鼠标可以重放当时的屏幕录像。 

 

 将鼠标移入绿色的条状上，Devtools会展示这个帧的FPS。

Summary面板就在Performance面板的下方，cpu图表的各种颜色表示在这个时间段内，CPU在处理各种时间上面所花费的时间，如果你看到某段颜色占据了大量的比重，就说明这个地方可能存在优化的空间。

 

4、定位瓶颈

例如下图

我们发现Scripting占据了CPU大量的时间，接下来所要做的就是如何减少 Scripting在CPU中运行的时间。

展开main图标，我们可以看到主线程运行的状况，X轴代表时间。每个长条代表着event，长条越长就代表花的时间越多，Y轴代表调用栈。

 

我们可以通过双击、拖动来放大缩小图标的范围，从时间轴来详细观察分析报告。

如果在性能长条中的右上角出现了红色的三角形，说明这个事件存在问题，需要特别留意。点击带有红色三角形的事件，在Summary面板中会看到详细的信息。注意reveal这个链接，双击它，会让它高亮触发这个事件的event，如果点击sdk.herewhite.com/white-web-sdk/2.3.10.js:55 就会跳到该段对应的代码处。

 

跳到可能需要优化的的代码处，它显示了该段代码运行总花费的时间。

 

5、导出火焰图（profile）

鼠标右键点击图下控制面板空白处，会出现Load Profile和Save Profile，选择Save Profile，便可将该次完整的性能报告导出存入本地。

打开火焰图：即点击Load Profile，选择需要导入的Profile文件即可。

 

Performance基础的用法就分享到这里了，更多的性能参数和分析还需要大家自己去探索，欢迎大家指导、讨论~