iOS视图渲染以及性能优化总结

屏幕的显示原理


CRT电子枪按照图片上的方式,从上到下、从左到右的方式一行行扫描,扫描完成之后显示器就会显示一帧的画面。随后电子枪会回到初始位置继续下一次扫描(就是黄色虚线部分)。

这里涉及到两个概念:水平同步信号(HSync),垂直同步信号(VSync)

HSync:当电子枪换到新的一行,准备开始扫描,显示器会发出一个HSync

VSync:当一帧画面绘制完成后,电子枪回复到原位,准备画下一帧前,显示器会发出一个VSync(就是黄色虚线部分)

我们都知道,显示器通常以固定频率进行刷新,刷新频率是每秒60帧,平均每帧就16.67ms。这个刷新频率就是 VSync 信号产生的频率。

视图渲染

UIKit框架

UIKit使我们常用的框架

Core Animation翻译为核心动画,它为图形渲染和动画提供了基础,它依赖于OpenGL ES做GPU渲染,Core Graphics做CPU渲染。

Graphics Hardware是图形硬件.

渲染流程

由上图可知,要在屏幕上显示视图,需要CPU和GPU一起协作,CPU计算好显示的内容提交到GPU,GPU渲染完成后将结果放到帧缓存区,随后视频控制器会按照 VSync 信号逐行读取帧缓冲区的数据,经过可能的数模转换传递给显示器显示。

iOS使用的是双缓冲机制。即GPU 会预先渲染好一帧放入一个缓冲区内(前帧缓存),让视频控制器读取,当下一帧渲染好后,GPU 会直接把视频控制器的指针指向第二个缓冲器(后帧缓存)。当你视频控制器已经读完一帧,准备读下一帧的时候,GPU 会等待显示器的 VSync 信号发出后,前帧缓存和后帧缓存会瞬间切换,后帧缓存会变成新的前帧缓存,同时旧的前帧缓存会变成新的后帧缓存。

渲染流程

CoreAnimation Pipeline

1.Commit Transaction:通过CPU创建绘制视图,提交会话,包括自己和子数的layout得状态,图片的解码和格式转换等等。详细可见下面图片

2.Render Server:解析提交的子树状态,生成绘制指令

3.GPU执行绘制指令,进行渲染。

4.显示渲染后的帧缓存的数据。

Commit Transaction

Commit Transaction

Commit Transaction - Layout(布局)

Commit Transaction - Layout

调用layoutSubviews方法。

调用addSubview方法

填充内容,数据库查询

通常会造成CPU或者I/O瓶颈

Commit Transaction - Display(显示)

Commit Transaction - Display

通过drawRect:绘制内容

String绘制

通常会造成CPU或者内存瓶颈

Commit Transaction - Prepare(准备提交)

Commit Transaction - Prepare

图片解码,把图片从PNG或JPEG等格式中解压出来,得到像素数据

图片格式转换,如果GPU不支持这种颜色格式,CPU需要进行格式转换

比如应用中有一些从网络下载的图片,而GPU恰好不支持这个格式,这就需要CPU预先进行格式转化。

Commit Transaction - Commit(提交)


Commit Transaction - Commit

打包layers并且提交到Render Server中

递归提交子树的layers

如果子树很复杂,对CPU消耗很大

卡顿产生的原因

在 VSync 信号到来后,系统图形服务会通过 CADisplayLink 等机制通知 App,App 主线程开始在 CPU 中计算显示内容,比如视图的创建、布局计算、图片解码、文本绘制等。随后 CPU 会将计算好的内容提交到 GPU 去,由 GPU 进行变换、合成、渲染。随后 GPU 会把渲染结果提交到帧缓冲区去,等待下一次 VSync 信号到来时显示到屏幕上。由于垂直同步的机制,如果在一个 VSync 时间内,CPU 或者 GPU 没有完成内容提交,则那一帧就会被丢弃,等待下一次机会再显示,而这时显示屏会保留之前的内容不变。这就是界面卡顿的原因。

从上面的图中可以看到,CPU 和 GPU 不论哪个阻碍了显示流程,都会造成掉帧现象。所以开发时,也需要分别对 CPU 和 GPU 压力进行评估和优化。

CPU 资源消耗原因

1.对象创建:对象的创建会分配内存、调整属性、甚至还有读取文件等操作,比较消耗 CPU 资源。尽量用轻量的对象代替重量的对象,可以对性能有所优化。比如用CALayer代替UIView,用CATextLayer代替UILabel。另外,通过 Storyboard 创建视图对象时,其资源消耗会比直接通过代码创建对象要大非常多

2.对象销毁:对象的销毁虽然消耗资源不多,但累积起来也是不容忽视的。通常当容器类持有大量对象时,其销毁时的资源消耗就非常明显。同样的,如果对象可以放到后台线程去释放,那就挪到后台线程去

3.对象调整:当视图层次调整时,UIView、CALayer 之间会出现很多方法调用与通知,所以在优化性能时,应该尽量避免调整视图层次、添加和移除视图。

4.布局计算:视图布局的计算是 App 中最为常见的消耗 CPU 资源的地方。如果能在后台线程提前计算好视图布局、并且对视图布局进行缓存,那么这个地方基本就不会产生性能问题了。

5.Autolayout:但是 Autolayout 对于复杂视图来说常常会产生严重的性能问题。随着视图数量的增长,Autolayout 带来的 CPU 消耗会呈指数级上升。具体数据可以看这个文章:http://pilky.me/36/

6.文本计算:如果一个界面中包含大量文字,文本的宽高计算会占用很大一部分资源,并且不可避免。如果你对文本显示没有特殊要求,可以参考下 UILabel 内部的实现方式:用 [NSAttributedString boundingRectWithSize:options:context:] 来计算文本宽高,用 -[NSAttributedString drawWithRect:options:context:] 来绘制文本。另外这两个操作尽可能得在后台操作。

7.文本渲染:屏幕上能看到的所有文本内容控件,包括 UIWebView,在底层都是通过 CoreText 排版、绘制为 Bitmap 显示的。常见的文本控件 (UILabel、UITextView 等),其排版和绘制都是在主线程进行的,当显示大量文本时,CPU 的压力会非常大。对此解决方案只有一个,那就是自定义文本控件,用 TextKit 或最底层的 CoreText 对文本异步绘制。尽管这实现起来非常麻烦,但其带来的优势也非常大,CoreText 对象创建好后,能直接获取文本的宽高等信息,避免了多次计算(调整 UILabel 大小时算一遍、UILabel 绘制时内部再算一遍);CoreText 对象占用内存较少,可以缓存下来以备稍后多次渲染。

8.图片的解码:当你用 UIImage 或 CGImageSource 的那几个方法创建图片时,图片数据并不会立刻解码。图片设置到 UIImageView 或者 CALayer.contents 中去,并且 CALayer 被提交到 GPU 前,CGImage 中的数据才会得到解码。这一步是发生在主线程的,并且不可避免。如果想要绕开这个机制,常见的做法是在后台线程先把图片绘制到 CGBitmapContext 中,然后从 Bitmap 直接创建图片。目前常见的网络图片库都自带这个功能。例如:可见下面 图-8

9.图像的绘制:图像的绘制通常是指用那些以 CG 开头的方法把图像绘制到画布中,然后从画布创建图片并显示这样一个过程。这个最常见的地方就是 [UIView drawRect:] 里面了。由于 CoreGraphic 方法通常都是线程安全的,所以图像的绘制可以很容易的放到后台线程进行。详情也可以见 图-8

10.图片的格式:把图片从PNG或JPEG等格式中解压出来,得到像素数据,,如果GPU不支持这种颜色格式,CPU需要进行格式转换,所以,图片要用GPU支持的图片数据格式。


图-8

GPU 资源消耗原因

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

1.纹理的渲染:所有的 Bitmap,包括图片、文本、栅格化的内容,最终都要由内存提交到显存,绑定为 GPU Texture。不论是提交到显存的过程,还是 GPU 调整和渲染 Texture 的过程,都要消耗不少 GPU 资源。当在较短时间显示大量图片时(比如 TableView 存在非常多的图片并且快速滑动时),CPU 占用率很低,GPU 占用非常高,界面仍然会掉帧。避免这种情况的方法只能是尽量减少在短时间内大量图片的显示,尽可能将多张图片合成为一张进行显示。

当图片过大,超过 GPU 的最大纹理尺寸时,图片需要先由 CPU 进行预处理,这对 CPU 和 GPU 都会带来额外的资源消耗。目前来说,iPhone 4S 以上机型,纹理尺寸上限都是 4096x4096,更详细的资料可以看这里:iosres.com。所以,尽量不要让图片和视图的大小超过这个值。

2.视图的混合 (Composing):当出现重叠的UIView或者CALayer的时候,GPU会去计算混合部分的像素,所以,尽可能少的设置alpha,尽可能多的设置背景颜色为纯色的背景。网上的人说要设置 opaque = true,但是我个人认为设置backgroundColor更为有效。

3.图形的生成:CALayer 的 border、圆角、阴影、遮罩(mask),CASharpLayer 的矢量图形显示,通常会触发离屏渲染(offscreen rendering),而离屏渲染通常发生在 GPU 中。当一个列表视图中出现大量圆角的 CALayer,并且快速滑动时,可以观察到 GPU 资源已经占满,而 CPU 资源消耗很少。这时界面仍然能正常滑动,但平均帧数会降到很低。为了避免这种情况,可以尝试开启 CALayer.shouldRasterize 属性,但这会把原本离屏渲染的操作转嫁到 CPU 上去。对于只需要圆角的某些场合,也可以用一张已经绘制好的圆角图片覆盖到原本视图上面来模拟相同的视觉效果。最彻底的解决办法,就是把需要显示的图形在后台线程绘制为图片,避免使用圆角、阴影、遮罩等属性。

离屏渲染

离屏渲染指的是GPU在当前屏幕缓存区以外新开辟一个缓冲区进行渲染操作。

我们现在看看正常的渲染管道:


正常的渲染管道

1.Command Buffer:OpenGL提交一个渲染指令给Command Buffer,然后进行GPU渲染。

2.Tiler:调用顶点着色器,把顶点数据进行分块(Tiling)

3.ParameterBuffer:接受分块完毕的tile和对应的渲染参数

4.Renderer:调用片元着色器,进行像素渲染

5.Render Buffer: 缓冲区,存储渲染完毕的像素

离屏渲染的渲染管道(Mask)

离屏渲染管道

1.在第一条渲染管道中,GPU创建了一个新的缓存区来存储相机纹理(Texture)的渲染结果。

2.在第二条渲染管道中,GPU创建了一个新的缓存区来存储蓝色的蒙版(layer)的渲染结果。

记住,前面的两个渲染结果并没有直接放到Render Buffer中,而是临时保存

3.在第三条渲染管道中,才把前面的两个渲染结果取出来,合并组合,放到Render Buffer中

由此可见,离屏渲染的消耗主要提现在两个方法:

1.创建新的缓存区

2.上下文的切换。先是从当前屏幕切换到离屏,等到离屏渲染结束以后,将离屏缓冲区的渲染结果显示到屏幕上又需要将上下文环境从离屏切换到当前屏幕。而上下文环境的切换是要付出很大代价的。

常见的离屏渲染操作有哪些?

1.shouldRasterize(光栅化):这是一个手动开启离屏渲染的操作,开启光栅化是将一个layer预先渲染成位图(bitmap),然后加入缓存中,当需要的时候再从缓存中拿出来,如果光栅化的元素在100ms内没有被使用就会被移除,所以,光栅化适用于静态内容的视图,也就是内部结构和内容不发生变化的视图,当视图的内容和结构一直在发生变化,就不应该开启光栅化,因为它会一直创建缓存。

2.masks(遮罩):单独设置cornerRadius或者masksToBounds = true,并不会引起离屏渲染,他们的合体才会引起离屏渲染。可以选择VVebo的做法,在要添加圆角的视图上再叠加一个部分透明的视图,只对圆角部分进行遮挡,遮挡的部分背景与周围背景相同。但最彻底的方法还是在后台线程中利用CoreGraphic来绘制图片。另外,这里说一下UILabel和UITextView设置圆角的方法,按照下面这么做不会产生离屏渲染。

label.layer.backgroundColor= aColor

label.layer.cornerRadius=5

3.shadows(阴影):可以通过指定阴影路径,避免离屏渲染。imgView.layer.shadowPath =UIBezierPath(rect: imgView.bounds).CGPath

4.EdgeAntialiasing(抗锯齿):这个功能貌似在 iOS 8 和 iOS 9 上并不会触发离屏渲染,对性能也没有什么影响,也许这个功能已经被优化了。

5.-(void)drawRect (CPU离屏渲染):如果我们重 写了drawRect方法,并且使用Core Graphics的技术进行了绘制操作,就涉及到了CPU渲染。但是我们应该尽量避免这种方法,因为如果使用这个方法不恰当的话会使内存暴涨,这个在内存恶鬼drawRect中做出了详细解释。总之,能避免重写drawRect方法就尽可能避免。

参考文献

如何让iOS 保持界面流畅

http://www.jianshu.com/p/748f9abafff8

https://www.objccn.io/issue-3-1/

WWDC2014

离屏渲染

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 161,513评论 4 369
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,312评论 1 305
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 111,124评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,529评论 0 217
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,937评论 3 295
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,913评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,084评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,816评论 0 205
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,593评论 1 249
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,788评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,267评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,601评论 3 261
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,265评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,158评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,953评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,066评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,852评论 2 277

推荐阅读更多精彩内容