本篇主要记录一下我对界面优化上的一些探索。关于时间优化的探索将会在中篇里进行介绍。下篇将主要介绍一些耗电优化、安装包瘦身的探索。
1、卡顿原理
要了解卡顿原理,需要对帧缓冲区、垂直同步、CPU 和 GPU 几个词进行一下了解,然后综合起来,就可以得到卡顿的答案。本篇我就按照自己的理解来进行描述,如有不当,欢迎指正。
1.1、帧缓冲区
听起来很高大上,其实就是用来存放每一帧画面数据的一个“仓库”,一个仓库只存放一帧画面的数据,iOS 一直是双缓存,就是有两个仓库,存当前帧数据的叫“正式仓库”,存下一帧数据的叫“预备仓库”。
当正式仓库的数据被取走后,两者身份交换,原来的预备仓库转正为正式仓库,原来的正式仓库变成预备仓库。
1.2、垂直同步 (VSync)
就是一个“信号”,通知 app 该开始准备往预备仓库里存放数据了,系统过一会就要来取,这个时间大概是16毫秒。
1.3、CPU (中央处理器)
主要的工作有:正式对象的创建和销毁、对象属性的调整、布局计算、文本的计算和排版、图片的格式转换和解码、图像的绘制。我们可以理解为负责包裹内部的处理工作,简称“打包”。
1.4、GPU (图形处理器)
主要的工作有:将 CPU 计算好的内容进行变换、合成、渲染等处理,然后将渲染结果提交到帧缓冲区。我们可以理解为,对 CPU 给过来的包裹进行分类、排列等操作后,存放到仓库里去,简称“入库”。
1.5、卡顿原理
当收到系统发过来的 VSync “信号”后,CPU 就开始对这一帧画面的数据进行“打包”,然后交给 GPU 进行“入库”操作,存入到“预备仓库”中。
16毫秒后,预备仓库转正,系统开始读取仓库里的数据,如果这个时候,仓库中的数据还没有准备好,那么系统就会发脾气,放弃读取仓库中的数据。
那么这个时候,因为系统的宁缺毋滥,导致了显示器上显示的还是上一帧画面,就造成了卡顿的效果。
2、性能优化
作为软件开发工程师的我们,既不能延长16毫秒的处理时间,也不能改变系统的脾气,那我们能做的就是尽量在这个时间内完成数据的准备。要么“打包”快一点,要么“入库”快一点,也就是针对 CPU 和 GPU 的工作进行优化,这就是性能优化的工作了。
2.1、CPU 工作之正式对象的创建和销毁
-
UITableViewCell 和 UICollectionViewCell 的复用,可以减少 cell 的创建操作;
-
尽量使用轻量级的对象,可以减少对象的创建时间,比如在不需要事件处理的场景里,使用CALayer 比 UIView 会更加合适;
-
表情键盘使用 UICollectionViewCell 代替 UIButton,可以减少对象的创建操作;
-
对象不涉及UI操作,放到后台线程创建;
-
性能要求严格的界面,storyborad的资源消耗>代码创建;
-
推迟对象创建的时间,对象放到多个任务中,比如懒加载;
2.2、CPU 工作之对象属性的调整
- UIView 有一个 CALyer 的属性,UIView 负责事件的处理,CALyer 负责图层的绘制和显示。需要注意的是,CALyer本身是没有属性的,所以当改变 UIView 的显示相关的属性如 frame、bounds 和 transform 的时候,会消耗较多的资源,所以减少对这些属性的一些不必要修改,能减小 CPU 的压力;
2.3、CPU 工作之布局计算
-
UITableViewCell 高度提前计算并存储,要用的时候直接读取;
-
frame 计算好,较少不必要的修改;
-
Autolayout会比直接设置frame消耗更多的CPU资源;
2.4、CPU 工作之文本的计算和排版
-
普通文本可以在子线程用 [NSAttributedString boundingRectWithSize:options:context:] 来计算文本宽高,用 -[NSAttributedString drawWithRect:options:context:] 来绘制文本;
-
CoreText 对象占用内存较少,当显示大量文本时,可以用 CoreText 对文本异步绘制;
2.5、CPU 工作之图片的格式转换和解码
- 在后台线程先把图片绘制到 CGBitmapContext 中,然后从 Bitmap 直接创建图片;
2.6、CPU 工作之图像的绘制
-
UITableViewCell 滑动减速的时候才加载图片,可以参考这个demo;
-
加载图片时,imageNamed 方法默认加载图片成功后会内存中缓存图片,下次读取会很快;imageWithContentsOfFile 方法不会缓存图片,大图片可以使用该方法;
2.7、GPU 工作之渲染
-
尽量不要让图片和视图的大小超过 GPU 纹理尺寸上限:4096×4096,不然图片还需要经过 CPU 的处理;
-
尽量减少视图数量和层次,并设置视图为不透明,UIView 的不透明属性 (opaque) 默认为 YES,一般设置背景颜色即可;CALayer 的不透明属性 (opaque) 默认为 NO,需要设置为 YES;
-
CALayer 的 border、圆角、阴影、遮罩,通常会触发离屏渲染,尽量少用,圆角属性可以使用 CoreGraphics 绘制或使用圆角图片代替,关于离屏渲染的知识,具体可以参考这篇文章:iOS 图形性能优化;
-
图片的 size 最好刚好跟 UIImageView 的 size 保持一致,这涉及到像素对齐的知识,也可以在上面这篇文章中详细了解;
最后郑重声明,本篇里只是记录一下我的个人理解和代码实践,资料大量参考了这篇文章:iOS 保持界面流畅的技巧,作者是写出了 YYKit 框架的大牛,想要深入学习的朋友请移步。
本篇的界面优化就记录到这里,后面会持续更新,欢迎指正。