iOS界面的绘制和渲染

界面的绘制和渲染

UIView是如何到显示的屏幕上的。

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

60fps是Apple给出的最佳帧率,但是实际中我们如果能保证帧率可以稳定到30fps就能保证不会有卡顿的现象,60fps更多用在游戏上。所以如果你的应用能够保证33.4ms绘制一次屏幕,基本上就不会卡了。

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

  • 每一个UIView都有一个layer,每一个layer都有个content,这个content指向的是一块缓存,叫做backing store。
  • UIView的绘制和渲染是两个过程,当UIView被绘制时,CPU执行drawRect,通过context将数据写入backing store。
  • 当backing store写完后,通过render server交给GPU去渲染,将backing store中的bitmap数据显示在屏幕上。

下图就是从CPU到GPU的过程

pic_5.jpeg

其实说到底CPU就是做绘制的操作把内容放到缓存里,GPU负责从缓存里读取数据然后渲染到屏幕上。

就如同下图的所示

pic_4.jpeg

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

因此,GPU的挑战有两个:

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

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

合成(Compositing):

Compositing是指将多个纹理拼到一起的过程,对应UIKit,是指处理多个view合到一起的情况(drawRect只有当addsubview情况下才会触发)

[self.view addsubview:subview]

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

尺寸(Size):

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

离屏渲染(Offscreen Rendering And Mask):

我们来看一下关于iOS中图形绘制框架的大致结构

pic_3.jpeg

UIKit是iOS中用来管理用户图形交互的框架,但是UIKit本身构建在CoreAnimation框架之上,CoreAnimation分成了两部分OpenGL ES和Core Graphics,OpenGL ES是直接调用底层的GPU进行渲染;Core Graphics是一个基于CPU的绘制引擎;

我们平时所说的硬件加速其实都是指OpenGL,Core Animation/UIKit基于GPU之上对计算机图形合成以及绘制的实现,由于CPU是渲染能力要低于GPU,所以当采用CPU绘制时动画时会有明显的卡顿。

但是其中的有些绘制会产生离屏渲染,额外增加GPU以及CPU的绘制渲染。

OpenGL中,GPU屏幕渲染有以下两种方式:

  • On-Screen Rendering即当前屏幕渲染,指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行。
  • Off-Screen Rendering即离屏渲染,指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。

离屏渲染的代价主要包括两方面内容:

  • 创建新的缓冲区
  • 上下文的切换,离屏渲染的整个过程,需要多次切换上下文环境:先是从当前屏幕(On-Screen)切换到离屏(Off-Screen);等到离屏渲染结束以后,将离屏缓冲区的渲染结果显示到屏幕上有需要将上下文环境从离屏切换到当前屏幕。而上下文环境的切换是要付出很大代价的。

为什么需要离屏渲染?

目的在于当使用圆角,阴影,遮罩的时候,图层属性的混合体被指定为在未预合成之前不能直接在屏幕中绘制,即当主屏的还没有绘制好的时候,所以就需要屏幕外渲染,最后当主屏已经绘制完成的时候,再将离屏的内容转移至主屏上。

离屏渲染的触发方式:

  • shouldRasterize(光栅化)
  • masks(遮罩)
  • shadows(阴影)
  • edge antialiasing(抗锯齿)
  • group opacity(不透明)

上述的一些属性设置都会产生离屏渲染的问题,大大降低GPU的渲染性能。

CPU渲染:

以上所说的都是离屏渲染发生在OpenGL SE也就是GPU中,但是CPU也会发生特殊的渲染,我们的CPU渲染,也就是我们使用Core Graphics的时候,但是要注意的一点的是只有在我们重写了drawRect方法,并且使用任何Core Graphics的技术进行了绘制操作,就涉及到了CPU渲染。整个渲染过程由CPU在App内 同步地 完成,渲染得到的bitmap最后再交由GPU用于显示。

理论上CPU渲染应该不算是标准意义上的离屏渲染,但是由于CPU自身做渲染的性能也不好,所以这种方式也是需要尽量避免的。

分析

所以对于当屏渲染,离屏渲染和CPU渲染的来说,当屏渲染永远是最好的选择,但是考虑到GPU的浮点运算能力要比CPU强,但是由于离屏渲染需要重新开辟缓冲区以及屏幕的上下文切换,所以在离屏渲染和CPU渲染的性能比较上需要根据实际情况作出选择。


总结

其实第一部分的实现当时并没有太多考虑性能上的一些问题,所以具体绘图性能方面的优化,我会在下次的文章中阐述,也是我们App中实际遇到的一些情况以及对应的解决方案。

时间: 2024-10-05 05:55:17

iOS界面的绘制和渲染的相关文章

iOS 界面上绘制不同字体 颜色 大小的字符串

NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:@"Using NSAttributed String"]; //颜色-范围 [str addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0,5)]; [str addAttribute:NSFor

iOS 截屏以及相关扩展(UIImage的绘制和渲染)

1.截取当前屏幕 CGSize windowSize = behandView.bounds.size; UIGraphicsBeginImageContextWithOptions(windowSize, YES, 2.0); CGContextRef context = UIGraphicsGetCurrentContext(); [behandView.window.layer renderInContext:context]; UIImage *snapshot = UIGraphics

《转之微信移动团队微信公众号》iOS 事件处理机制与图像渲染过程

致歉声明: Peter在开发公众号功能时触发了一个bug,导致群发错误.对此我们深表歉意,并果断开除了Peter.以下交回给正文时间: iOS 事件处理机制与图像渲染过程 iOS RunLoop都干了什么 iOS 为什么必须在主线程中操作UI 事件响应 CALayer CADisplayLink 和 NSTimer iOS 渲染过程 渲染时机 CPU 和 GPU渲染 Core Animation Facebook Pop介绍 AsyncDisplay介绍 参考文章 iOS RunLoop都干了什

iOS 事件处理机制与图像渲染过程

iOS 事件处理机制与图像渲染过程 iOS RunLoop都干了什么 iOS 为什么必须在主线程中操作UI 事件响应 CALayer CADisplayLink 和 NSTimer iOS 渲染过程 渲染时机 CPU 和 GPU渲染 Core Animation Facebook Pop介绍 AsyncDisplay介绍 参考文章 iOS RunLoop都干了什么 RunLoop是一个接收处理异步消息事件的循环,一个循环中:等待事件发生,然后将这个事件送到能处理它的地方. 如图1-1所示,描述了

iOS:界面适配--iPhone不同机型适配 6/6plus

iOS:界面适配--iPhone不同机型适配 6/6plus        机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等: ppi:代表屏幕物理大小到图片大小的比例值,如果ppi不变,则坐标和像素的比例不会变: iPhone 4以前 iPhone.iPhone3/3G机型未采用retina,坐标是320 x 480,屏幕像素320 x 480 ,他们一一对应,1:1关系.即一个坐标对应1个像素.

WWDC 2014 Session笔记 - iOS界面开发的大一统

本文是我的 WWDC 2014 笔记 中的一篇,涉及的 Session 有 What's New in Cocoa Touch Building Adaptive Apps with UIKit What's New in Interface Builder View Controller Advancements in iOS 8 A Look Inside Presentation Controllers iOS 8 和 OS X 10.10 中一个被强调了多次的主题就是大一统,Apple

多媒体编程——ios视频图像绘制工具类。

IOS上视频级的图像绘制 ios上的图像绘制常规的是 UIView的drawRect函数,但是这个函数是异步触发,并且由主线程执行.虽然可以通过一定技巧达到主动绘制的效果: 1.传递图像给UIView缓存着. 2.然后调用UIView的setNeedDisplay 改写重绘标志. (以上两步是讲图像丢给UIView,让它自己进行绘制,但是绘制的时机不可控,有时候我们需要它马上绘制,甚至有时候我们需要知道它什么时候绘制完成了,就需要下面两步) 3.在播放线程中调用UIView的 perfromOn

Reveal分析IOS界面,plist文件读取

Reveal分析IOS界面,需要得到app的 softwareVersionBundleId上传到iphone中 , 而IOS8的iTunesMetadata.plist 去Downloads里面查找很费劲 ,所以写了个辅助脚本,一次性全部读取出来 主要使用python,实现遍历文件夹获取文件列表,然后读取字段,输出成文件libReveal.plist格式 python读取plist文件的库 来自https://github.com/wooster/biplist/ 1 path = '/Use

iOS界面设计切图小结

iOS界面设计切图小结 APR 12TH, 2013 1.基本尺寸 (1)界面 实际设计时按: iPhone4.4s:640px*960px iPhone5: 640px*1136px iPad:1536px*2048px (2) 图标: 1024px*1024px 圆角180px 提交1024px*1024px 方角 png格式图片 2.图形部件及字体 (1) 为显示清晰 所有图形部件尺寸必须为偶数 样式中阴影.发光.描边的数值也必须为偶数 (2) 为方便用户点击 所有可点击的部件需大于88p