UI渲染及显示原理

一、iOS页面UI渲染其实是由CPU和GPU同时协作完成的。

CPU工作是进行UI计算，文本处理，图片转码等操作；GPU接着做下面的工作渲染管线用OPENGL渲染到当前页面视图上；在iOS设备时钟周期内完成计算和渲染。

iOS设备的硬件时钟周期是每秒60，即要求开发中每一帧的UI绘制不超过1s/60，一旦超过这个时间，即UI绘制显示延迟，滑动页面时就会给我们卡顿的感觉。

了解了上面的概念，我们应该能想到一些针对开发中遇到的卡顿优化措施

基于CPU的优化，把如下耗时操作在子线程中进行，避免在主线程中造成滚动中UI渲染CPU的延迟：

布局计算，高度缓存，文字计算，图片的解码，文本的预绘制，对象的创建、修改，销毁等。

基于GPU的优化，尽量少用离屏渲染，尽量少对view设置透明度操作，尽量减少view层次结构，尽量少用图层混合，是否图片大小不合适等方面

二、顺便查了下屏幕渲染，分为三种

1、离屏渲染（Off-Screen Rendering）：就是GPU在当前屏幕以外开辟一个另外的缓冲区进行渲染操作。

2、当前屏幕渲染（On-Screen Rendering）：指的是GPU是在当前显示的屏幕缓冲区进行的渲染操作。

3、CPU的离屏渲染：即非GPU渲染，如果重写了drawReact，并且使用Core Graphics技术进行了绘制操作，就涉及到了这个技术，整个过程由CPU在APP中同步完成，渲染得到bitmap后再交给GPU进行渲染显示。

为什么离屏渲染会耗性能？当使用遮罩，圆角，阴影的时候，图层属性的混合体被指定为在预合成之前是不能直接在屏幕中进行绘制的，所以就需要屏幕外渲染被唤起，就意味着图层在显示之前必须在一个屏幕外的上下文中被渲染，而这个屏幕外渲染缓冲区上下文和当前屏幕渲染缓冲区上下文之间的切换非常耗性能。

离屏渲染可以在Instruments的Core Animation工具中有几个和离屏渲染相关的检查选项：

  ·   Color Offscreen-Rendered Yellow

开启后会把那些需要离屏渲染的图层高亮成黄色，这就意味着黄色图层可能存在性能问题。

  ·   Color Hits Green and Misses Red

三、渲染抉择

能用当前屏幕渲染就用当前屏幕渲染，不得已使用离屏渲染的时候，需要明白CPU的浮点运算能力是不如GPU的，但是如果是比较简单的效果实现，CPU离屏渲染确是比较好的选择，毕竟屏幕缓冲区的上下文切换是非常耗性能的。