性能优化 - UI卡顿

屏幕成像原理

1. 垂直同步信号(VSync)
2. 水平同步信号(HSync)

CPU (中央处理器) 作用

对象的创建和销毁,对象属性的调整,布局计算,文本的计算和排版,图片格式转换和解码,图像的绘制(Core Graphics)

GPU(图形处理器)作用

纹理渲染 (图片/文本)
视图的混合 (多层视图重叠显示 透明图层处理)
图形的生成 (CAlayer的border 圆角 阴影 遮罩)

屏幕成像原理

CPU 计算好显示内容提交到 GPU，GPU 渲染完成后将渲染结果放入帧缓冲区，随后视频控制器会按照 VSync 信号逐行读取帧缓冲区的数据，经过可能的数模转换传递给显示器显示。
CPU--计算--> GPU--渲染--> 帧缓冲--读取-->视频控制器--显示-->屏幕

CPU优化

1. 尽量使用轻量级的对象,比如用不到事件处理的地方,使用CALAyer取代UIView
2. 不要频繁调用UIview的显示属性,如frame/bounds/transform,尽量减少不必要的修改
3. 尽量提前计算好布局,在需要时一次性调整对应的属性,不要多次修改属性
4. AutoLayout比直接设置frame消耗更多的CPU资源
5. 图片的size最好和UIImageView的size保持一致
6. 控制一下多线程的最大并发数量
7. 尽量把耗时的操作放到子线程
   • 文本处理(尺寸计算,绘制)
   • 图片的处理(解码,绘制)

GPU优化

1. 尽量减少view的数量和层次
2. 尽量避免短时间内大量图片的显示,尽可能的多张图片合成一张图片显示
3. GPU能处理最大的纹理尺寸(4096*4096),一旦超过这个尺寸,就会占用CPU的资源进行处理,所以纹理尽量不要超过这个尺寸
4. 减少透明视图(alpha < 1),不透明的视图设置opaque=true
5. 尽量避免出现离屏渲染

离屏渲染

在OpenGL中GPU有两种渲染方式

1. On-Screen-Rendering: 在当前屏幕渲染,在当前用于显示的屏幕缓冲区进行渲染操作
2. Off-Screen-Rendering: 离屏渲染,在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作

离屏渲染消耗性能的原因

1. 需要创建新的缓冲区
2. 离屏渲染的过程中,需要多次切换上下文,先从当前屏幕切换到离屏,等到离屏渲染结束后,将离屏渲染的结果显示到屏幕上,又将上下文环境从离屏切换到当前屏幕

哪些操作会触发离屏渲染?

1. 光栅化 layer.shouldRasterize = true
2. 遮罩 layer.mask
3. 圆角,同时设置layer.masksTobBounds = true layer.cornerRadius大于0 考虑使用CoreGraphics绘制裁剪圆角或美工切图
4. 阴影 layer.shadowXXX 如果设置了layer.shadowPath就不会产生离屏渲染