3、得到文件之后,打开谷歌浏览器:在地址栏输入 chrome://tracing/
然后load刚才的文件:( 或者你双击该html文件)
4、这里我们得到了非常多的性能指标,包括上图中红色字体标记的CPU用量,多核CPU调度情况,UI主线程,渲染线程等,但是我们应用层开发,解决的主要是app卡顿问题,一般只需要 去关注 **UI主线程的掉帧情况
**即可. 按照下图:
详解一下这个带圈的F
:
- 整个坐标,横轴为时间,从左到右时间刻度增加,代表各项指标随着时间的变化
带圈的F
: 有绿色,黄色和红色。其中绿色表示绘制正常,无需我们去关心,需要关注的是 黄色和红色,特别是红色。- 鼠标点击其中一个红色的F,然后按键盘
G
键,就会出现红色的竖线
,每两根红线之间代表一帧的时长(大部分手机的屏幕刷新频率还是60帧,所以每次绘制大概是16.67MS
),这个F之所以是红色,是因为这一次的UI绘制时长远远超过了1帧,如果UI在1帧时间之内无法完成,便会造成掉帧,一旦掉帧,在用户的感知下,就是卡顿.- 看下图:
使用鼠标拖拽,可以通过图形界面看到这一次绘制所花费的时长:为116.868ms
- 在下面的Alert栏中发现了疑似
掉帧
元凶