开发者工具中performance面板解析

总览

如图，主要分为以下4个方面

设置面板

1， 不刷新页面进行录制
2，刷新页面进行录制
3，删除性能展示页面
4，上传本地的性能页面
5，下载当前的一个性能页面
6，切换历史性能
7，屏幕截图，勾选之后，会在区域2 显示页面每一帧的截图。
8，内存，勾选之后，会先区域3内显示页面加载中的一个性能展示模块。
9，页面指标，勾选之后，可以展示页面的指标。
10，回收页面
11，勾选之后， 在区域3就不会显示js相关信息。
12， 勾选之后，会使用高级绘画工具，会详细记录某些渲染事件的细节。
13，可以给cpu进行降速。
14，可以模拟网络降速

网络性能总览图

包含四种指标
ftp: 表示的每ms的页面帧 （黄色标记）
cpu：cpu占用情况（绿色标记）
network: 网络资源占用情况（蓝色标记）
heap(堆)： 表示的内存占用情况（白色标记）

火焰图：

主要是看主线程的火焰图
特别是带有红色三角的位置，表示页面代码有性能问题，可以根据警告的文字 ，进行提升优化点
对于其他颜色的进程段，可以点击，下面就会显示这段进程的总时间。

耗费的时间相关信息

有四个模块：
1，性能时间的总览，可以自选范围
2，自下而上： 表示的是耗费时间最长到最短的事件的排序
3，调用树: 指的就是从开始到结束，执行的事件的排序。
4，事件日志，就是展示每一个执行事件的时间信息。