UI

UI处理的基础理论tips

Posted by FishYan on June 23, 2019

iOS开发 UI 基础理论tips

Tip1:UITableView的优化

1. cell 重用

  • 使用cell重用,而不是每次都重新创建cell。
  • 将cell样式一致或者类似的注册相同的重用标识,减少重用池中cell种类。
  • cell样式差别较大的cell注册不同重用标识,避免取到重用cell后重新布局及计算frame所造成 的性能损耗。

2. cell 高度

  • 无需自适应高度的设置固定高度。
  • 如果要使用 automaticDimension,最好提前设置合适的 estimatedHeight 预估cell高度,UItableView 会先用 estimatedHeight 设置cell高度,等cell创建完成后再使用真实的高度,而且只会处理屏幕范围内的cell,这样就会显著提升性能。。
  • 根据内容提前计算出每个cell的高度以替换上面的 automaticDimension 达到同样的效果

3. cell 的视图层次

  • 优化cell的视图结构,减少视图数量及视图层次。
  • 减少多余的 drawRect 操作
  • 异步加载图片
  • 避免动态条件视图,提前绘制好视图 使用 isHidden 控制显示隐藏效果更好

4. 离屏渲染

  • 何为离屏渲染,
    • 是指像圆角,阴影,遮罩等这些屏幕无法渲染的效果,需要开辟一新的缓冲区来渲染这些效果,在需要显示时会先通过上下文从当前屏幕切为离屏,渲染好之后再切回当前屏幕。
    • 开启离屏渲染会开辟新的缓冲区,渲染过程中多次切换上下文,都会消耗性能,
  • 下列都会产生离屏渲染
    • 为图层设置遮罩 mask
    • 设置透明度 laye.allowsGroupOpacity 为true 或者view.opacity < 1.0
    • 设置阴影 shadows
    • 设置光栅化 layer.shouldRasterize 为true
    • 设置抗锯齿 layer.edgeAntialiasingMask, layer.allowsAntialiasing
    • 设置圆角 layer.cornerRadius
    • 文本 包含 UILabel,CATextLayer, CoreText
    • 使用 CoreGraphic 再drawRect方法中做绘制操作(特殊离屏渲染)
  • 如何检测
    • 打开模拟器 -> debug -> Color Offscreen-Rendered 离屏渲染的图层会黄色高亮
  • 如何处理
    • 减少不必要遮罩mask的使用
    • 避免设置 laye.allowsGroupOpacity 或者view.opacity < 1.0
    • 设置阴影同时设置阴影路径
    • 避免设置光栅化 layer.shouldRasterize 为true
    • 避免设置抗锯齿 layer.edgeAntialiasingMask, layer.allowsAntialiasing
    • 圆角对性能影响不大,可以少量使用,如果复杂图形设置圆角,可以使用 CoreGraphic 绘制
    • 在drawRect中使用CoreGraphic绘制也会造成离屏渲染,但是与前面的离屏渲染有区别,CoreGraphic是CPU绘制后叫个GPU显示,对性能影响不大

5. 数据

  • 分页加载,提前加载数据,避免页面等待数据
  • 按需加载数据,tableview在快速滑动时,滑过去的数据可能都不是我们需要的,我们需要的是最后停留的位置的数据

    Tip2 响应链

  • UIview 负责事件响应,CALayer负责显示内容
  • 事件传递,点击屏幕 -> UIApplication -> UIWindow ->hitTestWithEvent -> pointInsideWithEvent -> 逐级向父视图传递事件直至可以响应为止。

    Tip3 显示图像

  • CPU和GPU是通过总线连接起来的
  • CPU输出结果为一个位图
  • 通过总线在合适的时机传输给GPU
  • GPU拿到位图,进行渲染,纹理和成等处理,放入缓冲器当中
  • 视图控制器会按照vsync信号逐行处理缓冲器中数据,显示到屏幕上。
  • 掉帧卡顿,在下一帧vsync到来时CPU和GPU还没有完成绘制工作,那么这一帧会保持上一帧的结果,视觉上就是掉帧卡顿