UI相关知识

标题

一、UITableView相关

1.1、重用机制

代码层

重用机制

重用示意图

重用示意图

1.2、数据源同步

资源竞争

解决方案

• 并发访问、数据拷贝

  
  并发方案

• 串行访问

  
  串行方案

二、事件传递与视图响应链

见文章事件传递与视图响应链

三、图像显示原理

总体图 分工

3.1、CPU工作

CPU工作

• Layout
  UI布局、文本计算
• Display
  绘制
• Prepare
  图片编解码
• Commit
  提交位图

3.2、GPU渲染管线

GPU渲染管线

四、UI卡顿&掉帧

4.1、UI卡顿&掉帧的原因

问题1：UI卡顿&掉帧的原因是什么？

UI卡顿&掉帧原因

解释

• 页面滑动流畅性是60FPS，指的是1s有60桢的画面更新，这样人眼看到的就是流畅效果。所以1/60秒(16.7ms)就会产生一帧画面。
• 在这16.7ms之内，需要CPU、GPU共同完成一帧的数据。
• 如果CPU + GPU处理时间 > 16.7ms，在下一个VSync信号到来之前，这一桢画面还没有准备好，由此产生了掉帧，看到的效果就是卡顿。
  总结：在规定的16.7ms之内， 在下一个VSync信号到来之前，CPU、GPU并没有完成画面的合成，由此造成掉帧卡顿。

4.2、滑动优化方案

4.2.1、CPU

CPU
主要是将上面工作，全部放到子线程中去做，节省CPU时间。

4.2.2、GPU

GPU

五、UI绘制原理&异步绘制

5.1、绘制原理步骤

绘制原理步骤

• 调用[UIVIew setNeedsDisplay]并没有发生视图的调用工作，而是在之后的某一时机发生，会在当前runloop即将结束的时候，才调用[CALayer dispaly]进行图形绘制。

• 系统绘制流程
  没有重写displayLayer方法，就用系统绘制流程。

• 异步绘制入口
  只有重写了displayLayer方法，才会进入异步绘制流程。

5.2、系统绘制流程

系统绘制流程

5.3、异步绘制

异步绘制

• 实现了displayLayer方法，就可以进行异步绘制。
• 代理负责生成位图。
• 将位图赋值给layer.contents。

异步绘制流程时序图

时序图

问题2：什么是异步绘制？

见上图解。
简单总结：

• 程序中某View调用[setNeedsDisplay]➡️[CALayer dispaly]➡️某View重写displayLayer方法
• 在displayLayer中生成位图，当前方法在子线程中进行。
• 在主队列中，将位图赋值给layer.contents。
  此时，就完成了UI控件的异步绘制过程。

六、离屏渲染

6.1、概念

概念

问题3：什么是离屏渲染？

• 当我们指定了UI视图的某些属性，标记为在未预合成之前不能用于屏幕显示的时候，就会触发离屏渲染 。

• 离屏渲染的概念起源于GPU层面

  
  GPU

问题4：离屏渲染何时会触发？

离屏渲染

问题5：为何要避免离屏渲染？

在触发离屏渲染的时候，会触发GPU工作量。而增加了GPU的工作量，有可能导致CPU + GPU耗时超过16.7ms，从而导致卡顿。

七、UI面试图总结

问题6：系统的UI事件传递机制是怎样的？

从事件传递流程回答，着重说hitTest:withEvent:和pointInside:withEvent:。

传递机制

问题7：使得UITableView滚动更流畅的方案和思路有哪些？

• CPU
  

  CPU
  主要是将上面工作，全部放到子线程中去做，节省CPU时间。

• GPU

  
  GPU

问题8：UIView与CALayer之间的关系是怎样的？

• CALayer为UIView提供显示的内容，只负责内容显示，不参与事件处理。
• UIView作为CALayer的代理，提供交互操作；负责处理触摸事件，参与响应链。