面试UI相关

UI相关

1. UI视图数据源同步

并发访问,数据同步 (内存消耗 )

并发访问,数据拷贝

串行访问(子线程耗时,会有延时)

串行访问

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

UIView和CALayer

QQ20190509-000336@2x

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

  • 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

  • 事件响应流程 ide

    QQ20190509-002604@2x

3. 图像显示原理

QQ20190509-002945@2x

  • CPU工做
    QQ20190509-003130@2x
  1. UI布局,文本计算
  2. 绘制 drawrect
  3. 图片编解码
  4. 提交位图
  • GPU渲染管线
    QQ20190509-003408@2x
UI卡顿、掉帧的缘由

QQ20190509-003554@2x

  • 滑动优化方案oop

    • CPU布局

      1. 对象的建立、调整、销毁放到子线程
      2. 预排版(布局计算、文本计算)放到子线程
      3. 预渲染(文本等异步绘制、图片编解码)放到子线程
    • GPU 4. 纹理渲染(避免离屏渲染) 5. 试图混合优化

  • UIView绘制原理spa

    QQ20190509-004338@2x

    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. 光栅化
相关文章
相关标签/搜索