总览
如图,主要分为以下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,事件日志,就是展示每一个执行事件的时间信息。