iOS——图像显示原理以及UI流畅性优化方案

图像显示原理

关于CPU和GPU都是由总线连接起来的，在CPU输出的往往是一个位图，上传给GPU。GPU拿到位图之后，会做一个图层的渲染，包括纹理的合成，最后会把结果放到帧缓冲区中， 由视图控制器根据VSync信号（帧同步信号,表示扫描1帧的开始，一帧也就是LCD显示的一个画面。）在指定时间之前，在帧缓冲区当中提取对应显示内容，最后展示到屏幕显示器上。

CPU和GPU分别干了哪些事

UIView的显示部分是由CALayer来负责的，CALayer里有一个contents属性，就是我们最终要绘制到屏幕上面的一个位图，比如要绘制一个UILabel，contents里就放的是里面文字的位图，然后系统就会在合适的时机回调给我们一个drawRect方法，然后我们可以在此基础之上，在上面绘制一些我们自己想绘制的内容。

绘制好的位图，会经由Core Animation这个框架，提交给GPU部分的OpenGL渲染管线，进行最后位图的渲染包括纹理的合成，然后会显示到屏幕上。

虚线左侧发生在CPU，虚线右侧在GPU。

CPU和GPU在具体的工作上都有哪些承担

1. 首先对于CPU来说，要完成UI的布局，包括显示或者说绘制，之后会做一些准备工作，最后会将位图提交到GPU上面。

   

• Layout：

  • UI布局
  • 文本计算

• Display：

  • 绘制（drawRect）

• Prepare：

  • 图片编解码

• Commit：

  • 提交位图

2. GPU渲染管线的过程：实际上这个过程指的就是OpenGL的渲染管线

   

   关于GPU渲染管线这五个步骤做完之后，就会把最终的像素点，提交到对应的帧缓冲区中。

UI卡顿和掉帧的原因

我们一般说页面滑动的流畅性是60fps，指的就是每一秒钟会有60帧的画面更新。相当于每隔16.7ms就要产生一帧的数据，那么在这16.6ms之内呢，就要CPU和GPU共同协作完成产生最终一帧的数据。

比如说CPU花费一帧的时间做文本的布局，UI计算包括一些视图的绘制、视频解码，最终把产生的位图提交给GPU，再由GPU进行图层的合成、纹理渲染，准备好下一帧的画面，在下一帧的VSync信号到来的时候就会显示这一帧的画面。

假如CPU在做刚才一系列工作的耗