iOS界面的绘制和渲染

Posted 2020-08-13

界面的绘制和渲染

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中实际遇到的一些情况以及对应的解决方案。