UI视图相关

一:UITableview

1重用机制

UI视图相关_第1张图片

2数据源同步问题(新闻、咨询类app当中常见)

1)

UI视图相关_第2张图片
并发访问数据拷贝(cpu负担重)

2)

UI视图相关_第3张图片
串行访问(可能会有延时)

3UI事件传递&相应

   1) UIView和CALayer:(单一职责原则)

    UIView负责提供内容,处理触摸事件并参与响应链

    CALayer只负责显示内容contents。

    2)事件传递

    -(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event;//返回响应事件的视图

    -(BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event;//判断点击的位置是否在当前视图范围内

UI视图相关_第4张图片
UI视图相关_第5张图片
hitTest:WithEvent的流程图

视图的响应链机制和流程

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;


UI视图相关_第6张图片
如果最终没有处理,则忽略此事件

4图像显示原理

UI视图相关_第7张图片


UI视图相关_第8张图片
各自的分工
UI视图相关_第9张图片
cpu的主要工作内容
UI视图相关_第10张图片
GPU/OPENGL渲染管线

5UI卡顿、掉帧的原因以及解决方案

1)原因:

UI视图相关_第11张图片
在16.7ms内,cpu和gpu没有准备好下一帧的画面绘制就会造成卡顿

2)滑动优化方案

CPU方案:

    对象创建、调整、销毁

    预排版(布局计算、文本计算)

    预渲染(文本等异步绘制、图片编解码等)

GPU方案:

    纹理渲染*

    视图混合*

6 UI绘制原理&异步绘制

1)UI绘制原理

UI视图相关_第12张图片
UIView的绘制流程


UI视图相关_第13张图片
系统绘制流程

2)异步绘制


UI视图相关_第14张图片
异步绘制流程

7 离屏渲染问题(GPU)

    On-Screen Rendering

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

    Off-Screen Rendering

    离屏渲染,GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作

何时会触发?

    ·圆角(当和maskToBounds一起使用时)    

    ·图层蒙版

    ·阴影

    ·光栅化

为何要避免离屏渲染?

    ·会增加GPU的工作量,可能导致GPU和CPU的工作时间超过16.7ms造成UI卡顿和掉帧现象。

页面性能优化方案(转载)

https://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/

你可能感兴趣的:(UI视图相关)