【iOS高级资深工程师面试篇】①、2022年,金九银十我为你准备了《iOS高级资深工程师面试知识总结》 UI部分2/3 -图像显示原理-UI卡顿&掉帧

iOS高级资深工程师面试篇系列 - 已更新3篇
UI部分1/3 -UITableView-事件传递&视图响应
UI部分2/3 -图像显示原理-UI卡顿&掉帧
UI部分3/3 -UIView绘制原理-离屏渲染

技术:iOS底层原理、事件传递、视图响应、图像显示原理、UI卡顿&掉帧、UIView绘制原理、离屏渲染

一、图片显示原理

❓面试考点: 图片显示原理相关内容

1.1、图片显示原理 - CPU、GPU

CPU和GPU是两个硬件都是通过总线连接起来的。

1. 在CPU中,我们往往输出结果往往是一个位图
2. 在GPU总线，在合适的时候上传到GPU
3. 在GPU拿到位图之后,做图片的渲染和纹理的合成。
4. 之后把结果。放到帧缓冲区中。也就是Frame Buffer。
5. 再由视图控制器根据位信号，在指定时间之前,去帧缓存区中提取屏幕显示内容。
6. 然后最终显示到我们显示器中。

1.2、CPU和GPU分别做了什么事情

我们创建一个UIView的时候
UIView的显示部分 是由 CALayer控制器

1. CALayer里面包含一个属性 contents .就是我们需要显示在屏幕里面的一个位图
2. 比如我们设置UILabel的文本叫 Hello World
3. 系统在合适的时候去回调CALayer的drawRect方法
4. 绘制号的内容
   经过 Core Animation框架的提交给OPenGL(ES)的渲染管线
   进行最终的渲染和纹理的合成。最终显示到屏幕上

1.3、CPU和GPU承担哪些责任

1.3.1 CPU主要承担Layout、Display、Prepare、Commit

CPU的Layout

1. 布局
2. 文本计算
   对应代码的frame计算。size的计算

CPU的Display

1. 绘制 - 其中drawRect方法就是发生在这个当中

CPU的Prepare- 准备阶段

1. 图片的编解码
   使用到的ImageView。设置Image的时候。图片往往是否不能直接到屏幕上面的。需要对图片进行一个解码。而解码动作就是发生在图片编解码这个过程当中

CPU的Commit

1. 提交位图到GPU里面

1.3.2 GPU主要承担OpenGL的渲染管线

1. 首先对图片设置一个顶点着色
2. 图元装配
3. 光栅化
4. 片段着色
5. 片段处理
6. 最终会把上面5点存储到缓冲区中。最后等到实例控制器去缓冲区中提取到最终要在屏幕当中要显示的内容
   以上几点可能对日常开发的小伙伴接触不多。因为很少接触

如果对OpenGL模块研究。对上面的知识点就有所了解。

二、UI卡顿&掉帧

❓面试考点 - UI卡顿&掉帧的原因是什么呢

vSync 垂直信号
我们在页面滚动的时候。
一般说的60fps 。指的就是页面上有60帧的更新。指的就是流畅性

1. 也就是说每个16.7ms(毫秒)会产生1帧画面的更新。
2. 那么 CPU和GPU 在这16.7ms 共同携程完成这一帧画面的数据。
3. 比如说CPU花费一定的时间 做一些 文本的布局、UI计算、包括视图设计、以及图片解码 然后把最终产生的结果提交给位图
4. 再由GPU 进行相应的一些 图层的合成、纹理渲染、准备好下一帧的画面
5. 然后到下一帧的卫星信号的到来时候。就可以显示一个画面。
   上面是一个时间均匀分配。性能做的比较好的情况。
6. 如果上面在第三步 也就是CPU 花费的一定的时间比较长。留给第四步GPU的时间就比较短了。那么GPU要把哪些图层合成、纹理渲染准备完成的话。那么总时间就超过了16.7ms。
7. 那么在下一帧到来的时候。还没准备。可能就会产生掉帧。然后我们看到的效果就是一个滑动的卡顿。

UI卡顿&掉帧: 总结一句话

如果16.7ms时间内没有完成CPU和GPU共同完成准备的画面。那么就会产生掉帧或者卡顿。

---

滑动优化方案 - 高级面试问题

❓面试考点 - 基于Tableview、ScrollView的滑动优化都有哪些方案 基于CPU和GPU进行优化

1. CPU
   1.1 对象创建、调整、销毁 - 存放在子线程里面操作
   1.2 预排版(布局计算、文本计算) - 存放在子线程里面操作
   1.3 预渲染(文本等异步绘制,图片编解码等)
2. GPU
   2.1 纹理渲染 - 触发离屏渲染。
   离屏渲染 - 就会产生Layer的圆角，包括masksToBounds的设置。包括一些应用的蒙层都会触发GPU的离屏渲染。此时GPU的工作量就会比较庞大。
   我们可以对GPU进行尽量的优化。比如避免离屏渲染。同时我们可以依托CPU的异步绘制的机制减轻GPU的压力
   2.2 视图混合 - 比如我们视图有多个层级。那么视图就要做一个视图混合。合成每一个像素点的像素值。需要做大量的计算。
   我们可以减少视图层级。从而减轻视图混合的压力。也可以通过CPU的异步绘制机制来达到提交的位图本身就是一个层级非常少的视图。减轻GPU的压力