[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进行屏幕渲染。

渲染的过程如下:
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之间的关系是咋样的?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容