前言

我们平常iOS开发中，很少有机会能够深入的了解绘制和渲染详细的底层过程，在UI显示方面，我们大多时候都只知其然而不知其所以然，然后在遇到一些UI方面的性能问题，内存问题，这部分知识就尤其重要了，我们今天就来探究一下iOS绘制渲染的整个过程。

相关框架

框架结构

这张截图是苹果官方文档中，关于视觉相关的一个框架结构图。

UIKit

我们可以看到，最上层的框架就是我们平时开发最常用到的UIKit（Mac开发是AppKit）UIkit为我们封装了大量的视图，窗口，视图结构等丰富的UI元素，以及事件处理结构，文本图像支持等等，我们可以直接使用UIKit来完成我们平时开发中绝大多数视图的相关实现，非常简单方便。

CoreAnimation（QuartzCore）

在接下来的底层基础设施中，最上层的框架为CoreAnimation，提到CoreAnimation，我们可能会想到它是动画相关功能的库，这其实是对它非常大的一个误解，实际上，动画功能只是CoreAnimation的一部分，它的原名叫做LayerKit，这样一说，你就能知道，它正真的核心是什么了吧，CoreAnimation组合了不同的可视视图，形成一个个独立的图层，存储在图层树中，而UIKit的UIView视觉显示上完全依赖这个图层，UIView封装了CALayer并添加了一些CALayer并不具备的功能，例如交互事件等。

CoreGraphics

CoreGraphics是底层绘图框架，我们平时可以直接调用它的API做一些自定义视图，它使用了Quartz2D引擎，calyer是CoreGraphics封装出来的图层类，calayer知道如何利用CoreGraphics绘制自己。

Metal

Metal是苹果最新推出的底层渲染编程接口，是针对iphone和ipad中的GPU高度优化的编程框架，是iOS平台中最接近底层硬件的图形框架。

视图和动画渲染过程

渲染过程我们可以分成6个阶段：

APP内部4个阶段：

1. 布局：为图层准备层级关系，位置，颜色等等。

2. 创建BackingStore Image（寄宿图片）： 这个阶段如果需要的话，创建layer的backing image，可能是通过layer的Contents传入的，也可能是drawRect、drawLayer:inContext:方法画出来的。

3. 准备以及解压：这个阶段，Core Animation框架准备各种渲染需要的数据，解压需要显示的图片。

4. 提交：这个阶段Core Animation打包layer的所有信息，以及动画参数，通过IPC(进程内通讯)传递给Render Server。（此步骤递归，如果layerTree比较复杂，则开销较大）。

APP外部2个阶段：

到达render Server后会转化为render Tree，进行下面的步骤：

5. 渲染前准备和计算：所有layer的属性，如果是动画，计算中间值，准备渲染。

6. 渲染：渲染到屏幕上。

这6个阶段中，前5个都是由CPU处理的，最后一个阶段才由GPU处理；我们能控制的只有前面两个阶段，剩下的工作由系统框架帮我们处理；如果是动画，最后两个步骤会一直重复，知道动画结束。

我们知道iOS设备的屏幕刷新率是60fps，如果没有在1/60s内结束这6个步骤就会掉帧视觉感受就是在卡。如下图：

掉帧原理

所以，我们在动画性能调优方面的策略就是让CPU和GPU都可以在这1/60秒内做完他们应该做的事情，如果有卡顿，我们便要找出来是CPU负担太重，还是GPU负担太重，找到原因后相应的给他们减负。

绘制渲染相关优化

耗费CPU的性能的项目

布局计算：当视图层级复杂，frame变化，需要复杂计算，会加重CPU的计算负担。例如：动态计算tableviewCell的高度，使用autolayout也会非常耗费计算CPU的性能。
图片的解压和转换：渲染前会解压压缩的图片，而且如果图片颜色格式不是32位的，那么CPU会进行颜色格式转换，所以，我们最好直接提供32位颜色格式的图片。
绘制需求：直接使用CaLayer进行绘制的话，当我们重写UIView的drawRect方法，或者是drawLayer方法，那么系统会创建layer的寄宿图，这种方式绘制会使得内存暴增。尽量避免，建议使用CAShapeLayer进行绘制，CAShapeLayer使用了硬件加速，渲染速度更快，内存使用非常稳定，不会被图层边界切割，也不会像素化。
隐藏的绘制：UILable的文字都是画到寄宿图片上的，如果改变frame，会重新绘制。
多层级视图：如果一个layer被另一个layer完全遮盖，GPU不会渲染被遮盖的视图，但是计算是否完全被遮盖，很消耗CPU资源

耗费GPU的性能的项目

图层混合overdraw：一个像素点被多次使用颜色填充，如果太多的话，肯定会影响GPU性能。如果一个视图是不透明的我们应该设置opaque为yes，主动告诉GPU。
离屏渲染Off-Screen Rendering：某些属性的设置，会出发离屏渲染，而离屏渲染会让GPU在当前屏幕缓冲区以外再开拓一个新的缓冲区，进行渲染操作，创建完新的缓冲区会进行上下文切换，切到新缓冲区，渲染完再切回来，把新缓冲区的结果带回来显示，这一切操作，都比较耗费GPU的资源。

关于优化的问题，我们日后再详细分析。