界面的绘制和渲染

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渲染的性能比较上需要根据实际情况作出选择。

UIView和CALayer

关于UIView和CALayer的关系这里大致讲主要的几点:

  • 每个UIView都包含一个CALayer在背后提供内容的绘制和显示(一个layer可能包含多个子layer),并且UIView的bound,frame都由内部的Layer所提供。两者都有树状层级结构,layer内部有SubLayers,View内部有SubViews.但是Layer比View多了个AnchorPoint,AnchorPoint相比Postion的区别在于position点是相对suerLayer的,anchorPoint点是相对layer的,两者都是中心点的位置,只是相对参照物不同罢了。

  • 在View显示的时候,UIView做为Layer的CALayerDelegate,View的显示内容由内部的CALayer的display。

  • View可以接受并处理事件,而Layer不可以,因为UIKit使用UIResponder作为响应对象。

  • layer内部维护着三分layer tree,分别是presentLayer Tree(动画树),modeLayer Tree(模型树), Render Tree(渲染树),在做 iOS动画的时候,我们修改动画的属性,在动画的其实是Layer的presentLayer的属性值,而最终展示在界面上的其实是提供View的modelLayer。

http://www.cocoachina.com/ios/20160929/17673.html

理解UIView的绘制相关推荐

  1. ComplexHeatmap |理解绘图逻辑绘制热图

    作者:严涛 浙江大学作物遗传育种在读研究生(生物信息学方向)伪码农,R语言爱好者,爱开源. 之前热图三部曲介绍了使用ggplot2和pheatmp绘制热图 R语言学习 - 热图绘制 (heatmap) ...

  2. android自定义view流程,Android 自定义View--从源码理解View的绘制流程

    前言 在Android的世界里,View扮演着很重要的角色,它是Android世界在视觉上的具体呈现.Android系统本身也提供了很多种原生控件供我们使用,然而在日常的开发中我们很多时候需要去实现一 ...

  3. 理解GL_TRIANGLE_STRIP等绘制三角形序列的三种方式

    GL_TRIANGLE_STRIP绘制三角形方式很多时候令人疑惑,在这里对其运作机理进行解释. 一般情况下有三种绘制一系列三角形的方式,分别是GL_TRIANGLES.GL_TRIANGLE_STRI ...

  4. 【OpenGL】理解GL_TRIANGLE_STRIP等绘制三角形序列的三种方式

    GL_TRIANGLE_STRIP绘制三角形方式很多时候令人疑惑,在这里对其运作机理进行解释. 一般情况下有三种绘制一系列三角形的方式,分别是GL_TRIANGLES.GL_TRIANGLE_STRI ...

  5. iOS UIView异步绘制实现圆角的方案

    前言 关于离屏渲染.圆角卡顿,网络上已经有大量理论性的文章.如果有兴趣推荐看YYKit作者的相关文章. 包括我在内,大部分人看了理论文章后,可能还是一知半解.想要看具体实现,能找到的都是YYKit.A ...

  6. 深入理解 RecyclerView 的绘制流程和滑动原理,直面春招

    归纳分发布局的三个步骤: dispatchLayoutStep1():  表示进行预布局,适配器更新.动画运行.保存当前视图的信息等工作: dispatchLayoutStep2():  表示对最终状 ...

  7. android surface原理,Android 谈谈我理解的Surface绘制原理

    源码:8.x系统 我们知道ViewRootImpl是处理绘制流程的地方,具体分析如下: ViewRootImpl.java private void performTraversals() { ··· ...

  8. 分类算法如何绘制roc曲线_机器学习性能指标之ROC和AUC理解与曲线绘制

    一. ROC曲线 1.roc曲线:接收者操作特征(receiveroperating characteristic),roc曲线上每个点反映着对同一信号刺激的感受性. 横轴:负正类率(false po ...

  9. 使用 ASDK 性能调优 - 提升 iOS 界面的渲染性能

    这一系列的文章会从几个方面对 ASDK 在性能调优方面策略的实现进行分析,帮助读者理解 ASDK 如何做到使复杂的 UI 界面达到 60 FPS 的刷新频率的:本篇文章会从视图的渲染层面讲解 ASDK ...

最新文章

  1. android 蓝牙找不到电脑,Android6.0 蓝牙搜索不到设备原因
  2. 在微服务架构下基于 Prometheus 构建一体化监控平台的最佳实践
  3. 汇总|实时性语义分割算法
  4. 美国在人工智能领域亟待解决的5大难题
  5. WEB中get请求和post请求的区别
  6. C++ vector中的resize,reserve,size和capacity函数讲解
  7. 【Java】java.util.Objects 工具类方法研究
  8. CSS3(七) 前端预处理技术(Less、Sass、CoffeeScript)
  9. 即时通讯学习笔记007---在windows下安装openfire_并且使用自定义的数据库这里用mysql
  10. 高并发热点/单点数据_性能问题解决方案
  11. 如何做一份能忽悠投资人的PPT
  12. LayaBox1.7.16 TiledMap 销毁的问题,TiledMap销毁后屏幕变灰,不能显示
  13. matlab 倒位序fft程序,[转载]MATLAB的一个FFT程序
  14. 地面控制点的作用_地下室人防预留预埋施工要点及控制点
  15. 位置式与增量式PID代码(C语言实现)
  16. opengl绘制立方体
  17. 计算机毕业设计android的消防安全知识宣传app(源码+系统+mysql数据库+Lw文档)
  18. ajax的get json数据格式,jQuery / 用getJSON()方法加载JSON格式数据 - 汇智网
  19. 7-20 打印九九口诀表 (15分) 下面是一个完整的下三角九九口诀表: 1*1=1 1*2=2 2*2=4 1*3=3 2*3=6 3*3=9 1*4=4 2*4
  20. 暨南大学计算机科学研究生,计算机科学系硕士研究生在IEEE Virtual Reality (VR) 2020上发表两篇论文...

热门文章

  1. 暴雪还不赶快?劳拉与光之守护者PC平台登陆
  2. prim算法求最小生成树_克鲁斯卡尔算法(Kruskal算法)求最小生成树
  3. 正则 至少是数字加英文字符_正则表达式-入门
  4. 面经(一)——5G和物联网的关系
  5. vb excel遍历列_EXCEL如何把多个表格合并成一个表格
  6. js打印到控制台_8个问题看你是否真的懂 JS
  7. 机器人学习--路径规划--A*算法实现
  8. 人工智能学习--知识图谱的关键技术及其智能应用
  9. 计算机视觉招聘_香港理工大学人工智能设计实验室科研招聘
  10. 生产过程中计算机软件的确认--简述医疗器械生产过程确认