图像显示及屏幕渲染

1、图像显示原理
2、UI卡顿、掉帧
3、异步绘制
4、离屏渲染

图像显示原理

图像的显示实际上要经过CPU的布局、计算，GPU的绘制渲染等操作才能显示到屏幕上。
CPU GPU 这两个硬件实际上是是由总线连接起来的， CPU 中输出的往往是一个位图（像素数组） 在经由总线上传给GPU， GPU在拿到这个位图时会做相应位图的渲染 纹理的合成， 然后把结果放入帧缓冲区中， 由视频控制器提取对应显示内容交给显示器显示。

图像显示原理.png CPU工作流程.png

• layout：UI布局frame，文本计算label的size计算等。
• display：绘制过程drawRect方法。
• prepare：图片解码。
• commit：提交位图。

GPU渲染管线.png

UI卡顿、掉帧

一般来说，页面滑动的流畅性是60FPS，代表着每秒钟有六十帧画面更新，也就是每一帧画面的生成时间在1/60秒即16.7ms以内就不会卡顿。在16.7毫秒内需要CPU和GPU共同来生成一帧的数据。如果时间超过了16.7ms就会产生卡顿。

UI 卡顿、掉帧.png

掉帧原因：
在 VSync 信号到来后，系统图形服务会通过 CADisplayLink 等机制通知 App，App 主线程开始在 CPU 中计算显示内容，比如视图的创建、布局计算、图片解码、文本绘制等。随后 CPU 会将计算好的位图提交到 GPU 去，由 GPU拿到位图后 进行变换、合成、渲染。随后 GPU 会把渲染结果提交到帧缓冲区去，等待下一次 VSync 信号到来时显示到屏幕上。由于垂直同步的机制，如果在一个 VSync 时间内，CPU 或者 GPU 没有完成内容提交，则那一帧就会被丢弃，等待下一次机会再显示，而这时显示屏会保留之前的内容不变。这就是界面卡顿的原因。

从上面的图中可以看到，CPU 和 GPU 不论哪个阻碍了显示流程，都会造成掉帧现象。所以开发时，也需要分别对 CPU 和 GPU 压力进行评估和优化。

滑动优化

CPU （放到子线程操作）
对象的创建、调整、销毁
预排版（布局计算、文本计算）
预渲染（文本等异步绘制，图片编解码等）

GPU
纹理渲染（避免离屏渲染，同时可以依托CPU的异步绘制 减轻 GPU的压力）
视图混合（减少视图层级）

UI 视图绘制原理及异步绘制

绘制流程.png

通过这个绘制流程图我们来看UIView的绘制过程：
当调用[UIView setNeedsDisplay]时，实际上并没有立马进行当前视图的绘制工作，而是在之后的某一时间才进行当前视图的实际绘制工作。
当调用[UIView setNeedsDisplay]之后，系统会立马调用layer的同名方法setNeedsDisplay，之后相当于在layer上打上一个脏标记，然后当当前的runloop将要结束时，调用[CALayer display]进行当前视图的真正绘制流程。
[CALayer display]内部会先判断这个layer的delegate是否会响应displayLayer：方法，如果不响应就会进入系统绘制流程中。如果能够响应，实际上是提供了异步绘制的入口，也就是给我们进行异步绘制留有余地。

• 系统绘制流程
  在drawRectangle:方法当中，可以通过上下文堆栈当中取出栈顶的context，拿到的就是当前控件或者视图的上下文或者backingStore，然后layer会判断它是否有delegate，如果没有的话，会调用drawInContext；如果有的话，会调用layer的代理方法drawLayer: inContext:，然后做当前视图的绘制工作，这一部分发生在系统内部，然后在一个合适的时机给我们一个回调方法，即[UIView drawRect:]方法，这个方法默认什么都不做，而是给我们开个口子，是允许在系统绘制的基础上再做一些其他的绘制操作。
  无论是哪种分支，之中都是由CALayer上传到对应backingStore到GPU，这里的backingStore可以理解为最终的位图，之后就结束了系统默认的绘制流程。

  
  系统绘制.png

• 异步绘制流程
  实际上就是基于系统开的口子，layer的delegate，如果遵从了displayLayer方法，或者说实现了这个方法的话，我们就可以进入到异步绘制的流程当中，在异步绘制当中就需要代理去负责生成对应的bitmap，同时需要我们把位图作为layer的content属性提交到layer的content属性当中。

通过实现layer的代理方法displayLayer
- 代理负责生成对应的bitmap
- 设置该bitmap作为layer.contents属性的值

异步绘制.png

左侧是一个主队列，右侧是一个全局并发队列，假如在某一时机调用了setNeedsDisplay，在当前runloop将要结束的时候会由系统调用视图所对应layer的display方法，然后如果代理实现了displayLayer函数的时候，会调用代理的displayerLayer函数方法，然后会通过子线程的切换，在子线程当中去做位图的绘制，此时主线程可以做一些其他的工作。
在全局并发队列子线程当中所做的工作主要有这么几个步骤，第一个是通过CGBitmapContextCreate() 来创建位图的上下文，然后通过CoreGraphic的相关API做当前UI的一些绘制工作，之后我们再通过CoreGraphic的相关函数CGBitmapContextCreateImage来根据当前所绘制的上下文生成一张CGImage图片，再回到主队列当中，提交这个位图，设置给 CALayer 的content属性，这样的话就完成了一个UI控件的异步绘制过程。

离屏渲染

什么是离屏渲染？你对离屏渲染是怎么理解的？

• On-Screen Rendering
  意为当前屏幕渲染，指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行
• Off-Screen Rendering
  意为离屏渲染，指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作

用一个比较通俗的语言解释离屏渲染：也就是当我们设置某一些UI视图的图层属性，如果说指定成在被未预合成之前，不能用于直接被显示的时候，那么就触发了离屏渲染。典型的比如我们设置视图的圆角属性，包括一些蒙层遮罩。

什么场景下会触发离屏渲染？

• 圆角（和maskToBounds一起使用时）

• 图层蒙版

• 阴影

• 光栅化

• • 为何要避免离屏渲染？
    CPU和GPU在进行具体的视图绘制渲染的过程中做了大量的工作。而离屏渲染是发生在GPU层面的，由于离屏渲染使GPU层面上触发了OpenGL的多通道渲染管线，产生了额外的开销，所以需要避免离屏渲染。

在触发离屏渲染时会增加GPU的工作量，而增加GPU的工作量很有可能导致CPU和GPU工作耗时超出16.7ms，可能导致UI的卡顿和掉帧，所以需要避免离屏渲染。

• 创建新的渲染缓冲区
• 上下文切换