理解UIView的绘制-孙亚洲

前言

最近研究OpenGL ES相关和 GPU 相关 发现这篇文章很具有参考的入门价值.

理解 UIView 的绘制, UIView 是如何显示到 Screen 上的?

首先要从Runloop开始说,iOS 的MainRunloop 是一个60fps 的回调,也就是说16.7ms(毫秒)会绘制一次屏幕,这个时间段内要完成:

  • view的缓冲区创建
  • view内容的绘制(如果重写了 drawRect)

这些 CPU的工作.

然后将这个缓冲区交给GPU渲染, 这个过程又包含:

  • 多个view的拼接(compositing)
  • 纹理的渲染(Texture)等.

最终现实在屏幕上.因此,如果在16.7ms 内完不成这些操作, eg: CPU做了太多的工作, 或者view层次过于多,图片过于大,导致GPU压力太大,就会导致”卡”的现象,也就是 丢帧,掉帧.

苹果官方给出的最佳帧率是:60fps(60Hz),也就是一帧不丢, 当然这是理想中的绝佳体验.

这个60fps该怎么理解呢?

一般来说如果帧率达到 25+fps(fps >= 25帧以上,不是25加别看错),人眼就基本感觉不到卡顿了,因此,如果你能让你的 iOS 程序稳定保持在30fps已经很不错了, 注释,是”稳定”在30fps,而不是, 10fps,40fps,20fps这样的跳动,如果帧频不稳就会有卡的感觉,60fps真的很难达到, 尤其是在 iPhone 4/4s等 32bit 位机上,不过现在苹果已经全面放弃32位,支持最低64位会好很多.

总的来说, UIView从绘制到Render的过程有如下几步:

  • 每一个UIView都有一个layer
  • 每一个layer都有个content,这个content指向的是一块缓存,叫做backing store.

UIView的绘制和渲染是两个过程:

  • UIView被绘制时,CPU执行drawRect,通过context将数据写入backing store
  • backing store写完后,通过render server交给GPU去渲染,将backing store中的bitmap数据显示在屏幕上.

上面提到的从CPUGPU的过程可用下图表示:

下面具体来讨论下这个过程

  • CPU bound:

假设我们创建一个 UILabel


UILabel* label = [[UILabel alloc]initWithFrame:CGRectMake(10, 50, 300, 14)];

label.backgroundColor = [UIColor whiteColor];

label.font = [UIFont systemFontOfSize:14.0f];

label.text = @"test";

[self.view addSubview:label];

这个时候不会发生任何操作, 由于 UILabel 重写了drawRect方法,因此,这个 View会被 marked as "dirty":

类似这个样子:

然后一个新的Runloop到来,上面说道在这个Runloop中需要将界面渲染上去,对于UIKit的渲染,Apple用的是它的Core Animation
做法是在Runloop开始的时候调用:


[CATransaction begin]

Runloop结束的时候调用

[CATransaction commit]

begincommit之间做的事情是将view增加到view hierarchy中,这个时候也不会发生任何绘制的操作。
[CATransaction commit]执行完后,CPU开始绘制这个view:

首先CPU会为layer分配一块内存用来绘制bitmap,叫做backing store
创建指向这块bitmap缓冲区的指针,叫做CGContextRef
通过Core Graphicapi,也叫Quartz2D,绘制bitmap
layercontent指向生成的bitmap
清空dirty flag标记
这样CPU的绘制基本上就完成了.
通过time profiler可以完整的看到个过程:

Running Time Self Symbol Name

2.0ms 1.2% 0.0 +[CATransaction flush]

2.0ms 1.2% 0.0 CA::Transaction::commit()

2.0ms 1.2% 0.0 CA::Context::commit_transaction(CA::Transaction*)

1.0ms 0.6% 0.0 CA::Layer::layout_and_display_if_needed(CA::Transaction*)

1.0ms 0.6% 0.0 CA::Layer::display_if_needed(CA::Transaction*)

1.0ms 0.6% 0.0 -[CALayer display]

1.0ms 0.6% 0.0 CA::Layer::display()

1.0ms 0.6% 0.0 -[CALayer _display]

1.0ms 0.6% 0.0 CA::Layer::display_()

1.0ms 0.6% 0.0 CABackingStoreUpdate_

1.0ms 0.6% 0.0 backing_callback(CGContext*, void*)

1.0ms 0.6% 0.0 -[CALayer drawInContext:]

1.0ms 0.6% 0.0 -[UIView(CALayerDelegate) drawLayer:inContext:]

1.0ms 0.6% 0.0 -[UILabel drawRect:]

1.0ms 0.6% 0.0 -[UILabel drawTextInRect:]

假如某个时刻修改了labeltext:


label.text = @"hello world";

由于内容变了,layercontentbitmap的尺寸也要变化,因此这个时候当新的Runloop到来时,CPU要为layer重新创建一个backing store,重新绘制bitmap.
CPU这一块最耗时的地方往往在Core Graphic的绘制上,关于Core Graphic的性能优化是另一个话题了,又会牵扯到很多东西,就不在这里讨论了.

GPU bound:

CPU完成了它的任务:将view变成了bitmap,然后就是GPU的工作了,GPU处理的单位是Texture.
基本上我们控制GPU都是通过OpenGL来完成的,但是从bitmapTexture之间需要一座桥梁,Core Animation正好充当了这个角色:
Core AnimationOpenGLapi有一层封装,当我们要渲染的layer已经有了bitmap content的时候,这个content一般来说是一个CGImageRefCoreAnimation会创建一个OpenGLTexture并将CGImageRef(bitmap)和这个Texture绑定,通过TextureID来标识。
这个对应关系建立起来之后,剩下的任务就是GPU如何将Texture渲染到屏幕上了。
GPU大致的工作模式如下:

整个过程也就是一件事:

CPU将准备好的bitmap放到RAM里,GPU去搬这快内存到VRAM中处理。
而这个过程GPU所能承受的极限大概在16.7ms完成一帧的处理,所以最开始提到的60fps其实就是GPU能处理的最高频率.
因此,GPU的挑战有两个:

  • 将数据从RAM搬到VRAM
  • Texture渲染到屏幕上

这两个中瓶颈基本在第二点上。渲染Texture基本要处理这么几个问题:

  • Compositing:

Compositing是指将多个纹理拼到一起的过程,对应UIKit,是指处理多个view合到一起的情况,如:


[self.view addsubview : subview]。

如果view之间没有叠加,那么GPU只需要做普通渲染即可.
如果多个view之间有叠加部分,GPU需要做blending.

加入两个view大小相同,一个叠加在另一个上面,那么计算公式如下:

R = S+D*(1-Sa)

R: 为最终的像素值
S: 代表 上面的Texture(Top Texture)
D: 代表下面的Texture(lower Texture)

其中S,D都已经pre-multiplied各自的alpha值。
Sa代表Texturealpha值。

假如Top Texture(上层view)的alpha值为1,即不透明。那么它会遮住下层的Texture.
即,R = S。是合理的。

假如Top Texture(上层view)的alpha值为0.5
S(1,0,0),乘以alpha后为(0.5,0,0)
D(0,0,1)
得到的R(0.5,0,0.5)

基本上每个像素点都需要这么计算一次。

因此,view的层级很复杂,或者view都是半透明的(alpha值不为1)都会带来GPU额外的计算工作。

  • Size

这个问题,主要是处理image带来的,假如内存里有一张400x400的图片,要放到100x100imageview里,如果不做任何处理,直接丢进去,问题就大了,这意味着,GPU需要对大图进行缩放到小的区域显示,需要做像素点的sampling,这种smapling的代价很高,又需要兼顾pixel alignment。 计算量会飙升。

  • Offscreen Rendering And Mask

如果我们对layer做这样的操作:


label.layer.cornerRadius = 5.0f;

label.layer.masksToBounds = YES;

会产生offscreen rendering,它带来的最大的问题是,当渲染这样的layer的时候,需要额外开辟内存,绘制好radius,mask,然后再将绘制好的bitmap重新赋值给layer
因此继续性能的考虑,Quartz提供了优化的api


label.layer.cornerRadius = 5.0f;

label.layer.masksToBounds = YES;

label.layer.shouldRasterize = YES;

label.layer.rasterizationScale = label.layer.contentsScale;

简单的说,这是一种cache机制。
同样GPU的性能也可以通过instrument去衡量:

红色代表GPU需要做额外的工作来渲染View,绿色代表GPU无需做额外的工作来处理bitmap

全文完

https://www.sunyazhou.com/2017/10/16/20171016UIView-Rendering/

原文地址:https://www.cnblogs.com/feng9exe/p/8848684.html

时间: 2024-10-19 03:54:12

理解UIView的绘制-孙亚洲的相关文章

理解UIView的绘制

界面的绘制和渲染 UIView是如何到显示的屏幕上的. 这件事要从RunLoop开始,RunLoop是一个60fps的回调,也就是说每16.7ms绘制一次屏幕,也就是我们需要在这个时间内完成view的缓冲区创建,view内容的绘制这些是CPU的工作:然后把缓冲区交给GPU渲染,这里包括了多个View的拼接(Compositing),纹理的渲染(Texture)等等,最后Display到屏幕上.但是如果你在16.7ms内做的事情太多,导致CPU,GPU无法在指定时间内完成指定的工作,那么就会出现卡

加深理解UIView,UIResponder,UIController

转载出处:http://www.th7.cn/Program/IOS/201503/406514.shtml 原文地址==>自定义控件:http://objccn.io/issue-3-4/ 读完这篇文章后 觉得自己对UIView UIResponder 和UIController的理解瞬间增加了一个层次,记下笔记,留给我这忘事精随时查看 视图层次概览 如果你观察一下 UIView 的子类,可以发现 3 个基类: reponders (响应者),views (视图)和 controls (控件)

iOS----自定义UIView,绘制一个UIView

绘制一个UIVIew最灵活的方式就是由它自己完成绘制.实际上你不是绘制一个UIView,你只是子类化了UIView并赋予子类绘制自己的能力.当一个UIVIew需要执行绘图操作的时,drawRect:方法就会被调用.覆盖此方法让你获得绘图操作的机会.当drawRect:方法被调用,当前图形上下文也被设置为属于视图的图形上下文.你可以使用Core Graphics或UIKit提供的方法将图形画到该上下文中. 你不应该手动调用drawRect:方法!如果你想调用drawRect:方法更新视图,只需发送

UIView的理解 [转]

[转载] 原文地址 :http://blog.csdn.net/itianyi/article/details/8982518 UIView是开发中使用得最多的控件了,深入的理解很有必要. UIView是组成画面的基本元素, NS_CLASS_AVAILABLE_IOS(2_0)@interface UIView :UIResponder<NSCoding,UIAppearance, UIAppearanceContainer> { @package CALayer        *_laye

UIView你知道多少

转载自:http://www.cnblogs.com/likwo/archive/2011/06/18/2084192.html 曾经有人这么说过,在iphone里你看到的,摸到的,都是UIView,所以UIView在iphone开发里具有非常重要的作用.那么UIView我们到底知道多少呢.请看看下面的问题, 如果这些你都知道,那么本文章的内容就请绕道,如果你还不太清楚,我想看了下面的内容,你就明白了. 1.bounds和frame分别表示什么? 2.ContentMode里UIViewCont

UIView的一些基本方法 init、loadView、viewDidLoad、viewDidUnload、dealloc

init方法 在init方法中实例化必要的对象(遵从LazyLoad思想) ‍init方法中初始化ViewController本身 loadView方法 当view需要被展示而它却是nil时,viewController会调用该方法.不要直接调用该方法. 如果手工维护views,必须重载重写该方法 如果使用IB维护views,必须不能重载重写该方法 loadView和IB构建view viewDidLoad方法 重载重写该方法以进一步定制view 在iPhone OS 3.0及之后的版本中,还应

关于UIView(转)

曾经有人这么说过,在iphone里你看到的,摸到的,都是UIView,所以UIView在iphone开发里具有非常重要的作用.那么UIView我们到底知道多少呢.请看看下面的问题, 如果这些你都知道,那么本文章的内容就请绕道,如果你还不太清楚,我想看了下面的内容,你就明白了. 1.bounds和frame分别表示什么? 2.ContentMode里UIViewContentModeScaleToFill代表什么? 3.contentStretch 里的指定UIView里缩放区域是如何计算的? 4

UIView 的粗浅解析

The UIView class defines a rectangular area on the screen and the interfaces for managing the content in that area. At runtime, a view object handles the rendering of any content in its area and also handles any interactions with that content. The UI

自定义控件:绘制圆环的实现过程

使用自定义控件绘制一个圆环,需要重现的方法是OnDraw()实现对view 的绘制,从而输出符合自己需求的view 控件观察圆环的组成部分:外层圆+中间百分比文字+不断变化进度的弧形圈--->分析:每一个组成部分需要的属性,构成几个关键的自定义属性1:外层圆的颜色2:弧形进度圈的颜色3:中间百分比文字的颜色4:中间百分比文字的大小5:圆环的宽度(作为进度弧形圈的宽度)6:*首页当中也有一个圆环进度,为了兼容使用首页的圆环进度,增加一个自定义属性,绘制进度弧形圈的风格(实心[Fill],空心[St