本文将从原理探究一下iOS出现界面出现卡顿的原因,以及给出适当的解决办法

一.屏幕显示原理

     最早的CRT显示器 (CRT显示器学名为“阴极射线显像管")内部安装有一个电子枪,可以向屏幕的荧光屏发射电子信号,电子枪对荧光屏从左至右进行单行扫描,扫描完一行会发出一个叫做水平同步信号的电子脉冲,然后电子枪再到下一行进行扫描,如此循环,直到扫描完整个屏幕的最后一行.扫描完最后一行之后,会发出一个垂直同步信号,GPU就会把下一帧的信号给显示屏去显示. 如图

屏幕显示原理

    如今的显示屏虽然都更新换代成了液晶显示屏,电子枪也被淘汰,但是显示的原理还是类似的.

    在显示界面之前,我们的计算机做了什么工作呢?

CPU-创建视图、分配内存空间、计算控件布局、图片的解码和文本的绘制等等；

GPU-视图变换、合成和渲染等；

GPU将渲染完的视图提交到帧缓冲区，等收到垂直同步信号之后将内容交给屏幕显示

二.问题分析

    小时候看电视有时会看到画面被“撕裂”，意思就是一幅图片被“砍成”两截，上下显示的图像拼接不上，这种现象是如何产生的呢？

    基于上面分析的显示原理,如果GPU的速度很快，上一帧图像还没显示完，下一帧图像就处理完提交到帧缓冲区（帧缓冲区的存储是覆盖式的，提交的新数据会覆盖老数据），当提交到帧缓冲区的过程中，上一帧画面显示完，发出了垂直同步信号，这时候，新的图片刚缓冲一半，那么只好把这个拼凑出来的图像交给显示器去显示了。

   如何解决图像撕裂的问题，很简单，就是当GPU生成了一幅完整的图像存入缓冲区之后，使GPU休眠，然后等待垂直同步信号的到来，再进行下一帧的渲染。

   但是这个解决方案又带来了新的问题：掉帧。意思就是在垂直同步信号发出的时候，下一帧数据还没有处理完成，没办法显示，只好将未完成的这一帧丢弃，造成了掉帧问题，出现界面的卡顿。造成这一问题的原因很有可能就是我们开发者没有对程序进行足够的优化，把过重的任务分配给CPU和GPU。所以对我们的程序进行有效的优化势在必行。

三.优化点

1.提前布局

提前布局，在服务器拿到数据的时候，就可以确定视图的布局了，包括每个控件的frame，cell的高度以及文本排版结果，这是可以在后台线程计算页面的布局，缓存到内存中，当列表滚动到某个cell的时候直接拿到对应的布局，设置相应的属性即可。免去了在滚动式后重复计算。

2.按页加载缓存

例如，首页数据缓存，应用启动时会将缓存到本地的所有数据读取出来，显示到屏幕上，每次刷新的时候会将所有缓存的数据和新请求下来的数据写入到磁盘，这意味着，大部分的数据会反复写入到磁盘，这样的写入是冗余的，因为前面的这些数据并没有发生改变。

改进：可以将这些列表数据进行分割，分割成一页一页：1.启动时只读取第一批数据，显示在屏幕中，2.下拉舒心和上拉加载的时候只把当前服务器返回的一批数据写入缓存,3.在上拉加载的时候先检查本地是否有未读的数据，若有，则读取缓存，否则再去服务器下载新数据。

3.后台线程处理图片

图片的裁剪是很常见的需求，但是对图片的处理是很消耗资源的，比如最简单的切圆角方法：layer.cornerRadius = XX ; layer.masksTobounds = YES;

这种做法在滚动视图中往往会使滚动变得卡顿，因为这种实现方法会触发离屏渲染，屏幕外缓冲区，跟当前屏幕缓冲区上下文切换是很耗性能的，所以离屏渲染往往会造成卡顿

，那么如何处理图片呢？可以使用CoreGraphics，CoreGraphics通常是线程安全的，所以可以进行异步绘制，显示的时候再放回主线程。

4.更加高效的控件

可以直接从开源库中选取更加高效的空间替换项目中性能没那么好的空间。比如YYLabel，开启YYLabel的displaysAsynchronously、ignoreCommonProperties属性可以异步绘制文本以及忽略不需要的属性。还有Facebook著名的AsyncDisplayKit

5.其他

（1).尽量减少视图层级，合并多余的视图。

  (2).减少频繁的创建和移除视图，可以使用hidden属性代替

  (3).异步绘制：CoreGraphics

6.补充

APM：Application Performance Management（应用程序性能管理）

产品：听云、阿里百川、腾讯bugly