视图绘制 - 简书

视图绘制

本文要点

事件传递
视图响应
图像显示原理
卡顿掉帧原因
绘制&异步绘制
离屏渲染

先看一下UIView和CALayer区别？
UIView负责事件传递和视图响应。CALayer负责视图显示工作。这种分工体现单一职责原则。

事件传递

pointInside 判断点击位置在不在视图内,hitTest 返回点击位置的地方的hitView. 递归倒序遍历子视图

1 两个重要的API，

-(UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
  f (!self.userInteractionEnabled ||
        [self isHidden] ||
        self.alpha <= 0.01) {
        return nil;
    }
    if ([self pointInside:point withEvent:event]) {
           ……
    }else{
        return nil;
    }
    ……
}
-(BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event //

2 采用的是递归倒序遍历

视图响应

1 响应API

touchesBegan
touchesMoved
touchesEnded

2 响应链条
UIButton ---> UIView--->UIController--->UIWindow--->UIApplication
中途有任何一个视图响应，则响应结束。若果UIApplication也没有响应，则此次事件将被忽略。

图像显示原理

CPU工作：
layout UI布局，文字计算。
display：绘制。
prepare: 图片编解码。
Commit : 提交位图。
GPU工作：图层合成，纹理渲染。
CPU生成位图，交给GPU,GPU整合后生成Frame Buffer,下次VSync到来时，显示到屏幕上。

卡顿掉帧原因

在16.7ms内，在下一帧VSync信号到来之前，并没有CPU和GPU共同完成下一个画面的合成，导致卡顿掉帧。

UI绘制原理&异步绘制

UIView调用setNeedsDisplay并没有立即开始绘制，而是在当前RunLoop将要结束的时候调用[CALayer display]。

异步绘制流程: [UIView setNeedsDispplay]后，会在当次RunLoop结束之前调用[CALayer display]方法，CALayer的代理是否实现了displayLayer方法，走异步绘制流程，在子线程中创建位图，完成之后回到主线线程。若是CALayer没有实现displayLayer方法，走系统绘制流程。

UI离屏渲染

On-Screen Renderinng
当前屏幕渲染，GPU渲染操作发生在当前屏幕显示的缓冲区中进行
Off-Screen Rendering
离屏渲染：GPU在当前屏幕缓冲区之外，新开辟一个缓冲区进行渲染操作

什么事离屏渲染？

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

何时触发？

圆角(maskToBounds为YES)
图层蒙版
阴影设置
光栅化

为何要避免？

在触发离屏渲染的时候，会增加GPU的工作量。而增加GPU工作量，可能导致CPU和GPU的总耗时超出了16.7ms，造成UI卡顿和掉帧。所以需要避免离屏渲染。(高级)
创建新的缓冲区，多通道渲染管线，上下文切换，造成额外开销。(普通)

最后编辑于：2018.04.24 17:02:06