面试UI相关

UI相关

1. UI视图数据源同步

并发访问，数据同步 （内存消耗 ）

并发访问，数据拷贝

串行访问（子线程耗时，会有延时）

串行访问

2. 事件传递和视图响应的机制和流程

UIView和CALayer

QQ20190509-000336@2x

UIView的backgroundcolor是对CALayer里backgroundcolor的包装，contents负责显示内容，backing store是一个bitmap的位图

• UIView为CALayer提供显示的内容，以及负责处理触摸等事件，参与响应链
• CALayer负责显示内容contents

相关设计原则：单一职责原则

时间传递与视图响应链

// 返回最终响应的视图
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

• hitTest内部实现逻辑

  
  
  QQ20190509-002135@2x

// 判断某一个点击的位置是否在当前视图范围内
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event

• 事件传递流程

  
  
  QQ20190509-001929@2x

• 事件响应流程

  
  
  QQ20190509-002604@2x

3. 图像显示原理

[图片上传失败...(image-9fc2d1-1557369619472)]

• CPU工作

  
  
  QQ20190509-003130@2x

1. UI布局，文本计算
2. 绘制 drawrect
3. 图片编解码
4. 提交位图

• GPU渲染管线

  
  
  QQ20190509-003408@2x

UI卡顿、掉帧的原因

QQ20190509-003554@2x

• 滑动优化方案

  • CPU

    1. 对象的创建、调整、销毁放到子线程
    2. 预排版（布局计算、文本计算）放到子线程
    3. 预渲染（文本等异步绘制、图片编解码）放到子线程

  • GPU

    4. 纹理渲染（避免离屏渲染）
    5. 试图混合

• UIView绘制原理

  [图片上传失败...(image-88b6af-1557369619472)]

  runloop将要结束时调用CALayer的display方法

• 系统绘制流程

QQ20190509-004655@2x

• 实现异步绘制

-[layer.delegate displayLayer:]

    1. 代理负责生成对应的bitmap
    2. 设置该bitmap作为layer.contents属性的值

QQ20190509-005146@2x

离屏渲染

• On-n-Screen Rendering
  意为当前屏幕渲染，指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行

• Off-n-Screen Rendering
  意为离屏渲染，指的是GPU的渲染操作是在当前缓冲区以外新开辟一个缓冲区进行渲染操作

• 触发场景

  1. 圆角（当和maskToBounds同时使用时）
  2. 图层蒙版
  3. 阴影
  4. 光栅化

吞图，其他链接