[iOS面试]第1章 UI视图相关面试问题

本文主讲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进行屏幕渲染。

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之间的关系是咋样的?