iOS图像显示原理和卡顿优化

图像显示原理

图像显示原理.png

CPU和GPU通过总线连接，CPU中计算出的往往是bitmap位图，通过总线由合适的时机传递给GPU，GPU拿到位图后，渲染到帧缓存区FrameBuffer,然后由视频控制器根据vsync信号在指定时间之前去帧缓冲区提取内容，显示到屏幕上。

CPU和GPU分工.png

• CPU所有工作：

  
  
  

  CPU所有工作.png
  
  

  1.Layout：UI布局，文本计算（size）
  2.Display：绘制过程，比如drawRect
  3.Prepare：图片编解码
  4.Commit：提交位图到GPU总线

• GPU所有工作：

GPU所有工作.png

---

---

UI卡顿、掉帧原因

屏幕快照 2018-05-04 17.40.25.png

在规定的16.7ms内，在下一个VSync信号到来之前，CPU和GPU并没有共同完成下一帧视频的合成，就会出现掉帧、卡顿。

滑动优化方案思路：

• CPU：
  1.对象的创建、调整、销毁可以放在子线程中去做ASDK；
  2.预排班。布局计算、文本计算等事先放到子线程中去做；
  3.使用轻量级对象，比如CALayer代替UIView
  4.预渲染。文本等异步绘制，图片编解码等。
  5.控制并发线程数量
  6.减少重复计算布局，减少修改frame等
  7.autolayout比frame更消耗资源
  8.可以让图片的size跟frame一致

• GPU：
  1.纹理渲染。避免离屏渲染
  2.视图混合。减少视图层级的复杂性，减少透明视图；不透明的opaque设置为YES
  3.GPU能处理的最大纹理是4096 * 4096，一旦超过这个尺寸就会调用CPU进行资源处理，所以纹理尽量不要超过这个尺寸

---

---

UIView的绘制原理

UIView的绘制原理.png

当我们调用UIView的setNeedsDisplay的方法时候，会调用layer的同名方法，相当于在当前layer打上绘制标记，在当前runloop将要
结束的时候，才会调用CALayer的display方法进入到真正的绘制当中。

CALayer的display方法中，首先会判断layer的delegate方法displayLayer：是否实现，如果代理没有响应这个方法，则进入到系统绘制流程；如果代理响应了这个方法，则进入到异步绘制流程 :

1. 系统绘制流程

系统绘制流程.png

在CALayer内部，系统会创建一个backingStore（可以理解为CGContextRef，drawRect中取到的currentRef就是这个东西），然后layer回判断是否有delegate，如果没有代理，就调用CALayer的 drawInContext：方法；如果有代理，则调用layer代理的 drawLayer:inContext:方法，这一步发生在系统内部，然后在合适的时间给与我们回调一个熟悉的UIView的 drawRect：方法。也就是在系统内部的绘制之上，允许我们再做一些额外的绘制。最后CALayer把backting store（位图）传给GPU。

2. 异步绘制流程

屏幕快照 2018-05-04 18.19.39.png

layer的delegate如果实现了displayLayer：方法，就会进入到异步绘制的流程。在异步绘制的过程中，需要代理来生成对应的bitmap位图文件，并把此bitmap作为layer的contents属性

屏幕快照 2018-05-04 18.24.14.png

如果用户调用了setNeedsDisplay方法后，在当前runloop将要结束的时候，会由系统调用对应layer的display 方法。如果此layer的代理实现了displayLayer：方法，则会调用此代理的displayLayer：方法，并切换到子线程中去做位图的绘制。子线程通过CoreGraphic的一系列API创建位图并把位图赋值给CALayer的contents。

---

---

离屏渲染和在屏渲染：

• 在屏渲染： 指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行

• 离屏渲染：指的是GPU在当前屏幕缓冲区以为新开辟一个缓冲区就行渲染操作

什么是离屏渲染：

当我们指定了UI视图的某些属性，标记为他在预合成之前不能用于直接在当前屏幕上显示的时候，就会触发离屏渲染。 而离屏渲染，起源于GPU层面，指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。

何时会触发离屏渲染：

1.设置图层圆角的时候，且跟maskToBounds或者clipToBounds同时使用；
2.设置图层蒙版
3.阴影
4.光栅化

为何要避免离屏渲染：

离屏渲染是发生在GPU层面上，离屏渲染触发了OpenGL的多通道渲染管线，创建了新的渲染缓冲区，且有上下文切换，增加了额外开销。增加了GPU工作量，就可能会使CPU和GPU加起来的工作总耗时超过了16.7ms，就会导致UI的卡顿和掉帧。

结合文章：
https://juejin.im/post/5ace078cf265da23994ee493
https://github.com/bestswifter/blog/blob/master/articles/ios-rounded-corner.md
图片处理：http://www.cocoachina.com/ios/20181015/25174.html