UIView的绘制原理及优化

2019-07-27 本文已影响0人打碟的DJ

UI卡顿&掉帧的原因

一般页面滑动的帧数在60fps以内时，页面才会流畅，也就是说每一秒内有60次的画面更新，相当于在每隔16.7ms产生一帧画面，在16.7ms内 CPU 和 GPU 要完成一帧画面的绘制与渲染。

图片显示

正常显示：

比如说 CPU 要在一定时间内完成视图的文本的布局、视图的绘制以及图片的解码等工作，最终将位图（bitmap）提交给 GPU ，然后 GPU 完成视图的渲染，最终在16.7ms内提交给视频控制器显示在屏幕上。

图片掉帧

掉帧

如果说 CPU 在16.7ms内占用的时间过多，最终导致 GPU 在16.7ms以后才将图片渲染完提交给视频控制器，就会导致掉帧，UI界面的卡顿

UIView的绘制原理

当调用 UIView 的 $\color{red}{setNeedsDisplay}$ 方法时并不会立即绘制视图，它会先调用视图所对应的的 layer 的同名方法 $\color{red}{setNeedsDisplay}$ 方法，相当于在当前视图上打上了个脏标记，然后在当前 runloop 将要结束时调用 CALyer 的 $\color{red}{display}$ 方法，最后才会进入绘制流程当中。
在调用 CALyer 的 $\color{red}{display}$ 方法时，首先会先判断是否响应 layer 的 $\color{red}{displayLayer}$ 代理方法，如果不响应则进入系统绘制流程，当响应时，则进入异步绘制入口。

系统绘制流程

系统绘制流程图

CALayer 会回先创建一个 backing store（CGContextRef）的上下文，然后会在 drawRect 方法中会在上下文堆栈中拿到 backing store
判断是否 CALayer 是否有代理
如果没有代理，则调用系统的 $\color{red}{drawInContext:}$ 方法
如果有代理，则会调用 layer.delegate 的 $\color{red}{drawLayer:inContext:}$ 方法，该方法发生自系统内部，最后在合适的时机会调用 $\color{red}{[UIView drawRect:]}$ 方法，该方法默认是什么都不做的
最后都会将 backing store （位图）上传至GPU中，最后结束绘制

异步绘制

- [layer.delegate displayerLayer:]

代理负责生成对应的bitmap
设置该bitmap作为layer.contents属性的值

异步绘制时序图

假如说在某个时间调用 $\color{red}{setNeedsDisplay}$ 方法
然后在当前 runloop 将要结束的时候，会由系统调用视图所对应的 $\color{red}{CALyer display}$ 方法，如果我们的 delegate 方法实现了 $\color{red}{displayerLayer}$ 方法，则由系统调用该方法
然后会通过子线程的切换，在子线程中实现视图的绘制
在子线程中创建位图的上下文（ $\color{red}{- CGBitmapContextCreate()}$ ），然后做UI的绘制工作（ $\color{red}{CoreGraphic 的 API}$ ），然后根据绘制的上下文生成一张 CGImage 图片（ $\color{red}{- CGBitmapContextCreateImage()}$ ）
最后回到主队列中，将该 CGImage 图片设置为 CALayer 的 contents