本文主讲UI相关面试问题，包括UITableView相关、事件传递&视图相应、图像显示原理、卡顿&掉帧、绘制原理&异步绘制、离屏渲染。
一、UITableView相关
1、重用机制
为什么要用重用机制？
当UITableView滚动时，如果不用重用机制，会重复初始化原来已经有初始化过的cell，因此用重用机制会节省性能，避免出现卡顿现象
重用机制的原理
重用机制主要用到了一个可变数组visiableCells和一个可变的字典类型reusableTableCells,其中visiableCells用来存储当前UITableView显示的cell，reusableTableCells用来存储已经用'identify'缓存的cell。当UITableView滚动的时候，会先在reusableTableCells中根据identify找是否有有已经缓存的cell，如果有直接用，没有再去初始化。
代码实例:自定义tableView 字母索引条
2、数据源同步
(1)、数据源同步问题
数据源同步问题
(2)、数据源同步解决方案
1>、并发访问、数据拷贝
并发访问
- 并发即多个线程都可以执行同一段时间，不需要相互等待，主线程与用户互动，子线程做所需要的网络数据请求、数据解析及预排版等
- 主线程事先拷贝一份数据给子线程做网络请求、数据解析、预排版等，如果主线程有相关操作，记录操作，在子线程完成相关操作后将这条操作，与子线程的数据进行同步，再回到主线程刷新界面
- 缺点：需要拷贝大量数据，耗内存
2>、串行访问
串行访问
- 创建一个GCD串行队列，主线程的操作需要等待子线程操作完成
- 缺点：需要等待子线程完成，可能会耗时较长
3> 比较:
两种方案各有利弊
串行访问方式: 要求在子线程处理任务特别耗时的时候,我们某一个删除动作可能会有延时.
并发访问,数据拷贝方式:要记录数据同步操作,如上边例子需要记录同步删除的动作,需要进行大量的数据源拷贝,对内存的开销是有一定的问题.所以在具体场景中,需要根据实际业务去选择使用哪种方案.
二、事件传递&视图响应
1、UIView和CALayer的关系和区别
UIView和CALayer的关系和区别
关系：
UIView的内部包含CALayer层。创建UIView时，会自动创建一个CALyer层的对象，通过UIView的layer属性可以访问到。UIView需要显示时，会调用drawRect方法进行绘制，并将所有内容绘制在自己的layer层。也就是CALayer层才有显示功能。
区别：
UIView负责提供内容，以及负责处理触摸等事件，参与响应链
CALayer负责显示内容contents
这体现了系统设计的原则:六大职责原则中的 单一原则, 职责上的分工.
2、事件传递与视图响应链
事件传递
问题:点击c2空白区域,系统最终是以怎样方式找到最终视图响应视图是c2呢?(考察系统有关视图)
事件的分发与传递:
1)当iOS程序中发生触摸事件，系统会将事件加入到UIApplication管理的一个任务队列
2)UIApplication将处于任务队列最前端的事件向下分发。即UIWindow ->UIView
3)UIView首先看自己是否能处理事件，触摸点是否在自己身上。如果能，那么继续寻找子视图。
4)遍历子控件，重复以上两步
5)如果没有找到，那么自己就是事件处理者
6)如果自己不能处理，那么不做任何处理
其中不接受处理的事件情况如下三种：
- alpha <0.01
- userInteractionEnabled = NO
- hidden ＝ YES.
如果父视图不接受事件处理，则子视图也不能接收。事件只要触摸就会产生，关键在于是否有合适的View处理接收事件
1> 如何寻找最合适的View呢？以下两个方法
//返回响应事件的视图
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event;
//判断点击位置是否在当前视图范围内, 在范围内返回YES
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event;
这两个方法，第一个方法用于找出事件的响应者，第二个方法用于确定事件触发的位置。
事件传递给窗口或控件的后，就调用hitTest:withEvent:方法寻找更合适的view,如果子控件是合适的view，则在子控件再调用hitTest:withEvent:直到找到最合适的为止。
通过这两个方法来做事件的传递和响应过程，如下图：
2>事件传递流程
事件传递流程
hitTest:withEvent:方法内部会进行一个递归调用，对响应者的所有subviews调用hittest，hitTest:withEvent:系统实现如下图：
hitTest:withEvent:系统实现.png
3>代码实战:方形按钮指定区域接收事件响应
4>视图响应流程
视图相应链
响应者链的传递方法是事件传递的反方法，如果所有的响应者都不处理，则事件被丢弃
视图事件响应三个方法:
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;
三、图像显示原理
图像显示原理
CPU GPU通过总线连接 通过CPU进行绘图，将位图经由总线在合适的时机给GPU，GPU做位图的涂层渲染和纹理合成，再放到帧缓冲区域(Frame Buffer)中， 由视频控制器根据VSync在帧缓冲区域中提取屏幕显示内容，显示到手机屏幕中
可以看到，CPU处理了UI布局，绘制，以及图片编解码等预处理工作，最后将bitmap位图提交给GPU进行屏幕渲染。
渲染的过程如下：
UIView的layer层有一个content，指向一块缓存，即backing store
UIView绘制时，会调用drawRect方法，通过context将数据写入backing store
在backing store写完后，通过render server交给GPU去渲染，将backing store中的bitmap数据显示在屏幕上
1、CPU工作
Layout(UI布局、文本计算)； Display(绘制，drawRect方法)；Prepare(图片编解码)； Commit(提交位图)。
2、GPU渲染管线(openGL)
顶点着色、图元装配、光栅化、片段着色、片段处理。
GPU渲染管线五步做完后就会,就会把最终像素点提交到对应的帧缓冲区中,然后由视频控制器在对应的VSync信号到来之前,去帧缓冲区中提取最终要显示的屏幕内容。
四、卡顿&掉帧
1、原因
UI卡顿、掉帧的原因:
保持流畅的UI交互，屏幕的刷新频率应该保持在60帧，即每16.7ms就会进行一次屏幕刷新，如果此时系统中绘制渲染工作还没有完成，导致VSync信号到来之前CPU和GPU无法完成下一帧画面的合成，则会将显示拖延到下一个刷新点，这样就会造成掉帧从而产生卡顿
2、滑动优化方案
(1)、CPU
对象创建、调整、销毁 , 放到子线程中做；
预排版（布局计算、文本计算）, 放到子线程中做；
预渲染（文本等异步绘制，图片编解码等）。
(2)、GPU
纹理渲染（离屏渲染）；
视图混合（视图层级复杂度，GPU需要做每个视图的合成）。
(在绘制时减少图层层级，将多个层级绘制到一个层级下，以减少GPU在做视图混合时消耗的时间)
如何具体优化呢？
- 官方在iOS9.0后对UIImageView设置圆角进行优化，但是设置阴影依然会触发离屏渲染
- 圆角优化
1.使用贝塞尔曲线UIBezierPath和Core Graphics框架画出一个圆角
2.使用CAShapeLayer和UIBezierPath设置圆角 - shadow优化
通过设置shadowPath来优化性能
其他优化方案：
- 尽量使用不包含透明（alpha）通道的图片资源
- 尽量设置layer的大小值为整形值
- 使用一张中间透明图片蒙上去
- 如果是本地图:直接让美工把图片切成圆角进行显示
- 上传图片进行显示，可以让服务端处理圆角
- 利用UIBezierPath（CoreGraphics框架）画出来圆角图片
Core Animation工具检测离屏渲染
对于离屏渲染的检测，苹果为我们提供了一个测试工具Core Animation。可以在Xcode->Open Develeper Tools->Instruments中找到
五、UIView绘制原理&异步绘制
UIView绘制原理步骤
CALayer会在当前RunLoop结束前调用自身的display方法进行绘制，下图是系统调用CALayer的display方法绘制的流程：
一、系统绘制流程
系统绘制流程
UIView的drawRect方法是一个空方法，他给调用者提供了一个在系统绘制的基础上二次操作的空间。
bitmap作为layer的contents属性的值，在被赋值后提交给GPU进行渲染。
我们可以在displayLayer方法中进行异步绘制。
二、异步绘制
-[layer.delegate displayLayer:]
代理负责生成对应的bitmap
设置该bitmap作为layer.contents属性的值
异步绘制实现时序图
六、离屏渲染
1、什么是离屏渲染？
- On-Screen Rendering
意为当前屏幕渲染，指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行 - Off-Screen Rendering
意为离屏渲染，指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作
通俗讲: 当设置某一些UI视图的图层属性时，如果未被预合成之前不能用于当前屏幕直接显示的时候，就会触发离屏渲染，比如设置圆角属性，一些视图遮罩。而离屏渲染的概念起源于GPU层面，指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。
当屏渲染：指的是GPU的渲染操作是在当前用于显示的屏幕缓存区中进行。
2、何时会触发？
(1)、圆角（layer.masksToBounds = YES 和layer.cornerRadius 同时使用)
(2)、图层蒙版 (layer.mask)
(3)、阴影 (layer.shadow)
(4)、光栅化 ( layer.shouldRasterize=true)
(5)、透明度 (layer.allowsGroupOpacity = YES 和 layer.opacity < 1.0)
由于离屏渲染要创建新的渲染缓冲区，同时还要进行上下文的切换，这会增加GPU的处理时间，可能会造成掉帧
3、为何要避免离屏渲染？
(1)、触发离屏渲染，会增加GPU的工作量，会导致CPU和GPU的工作总耗时超过16.7毫秒，会导致UI的卡顿和掉帧。
(2)、创建新的渲染缓冲区，会内存开销。
(3)、上下文切换，会导致GPU额外开销。
UI视图相关面试问题总结：
1、系统的UI事件传递机制是咋样的？
考察hitTest: 和pointInside: 系统内部实现
2、使UITableView滚动更流畅的方案或思路都有哪些？(参考滑动优化方案)
从CPU和GPU两方面
3、什么是离屏渲染？(参考概念 和为何要避免离屏渲染)
离屏渲染的概念起源于GPU层面，指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。
4、UIView和CALayer之间的关系是咋样的？
网友评论