UI图像显示原理

图像显示原理图

CPU，GPU两个硬件都是通过总线连接起来的，在CPU当中输出的结果往往是一个位图，再经由总线在合适的时机传输给GPU，然后GPU会把位图进行图层的渲染，包括纹理的合成，之后把结果放到Frame Buffer，由视频控制器根据vsync信号，在指定时间之前去提取Frame Buffer中对应屏幕显示内容，最终显示到手机屏幕上。

具体示例图

首先我们创建一个UIView控件，显示部分由CALayer负责，CALayer中有一个contents属性，就是我们最终绘制到屏幕上的一个位图，比如hello word这个label，contents里就是一个hello word文字的位图。

然后系统会在合适的时机回调drawRect方法，我们可以在此之上绘制一些自定义内容。绘制好的内容由CoreAnimation这个框架交给OpenGL渲染管线，进行最终的绘图渲染和纹理合成，然后显示到屏幕上。

CPU工作图

CPU的工作有如图四个：

Layout：进行UI布局，文本计算。对应到我们平时编写的代码中，实际上就是每一个控件的frame的计算，和文本size的计算。

Display：绘制。比如drawRect方法。

Prepare：图片解码。比如UIImageView设置Image时，图片不能直接显示到屏幕上，需要对图片进行解码。

Commit：最后由CoreAnimation提交位图。

GPU渲染管线图