简单谈谈ios开发中的UI
UITableView
重用机制
let cell = tableView.dequeueReusableCell(withIdentifier: cellReuseID, for: indexPath)UITableView 内部维护了一个 重用缓存池
核心流程
缓存池结构：字典形式: key = 重用标识符，value = 闲置的 cell
cell 滑出屏幕：系统自动把它扔进缓存池，标记为「可重用」；
需要新 cell：调用 dequeueReusableCell 方法
优先去缓存池找对应重用标识符的闲置 cell，找到直接复用，没找到系统进行创建
重用标识符：唯一标识一种 cell 样式
UI数据源同步问题
在实际的设计中，我们经常会遇到多线程竞态问题，比如请求server的数据，这需要放到子线程来进行，但是在等待server返回的过程中，UITableView的数据有可能会被修改，server返回后再刷新UI就会出现已经修改的数据重置的问题，实际解决方案一般有两种
串行队列 设计一个串行队列，对于UI数据的操作放到串行队列去做即可
并发访问 数据拷贝 我们为子线程拷贝一份主线程的数据，当主线程对数据进行修改的时候，记录一下，然后当server数据返回时让其做同步修改即可
UI事件传递
UIView和CALayer
UIView为其提供内容，处理触摸等事件，参与响应链
CALayer负责显示内容contents
这体现了单一职责原则
事件传递和视图响应链
事件传递流程
🔥 传递方向：从上到下
传递顺序：点击屏幕 → UIApplication → UIWindow → 控制器根视图 → 父视图 → 子视图（倒序遍历，也就是说最后被添加的子视图最先响应）
note：对于每个子视图，先调用 pointInside 判断点是否在视图内，再递归调用子视图的 hitTest
point(inside:with:) 判断触摸点是否在当前视图范围内 hitTest(_:with:) 寻找并返回最终的响应视图视图响应链
🔥 传递方向：从下往上
传递顺序：最佳响应视图 → 父视图 → ... → 控制器根视图 → UIViewController → UIWindow → UIApplication → AppDelegate
最佳视图重写 touchesBegan，touchesMove，touchedEnded方法 → 自己处理，事件终止（如果不重写，会一直向上抛，直到最顶层都不处理，该事件丢弃）
图像显示原理
UIView 本身不负责绘制和显示，真正负责像素显示、渲染、动画的是它的底层属性：CALayer。
iOS 屏幕显示是一套固定的流水线作业，分为 3 个阶段：CPU 预处理 → GPU 硬件渲染 → 屏幕刷新显示
CPU的工作
布局计算：计算所有视图的 frame、AutoLayout 约束、文字宽高，确定视图位置大小
CPU绘制位图：如果你重写了 drawRect:，CPU 会进行软件绘制，生成位图
CPU 把所有图层、位图数据打包，通过Core Animation框架IPC 通信提交给 GPU的OpenGL管线
GPU的工作
顶点着色，图源装配，光栅化，片段着色，片段处理
提交像素点到帧缓冲区中
屏幕显示
手机屏幕默认 60Hz 刷新率（每 16.7ms 刷新一次）
屏幕发出 VSync（垂直同步信号），系统从帧缓冲区取出渲染好的画面，电子枪逐行扫描屏幕，显示像素，完成一帧显示，循环往复
UI掉帧
在规定的16.7ms内，在下一帧VSync信号到来之前，CPU和GPU并没有完成下一帧画面的合成
滑动优化方案
解决主线程卡顿
所有耗时操作全部丢子线程
图片子线程预解码，主线程只赋值展示
列表优先用 reloadRows 局部刷新，少用 reloadData
简化约束，复杂布局尽量用 Frame
提前初始化复用控件，不要滑动时临时创建 解决 GPU 渲染掉帧
尽量少用 圆角 + masksToBounds，避免离屏渲染
阴影一定要加 shadowPath，避免实时计算
减少视图嵌套，扁平化 UI 层级
删掉无用透明重叠 View，减少过度绘制
非必要不使用模糊、蒙版
UIView绘制原理
异步绘制
UIView 默认就是自己底层 layer 的 delegate，CALayer 绘制内容时，会优先询问代理：- (void)displayLayer:(CALayer *)layer;只要实现了这个方法，系统就不会走默认的主线程 drawRect:
该方法负责代理生成对应的位图，并生成对应的CGImage，并且设置其为Layer.contents属性的值
时序图
离屏渲染
在屏渲染：GPU的渲染操作在当前用于显示的屏幕缓冲区进行，画完直接等屏幕刷新显示
离屏渲染：GPU在当前屏幕缓冲区外新开辟一个缓冲区进行渲染操作，这就需要进行中转绘制 + 拷贝
何时触发
图层圆角 + maskToBounds
图层蒙版 || 阴影
光栅化
渐变叠加
debug
顶部菜单 Debug → Show Debug Settings
Color Offscreen - Rendered Yellow 界面黄色区域 = 正在发生离屏渲染