最近在做APP性能专项测试，视频剪辑过程中出现多次卡顿掉帧的问题，为了更好地了解出现掉帧卡顿的原因，去查阅了资料并记录下该文章
了解卡顿原因之前，先了解下视图渲染过程如下图：
1、CPU计算显示的内容（如文本绘制，UI布局计算，视图创建，图片解码等等），然后把计算好的内容提交给GPU
2、GPU 渲染（变换，图层合成，纹理渲染等）完成后，将渲染结果放入帧缓冲区
3、视频控制器会按照 VSync 信号逐行读取帧缓冲区的数据，经过可能的数模转换传递给显示器显示
备注：
1、显示器上的所有图像都是一线一线的扫描上去的（从左到右，从上到下刷新），如下图：
3、水平同步可能会出现画面撕裂的现象（如下图）。因为画面的渲染不是整个画面一起渲染的，是逐行逐列渲染。如果没有开启垂直同步，设备配置不够，则画面在高速移动中会出现一行还没刷新完成就出现下一行，进而出现撕裂情况
4、垂直同步就是为了解决画面撕裂的问题，当开启垂直同步后，GPU 会等待显示器的 VSync 信号发出后，才进行新的一帧渲染和缓冲区更新。这样能解决画面撕裂现象，也增加了画面流畅度，但需要消费更多的计算资源，也会带来部分延迟。
5、目前，iOS设备使用双缓存，并开启垂直同步，Android是三缓存，并开启垂直同步（缓存之间怎么切换的呢？？？）
首先，先了解下基础的知识：假定设备的刷新率是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 不论哪个阻碍了显示流程，都会造成掉帧现象
经过上面的分析，为了优化掉帧卡顿问题，我们就需要对CPU和GPU的处理过程进行优化
先讲下以下的几个参数：
Frames Per Second；应用界面平均每秒刷新次数，
Jank ：1s内卡顿次数
BigJank :1s内严重卡顿次数
PerfDog Jank计算方法：
1. 同时满足以下两条件，则认为是一次卡顿 Jank.
a) 当前帧耗时>前三帧平均耗时2倍。
b) 当前帧耗时>两帧电影帧耗时(1000ms/24 2=84ms)。
2. 同时满足两条件，则认为是一次严重卡顿 BigJank .
a) 当前帧耗时>前三帧平均耗时2倍。
b) 当前帧耗时>三帧电影帧耗时(1000ms/24 3=125ms)。
测试过程中，卡顿时长的占比。即Stutter(卡顿率)=卡顿时长/总时长
卡顿时长计算：基于Jank的基础上，一次Jank卡顿，会有一次卡顿时间Jank time。测试过程中可能有多次Jank卡顿，即有多次卡顿时间Jank time。卡顿时长即为多次卡顿时间的和
上下帧画面显示时间间隔，也可简单认为单帧渲染耗时
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。比如微信播放视频、视频播放器等。