使用chrome的profile分析性能问题实战操作

日常工作中,用到的chrom自带的性能分析工具,分析性能问题的方法,比较实用,记录下。

一、 Performance(性能)面板:

Step1:点击谷歌chrome右上角

使用chrome的profile分析性能问题实战操作

 

 

 

 Step2:点击弹出菜单的 更多工具:

使用chrome的profile分析性能问题实战操作

 

 

Step3:点击选择 开发者工具 如下图

 使用chrome的profile分析性能问题实战操作

 

 Step4:选择Performance (性能)

 

使用chrome的profile分析性能问题实战操作

Step5:Performance(性能) 侦测界面如下图:

使用chrome的profile分析性能问题实战操作

 

 

 

、 使用Performance(性能)侦测工具录制:

 

Step1:在3D软件运行的时候点击 开始录制 如下图所示操作:

 使用chrome的profile分析性能问题实战操作

 

 

 

Step2:录制中(录制过程可能很慢,需要多等一下,一般需录制出现蓝色进度条20秒)如下图:

 使用chrome的profile分析性能问题实战操作

Step3:点击stop 按钮,结束录制:

 使用chrome的profile分析性能问题实战操作

 

 

 

、 使用Performance(性能)侦测工具查看性能消耗情况:

 

Step1:如下图:

使用chrome的profile分析性能问题实战操作

 

 

Step2:查看选中帧范围,如下图

 使用chrome的profile分析性能问题实战操作

Step3:查看一帧运行性能细节(1)

 使用chrome的profile分析性能问题实战操作

 

 

Step4:查看一帧运行性能细节(2)

 使用chrome的profile分析性能问题实战操作

 

 

 

Step5:查看一帧运行性能代码执行细节(1), 如下图

 使用chrome的profile分析性能问题实战操作

 

 

Step6:查看一帧运行性能代码执行细节(2), 如下图

 使用chrome的profile分析性能问题实战操作

 

 

Step7:进图代码,看具体的代码位置

 使用chrome的profile分析性能问题实战操作

 

 

 

Step8:争取定位到真正的消耗性能严重的代码区域

 使用chrome的profile分析性能问题实战操作

 

 

Step5:准确定位

使用chrome的profile分析性能问题实战操作

 

 

 

 

四、 保存 / 加载Performance(性能)侦测数据,可以把这个数据分享给开发人员来分析:

 使用chrome的profile分析性能问题实战操作

 

 

五、清理性能侦测数据(在重新开始记录性能分析数据之前,先清理),如下图:

 

 使用chrome的profile分析性能问题实战操作

 

上一篇:spring boot + swagger报错记录


下一篇:Power BI Performance Analyzer