原文地址:https://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/

此处为了抄写和学习,可能记一些小笔记。

电子枪横向换行扫描为水平同步信号,画完一帧画面,回到原位,准备画下一帧之前为垂直同步信号。显示器通常以固定频率进行刷新,这个刷新频率就是垂直同步信号。

  • 水平同步信号(horizonal synchronization)
  • 垂直同步信号(vertical synchronization)
    垂直同步(V-Sync)用于解决屏幕内容显示一半时,GPU就将新的一帧内容提交到缓冲区交换造成的画面撕裂问题。
    卡顿差生原因:CPU和GPU不论哪个阻碍了显示流程,都会造成掉帧现象。
    CPU资源消耗原因和解决方案
  1. 对象创建:对象的创建会分配内存、调整属性、甚至还会有读取文件等操作,比较消耗CPU资源。尽量用轻量的对象替代重量的对象,可以对性能有所优化。比如CALayer比UIView要轻量许多,那么不需要响应触摸事件的控件,用CALayer显示会更加合适。如果对象不涉及UI操作,则尽量放到后台线程去创建,但可惜的是包含有CALayer的控件,都只能在主线程创建和操作。通过Storyboard创建视图对象时,其资源消耗会比直接通过代码创建对象要大非常多,在性能敏感的界面里,Storyboard并不是一个好的技术选择。尽量推迟创建的时间,并把对象的创建分散到多个任务中去。尽管这实现起来比较麻烦,并且带来的优势并不多。如果对象可以复用,并且复用的代价比释放、创建新对象要小,那么这类对象应当尽量放到一个缓存池里复用。
  2. 对象调整:对象的调整也经常是消耗CPU资源的地方。这里特别说一下CALayer:CALayer内部并没有属性,当调用属性方法时,它内部是通过运行时resolveInstanceMethod为对象临时添加一个方法,并把对应的属性值保存到内部的一个Dictionary里,同时还会通知delegate、创建动画等等,非常消耗资源。UIView的关于显示相关的属性(比如frame/bounds/transform)等实际上都是CALayer属性映射来的,所以对UIView这些属性进行调整时,消耗的资源要远大于一般的属性。对此在应用中,应该尽量减少不必要的属性修改。当视图层次调整时,UIView、CALayer之间会出现很多方法调用和通知,所以在优化性能时,应该尽量避免调用视图层次、添加和移除视图。
  3. 对象销毁:对象的销毁虽然消耗资源不多,但积累起来也是不容忽视的。通常当容器类持有大量对象时,其销毁时的资源消耗就非常明显。同样的,如果对象可以放到后台线程去释放,那就挪到后台线程去。这里有个小Tip:把对象捕获到block中,然后扔到后台队列去随便发个消息以避免编译器警告,就可以让对象在后台线程销毁了。
NSArray *tmp = self.array;
self.array = nil;
dispatch_async(queue, ^{
    [tmp class];
});
  1. 布局计算:视图布局的计算是App中最为常见的消耗CPU资源的地方。如果能在后台线程提前计算好视图布局、并且对视图布局进行缓存,那么这个地方基本就不会产生性能问题了。不论是何种技术对视图进行布局,其最终都会落到对UIView.frame/bounds/center等属性的调整上。上面也说过,对这些属性的调整非常消耗资源,所以尽量提前计算好布局,在需要时一次性调整好对应属性,而不要多次、频繁的计算和调整这些属性。
  2. AutoLayout:AutoLayout是苹果本身提倡的技术,在大部分情况下也能很好地提升开发效率,但是AutoLayout对于复杂的视图来说常常产生严重的性能问题。伴随着视图数量的增长,AutoLayout带来的CPU消耗会呈指数级上升。具体数据可以看这个文章:http://pilky.me/36/ 。如果你不想手动调整frame等属性,你可以使用一些工具方法替代(比如常见的left/right/top/bottom/width/height快捷属性),或者使用ComponentKit、AsyncDisplayKit等框架。
  3. 文本计算:如果一个界面中包含大量文本(比如微博,微信朋友圈的等),文本的宽高计算会占用很大一部分资源,并且不可避免。如果你对文本显示没有特殊要求,可以参考下UILabel内部的实现方式:用[NSAttributedString boundingRectWithSize:options:context:]来计算文本宽高,用[NSAttributedString drawWithRect:options:context:]来绘制文本。尽管这两个方法性能不错,但仍旧需要放到后台线程进行以避免阻塞主线程。如果你用CoreText绘制文本,那就可以生成CoreText排版对象,然后自己计算了,并且CoreText对象还能保留以供稍后绘制使用。
  4. 屏幕上能看到的所有文本内容控件,包括UIWebView,在底层都是通过CoreText排版、绘制为Bitmap显示的。常见的文本控件(UILabel、UITextView等),其排版和绘制都是在主线程进行的,当显示大量文本时,CPU的压力会非常大。对此解决方案只有一个,那就是自定义文本控件,用TextKit或最底层的CoreText对文本异步绘制。尽管这实现起来非常麻烦,但其带来的优势也非常大,CoreText对象创建好后,能直接获取文本的宽高等信息,避免了多次计算(调整UILabel大小时算一遍、UILabel绘制时内部再算一遍);CoreText对象占用内存较少,可以缓存下来以备稍后多次渲染。
  5. 图片的解码:当你用UIImage或CGImageSource的那几个方法创建图片时,图片数据并不会立刻解码。图片设置到UIImageView或者CALayer.contents中去,并且CALayer被提交到GPU前,CGImage中的数据才会得到解码。这一步是发生在主线程的,并且不可避免。如果想要绕开这个机制,常见的做法是在后台线程把图片绘制到CGBitmapContext中,然后从Bitmap直接创建图片。目前常见的网络图片库都自带这个功能。
  6. 图像的绘制:图像的绘制通常是指用那些以CG开头的方法把图像绘制到画布中,然后从画布创建图片并显示这样的一个过程。这个最常见的地方就是[UIView drawRect:]里面了。由于CoreGraphic方法通常都是线程安全的,所以图像的绘制可以很容易的放到后台线程进行。一个简单异步绘制的过程大致如下(实际情况会比这个复杂很多,但基本原理一致):
- (void)display {
    dispatch_async(backgroundQueue, ^{
        CGContextRef ctx = CGBitmapContextCreate(...);
        // draw in context...
        CGImageRef img = CGBitmapContextCreateImage(ctx);
        CFRelease(ctx);
        dispatch_async(mainQueue, ^{
            layer.contents = img;
        });
    });
}

GPU资源消耗原因和解决方案
相对于CPU来说,GPU能干的事情比较单一:接受提交的纹理(Texture)和定点描述(三角形),应用变换(transform)、混合并渲染,然后输出到屏幕上。通常你所能看到的内容,主要也就是纹理(图片)和形状(三角形模拟的矢量图片)两类。

  1. 纹理的渲染:所有的Bitmap,包括图片、文本、栅格化的内容,最终都要由内存提交到显存,绑定为GPU Texture。不论是提交到显存的过程,还是GPU调整和渲染Texture的过程,都要消耗不少GPU资源。当在较短时间显示大量图片时(比如TableView存在非常多的图片并且快速滑动时),CPU占用率很低,GPU占用非常高,界面仍然会掉帧。避免这种情况的方法只能是尽量减少在短时间内大量图片的显示,尽可能将多张图片合成一张图片显示。当图片过大,超过GPU的最大纹理尺寸时,图片需要先由CPU进行预处理,这对CPU和GPU都会带来额外的资源消耗。目前来说,iPhone 4S以上机型,纹理尺寸上限都是4096x4096,更详细的资料可以看这里:http://iosres.com 。所以,尽量不要让图片和视图的大小超过这个值。
  2. 视图的混合(Composing):当多个视图(或者说CALayer)重叠在一起显示时,GPU会首先把他们混合到一起。如果视图结构过于复杂,混合的过程也会消耗很多GPU资源。为了减轻这种情况的GPU消耗,应用应当尽量减少视图数量和层次,并在不透明的视图里标明opaque属性以便面无用的alpha通道合成。当然,这也可以用上面的方法,把多个视图预先渲染为一张图片来显示。
  3. 图片的生成:CALayer的border、圆角、阴影、遮罩(mask),CASharpLayer的矢量图形显示,通常会触发离屏渲染(offscreen rendering),而离屏渲染通常发生在GPU中。当一个列表视图中出现大量圆角的CALayer,并且快速滑动时,可以观察到GPU资源已经占满,而CPU资源消耗很少。这时界面仍然能正常滑动,但平均帧数会降到很低。为了避免这种情况,可以尝试开启CALayer.shouldRasterizer属性,但这会把原来离屏渲染的操作转嫁到CPU上去。对于只需要圆角的某些场合,也可以用一张已经绘制好的圆角图片覆盖到原本视图上面用来模拟相同的视觉效果。最彻底的解决办法,就是把需要显示的图形在后台线程绘制为图片,便面使用圆角、阴影、遮罩等属性。