UI卡顿和掉帧原因，及相关优化方案

前面几篇文章都已经将一些iOS图像显示的原理梳理好了，这回正式进入到标题所讲。

卡顿掉帧示例

相关知识背景：页面滑动的流畅性是60fps，即1s有60帧的画面更新才可以让人感到画面流畅。

如上图所示，在规定的时间内，即16.7ms内（按照1s完成60帧来计算），由CPU和GPU共同协作产生一阵数据。CPU在做UI布局，文本计算，图片解码以及绘制等工作占用时间过长，导致留给GPU的时间就非常少，GPU要想把图层合成和纹理渲染准备完毕，所需的总时间就可能会超过16.7ms，这样在当下这一帧vsync信号到来之前，没有准备好当下这一帧的画面，就产生了掉帧现象，我们肉眼看到的效果就是滑动的卡顿现象。

总结一句话来说，在规定的16.7ms内，在下一个vsync信号到来之前，CPU和GPU配合下并没有完成下一帧图像的完成，就会出现滑动的卡帧记图像的掉帧。

原因知道了，就可以提出相应的优化方案了。可以从CPU和GPU做以下优化：

CPU：

1）对象创建、调整、销毁。

2）预排版（布局计算、文本计算）。

3）预渲染（文本等乙部绘制、图片解码等）。

将以上3点操作放到子线程里做。

GPU：

1.纹理渲染

1）避免离屏渲染。

2）依托于CPU的异步绘制机制来减轻GPU的压力。

2.视图混合

1）如果多个view层层叠加，GPU既要做每个视图的合成，合成每一个像素点的像素值，需要进行大量计算，所以尽量减轻视图的复杂性，大大减轻GPU的压力。

2）也可以采用CPU的异步绘制，使得提交的位图本身就是一个层级很少的视图，也能减轻GPU的压力。