iOS 面试 -- UI视图

前言

做 APP 开发与我们联系最紧密的就是 UI 的开发了，你做 APP 开发，不做 UI 恐怕就是你很努力地学习，但是你从来不参加考试，所以在面试中 UI 视图一定会涉及，而具体面试都面啥，主要有以下几个方面，如下图：

本文主要就是从 UITableView、事件传递、视图响应、图像显示原理、卡顿掉帧、异步绘制和绘制原理以及离屏渲染 6 大块进行相关的讲解。

1. UITableView

重用机制

上图灰色部分就是tableView 中已经出现过得 A1 cell,当滑动不在屏幕显示时，将其放到重用池，当再次划出时从重用池里面取出，这样避免频繁创建，消耗内存和CPU，从而引起卡顿，如果继续向上滑动 A7 就将会从重用池里面取出，这个就是 tableView 的重用机制

数据源同步

数据源同步的问题多出现在新闻、资讯类 App中，对当前显示的内容进行删除操作的同时，进行 loadmore 操作，loadmore 操作时，会将当前的 data 进行 copy，loadmore 是在子线程进行处理，当服务器返回结果时，那么 loadmore 将原来的 data 和现在新的 data 合并一起，返回主线程data，这个时候，删除操作已经完成，而我们再次 reload 的时候，发现删除的数据，这个时候又显示了，这个就是数据源同步的问题。这种问题解决方案有两种

并发访问解决方案

在主线程执行删除的操作的时候，记录下来要删除的数据，然后等到子线程 loadmore 解析完成，回到主线程，将返回的新 data，再次删除即可，然后 reloadUI 即可
串行访问解决方案

串行就是，删除操作放到串行队列中，当删除完成以后将数据传到子线程中进行 loadmore 等操作，子线程完成数据的解析将数据传到主线程从而 reloadUI，这个也可以解决，但是会更加耗时，但是却比第一种更加节约内存，具体情况具体分析，牺牲时间换取空间

2. 事件传递与事件响应

UIView和CALayer的关系

UIView 为其提供内容，以及负责处理触摸等事件，参与响应链
CALayer 负责显示内容的 contents
深入问答：为什么会这么设计?
遵循程序设计的原则： $\color{red}{单一职责原则}$

事件响应流程

点击屏幕，事件响应的核心其实方法就是

- (nullable UIView *)hitTest:(CGPoint)point withEvent:(nullable UIEvent *)event;   // recursively calls -pointInside:withEvent:. point is in the receiver's coordinate system
- (BOOL)pointInside:(CGPoint)point withEvent:(nullable UIEvent *)event;   // default returns YES if point is in bounds

第一个方法返回的是一个UIView，是用来寻找最终哪一个视图来响应这个事件；第二个方法是用来判断某一个点击的位置是否在视图范围内，如果在就返回YES

流程描述

我们点击屏幕产生触摸事件，系统将这个事件加入到一个由UIApplication管理的事件队列中，UIApplication会从消息队列里取事件分发下去，首先传给UIWindow
在UIWindow中就会调用hitTest:withEvent:方法去返回一个最终响应的视图
在hitTest:withEvent:方法中就回去调用pointInside: withEvent:去判断当前点击的point是否在UIWindow范围内，如果是的话，就会去遍历它的子视图来查找最终响应的子视图
遍历的方式是使用倒序的方式来遍历子视图，也就是说最后添加的子视图会最先遍历，在每一个视图中都回去调用它的hitTest:withEvent:方法，可以理解为是一个递归调用
最终会返回一个响应视图，如果返回视图有值，那么这个视图就作为最终响应视图，结束整个事件传递；如果没有值，那么就会将UIWindow作为响应者

hitTest:withEvent: 方法调用

调用流程

首先会判断当前视图的hiden属性、是否可以交互以及透明度是否大于0.01，如果满足条件则进入下一步，否则返回nil
调用pointInside: withEvent:方法来判断这个点是否在当前视图范围内，如果满足条件则进入下一步，否则返回nil
然后以倒序的方式遍历它的子视图，在每个子视图中去调用hitTest:withEvent:方法，如果有一个子视图返回了一个最终的响应视图，那么就将这个视图返回给调用方；如果全部遍历完成都没有找到一个最终的响应视图，因为点击位置在当前视图范围内，就将当前视图作为最终响应视图返回

3. 图像显示原理

图像显示原理 1

图像显示原理则总线连接 CPU 和 GPU 协同工作，CPU 提交位图，GPU进行位图图层渲染和纹理合成，最终将结果，提交到帧缓冲区，然后由帧缓冲区提交到视频控制器，最后显示在屏幕上
在 iOS 开发上，显示的流程则是创建一个UIView，然后调用CALayer，生成要显示的内容，最后经过 drawRect绘制，提交到 CoreAnimation 生成位图，以上部分则是 CPU 的工作；然后经过 GPU 的 OpenGL管线渲染生成结果，最后显示在屏幕上

CPU 工作

cpu 的主要工作就是 UI 布局，frame 计算、文本计算、绘制、图片编码器、最后提交位图

图像显示原理 2

CPU 1

CPU 2

CPU 3

CPU 4

GPU

GPU

GPU 主要是对 CPU 提供过来的位图顶点着色、图元装配、光栅化、片段着色、片段处理，最后将结果提交到帧缓存区

4. 卡顿&掉帧

卡顿&掉帧

为什么会掉帧和卡顿？

页面滑动一般就是每一秒钟会有 60 帧的画面更新，基于此就是每隔 16.7ms 也就是 1/60就有一帧画面刷新，在这 16.7ms 内就需要 CPU 和 GPU协同工作，产生一帧的数据。如果当CPU消耗的时间过长，或者 GPU 渲染的时间过长，产生一帧的数据耗时超过 16.7ms，那么在下一个 Vsyc 信号到来之前，当前画面没有准备好，那么就会产生掉帧，而在肉眼看来就是卡顿。

滑动优化方案

CPU优化
- 对象创建、调整、销毁（子线程）
- 预排版（布局计算、文本计算）放到子线程处理
- 预渲染（文本的异步绘制、图片解码等）
GPU优化
其实就是避免离屏渲染
- 纹理渲染
- 视图混合

5. 绘制原理&异步绘制

UIView 的绘制原理

当 UIView的控件在调用[UIView setNeedsDisplay]其实并没有立刻执行绘制工作，而是在当前的 layer 上面打上一个脏标记，接着会调用 [view.layer setNeedsDisplay], 在当前 runloop 将要结束以后，则会调用 [CALayer dispaly]这个方法进行绘制

系统绘制流程

流程描述

在layer内部会创建一个backing store，我们可以理解为CGContextRef上下文
判断layer是否有delegate:
- 如果有delegate，则会执行[layer.delegate drawLayer:inContext]（这个方法的执行是在系统内部执行的），然后在这个方法中会调用view的drawRect:方法，也就是我们重写view的drawRect:方法才会被调用到
- 如果没有delegate，会调用layer的drawInContext方法，也就是我们可以重写的layer的该方法，此刻会被调用到
最后把绘制完的backing store（可以理解为位图）提交给GPU

异步绘制

怎么进行异步绘制呢,其实就是基于系统给我们开的口子layer.delegate,如果遵从或者实现了displayLayer方法,我们就可以进入到异步绘制流程当中,在异步绘制的过程当中通过代理负责生成 bitmap，最后将绘制的bitmap 作为 layer.contents 属性的值

异步绘制时序图

6. 离屏渲染

什么是在屏渲染（On-Screen Rendering）?

就是说当前的屏幕渲染，指的是 GPU 操作发生在当前用于显示屏幕缓冲区进行

什么是离屏渲染？（Off-Screen Rendering）

指的是 GPU 在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作
比如说我们设置的圆角属性，蒙层遮罩都会触发离屏渲染

何时会触发？

设置图层的圆角且和 maskToBounds=YES 一起使用时
图层蒙版
阴影
光栅化

为何要避免？

创建新的渲染缓冲区，消耗内存
上下文切换（GPU额外的开销）
触发离屏渲染时，会增加 GPU 的工作量，增加 GPU 工作量可能导致 GPU+CPU 工作总耗时（60fps 为例）超过 16.7ms，从而造成UI卡顿和掉帧，因为我们要避免离屏渲染

总结

以上就是我们 ui 视图部分 iOS 面试中常问到的。高频的题目有

系统事件的 UI 的传递机制是怎样的？
使 UITableView滑动更加流畅的方案或者思路有哪些？
什么是离屏渲染？
UIView 和 CALayer之间的关系是怎么样的？

参考文章

https://www.jianshu.com/p/2c16077b50f8
https://www.jianshu.com/p/254ef1640f68