一、页面卡顿的原因
图像的显示原理：图像的显示需要GPU和CPU两者配合，CPU主要负责视图的创建，布局的计算和视图的绘制，然后进行图片的解码，将生成的位图交给GPU，GPU进行渲染，并将渲染的结果交到帧缓冲区，待下一个VSync 信号到来的时候视频控制器从帧缓冲区取出数据，经过转换，显示到屏幕上。
如果在规定的16.7ms内，CPU和GPU的合作未完成，没有生成新的渲染数据到帧缓冲区中，那么就会出现卡顿或者掉帧的情况。
二、页面卡顿优化方案
那么针对卡顿和掉帧的优化方案，在知晓了图像显示需要CPU和GPU配合工作后，就可以从CPU和GPU两方面入手：
CPU
1、尽量使用轻量级的对象，比如用不到事件处理的地方，可以考虑用CALayer取代UIView；
2、不要频繁地调用UIView的相关属性，比如frame、bounds、transform等属性，尽量减少不必要的修改；
3、尽量提前计算好布局，在有需要时一次性调整对应的属性，不要多次修改属性；
4、Autolayout会比直接设置frame消耗更多的CPU资源；
5、图片的size最好刚好跟UIImageView的size保持一致；
6、控制一下线程的最大并发数；
7、尽量把耗时的操作放到子线程
- 文本处理（尺寸计算、绘制）
- 图片处理（解码、绘制）
GPU
1、尽量减少视图数量和层次；
2、尽量避免短时间内大量图片的显示，尽可能将多张图片合成一张进行显示；
3、GPU能处理的最大纹理尺寸是4096*4096，一旦超过这个尺寸，就会占用CPU资源进行处理，所以纹理尽量不要超过这个尺寸；
4、减少透明的视图（alpha<1），不透明的就设置opaque为YES；
5、尽量避免出现离屏渲染。离屏渲染需要创建新的缓冲区，同时整个过程需要多次切换上下文环境，非常消耗性能。可能造成离屏渲染的原因如下：
- 光栅化，layer.shouldRasterize = YES
- 遮罩，layer.mask
- 圆角，同时设置layer.maskToBounds = YES、layer.cornerRadius大于0。考虑通过CoreGraphics绘制裁剪圆角，或者让美工提供圆角图片
- 阴影，layer.shadowXXX。如果设置了layer.shadowPath就不会产生离屏渲染
