APP页面掉帧卡顿原因及Perfdog性能测试之FPS

背景

最近在做APP性能专项测试，视频剪辑过程中出现多次卡顿掉帧的问题，为了更好地了解出现掉帧卡顿的原因，去查阅了资料并记录下该文章

过程

视图渲染过程

了解卡顿原因之前，先了解下视图渲染过程如下图：

1、CPU计算显示的内容（如文本绘制，UI布局计算，视图创建，图片解码等等），然后把计算好的内容提交给GPU

2、GPU 渲染（变换，图层合成，纹理渲染等）完成后，将渲染结果放入帧缓冲区

3、视频控制器会按照 VSync 信号逐行读取帧缓冲区的数据，经过可能的数模转换传递给显示器显示

图像显示原理.png

备注：
1、显示器上的所有图像都是一线一线的扫描上去的（从左到右，从上到下刷新），如下图：

显示器图像刷新.png

2、 V-SYNC：即垂直同步信号量，这里的V即垂直的意思；当整个屏幕刷新完毕，即一个垂直刷新周期完成，显示器会发出 VSync 信号

3、水平同步可能会出现画面撕裂的现象（如下图）。因为画面的渲染不是整个画面一起渲染的，是逐行逐列渲染。如果没有开启垂直同步，设备配置不够，则画面在高速移动中会出现一行还没刷新完成就出现下一行，进而出现撕裂情况

撕裂现象.png

4、垂直同步就是为了解决画面撕裂的问题，当开启垂直同步后，GPU 会等待显示器的 VSync 信号发出后，才进行新的一帧渲染和缓冲区更新。这样能解决画面撕裂现象，也增加了画面流畅度，但需要消费更多的计算资源，也会带来部分延迟。

5、目前，iOS设备使用双缓存，并开启垂直同步，Android是三缓存，并开启垂直同步（缓存之间怎么切换的呢？？？）

UI 卡顿和掉帧的原因

首先，先了解下基础的知识：假定设备的刷新率是60HZ，如果页面的滑动流畅率为60fps，也就是一秒更新60张图片，人眼上看就是流畅的效果，也就是每隔16.7ms（1/60）就要产生一帧的画面，即：每隔16.7ms发出V-SYNC信号，触发对UI进行渲染，这一帧的画面需要由CPU和GPU共同协同完成显示（详见上面的视图渲染过程）

卡顿掉帧原因：
如果在一个 VSync 时间内，CPU花费的时间比较长，留给GPU的时间就比较少，GPU+CPU总时间就可能超过16.7ms，下一帧到来前，没准备好当下帧的画面，这时候显示器还是显示上一帧的画面，就出现掉帧，就出现滑动卡顿；
同理，如果GPU花费的时间比较长，总时长也可能超过16.7ms
所以，CPU 和 GPU 不论哪个阻碍了显示流程，都会造成掉帧现象

UI卡段，掉帧原因.png

滑动流畅性方案

经过上面的分析，为了优化掉帧卡顿问题，我们就需要对CPU和GPU的处理过程进行优化

减轻CPU压力

对象创建，调整，销毁放在子线程中做
预排版（布局计算，文本计算）放在子线程，主线程有更多时间响应用户交互
预渲染（文本异步绘制、图片编解码，图像绘制）放在子线程

减轻GPU压力

纹理渲染，触发离屏渲染，避免离屏渲染，依托cpu异步绘制机制减轻CPU压力
视图混合：多个视图层层叠加，合成需要大量计算，减轻视图层级的复杂性，减轻GPU的压力，
参考文档：https://blog.csdn.net/smnisbear/article/details/51170932

Perfdog中的性能指数

perfdogFPS.png

先讲下以下的几个参数：

FPS

Frames Per Second；应用界面平均每秒刷新次数，

Avg(FPS):平均帧率(一段时间内平均FPS)
Var(FPS):帧率方差(一段时间内FPS方差)，体现帧率的稳定性
Drop(FPS):降帧次数(平均每小时相邻两个FPS点下降大于8帧的次数)
备注：帧率低，并不一定是卡顿，如果渲染不是均匀的，即使帧率高，也可能会出现一卡一卡的现象

Jank和BigJank

Jank：1s内卡顿次数
BigJank:1s内严重卡顿次数
PerfDog Jank计算方法：
1. 同时满足以下两条件，则认为是一次卡顿Jank.
a) 当前帧耗时>前三帧平均耗时2倍。
b) 当前帧耗时>两帧电影帧耗时(1000ms/242=84ms)。
2. 同时满足两条件，则认为是一次严重卡顿BigJank.
a) 当前帧耗时>前三帧平均耗时2倍。
b) 当前帧耗时>三帧电影帧耗时(1000ms/243=125ms)。

stutter

测试过程中，卡顿时长的占比。即Stutter(卡顿率)=卡顿时长/总时长
卡顿时长计算：基于Jank的基础上，一次Jank卡顿，会有一次卡顿时间Jank time。测试过程中可能有多次Jank卡顿，即有多次卡顿时间Jank time。卡顿时长即为多次卡顿时间的和

FrameTime

上下帧画面显示时间间隔，也可简单认为单帧渲染耗时
Avg(FTime):平均帧耗时

测试注意事项

1、流畅度不等于FPS，需要多维度衡量，考虑FPS，Jank，Stutter
2、APP需要关注FPS、Jank及卡顿率。只是需要区分使用场景，如：
（1）、静态页面窗口
只需关注FPS，理论FPS应该为0，否则，说明有冗余刷新，容易引起手机发热及耗电。
（2）有滚动动画页面窗口
只需关注FPS，FPS处于合适值即可，无需高频刷新。
（3）快速滑动页面窗口。
需要关注FPS、Jank及卡顿率。手机交互灵敏度就是来源于此，一般滑动状态下，帧率越高越好，Jank越小越好。
（4）播放视频页面窗口。
需要关注FPS、Jank及卡顿率，视频卡顿直接影响用户。视频一般帧率18-24帧，Jank=0。比如微信播放视频、视频播放器等。