UI相關(guān)

1. UI視圖數(shù)據(jù)源同步

并發(fā)訪問，數(shù)據(jù)同步 （內(nèi)存消耗 ）

并發(fā)訪問，數(shù)據(jù)拷貝

串行訪問（子線程耗時(shí)，會(huì)有延時(shí)）

串行訪問

2. 事件傳遞和視圖響應(yīng)的機(jī)制和流程

UIView和CALayer

QQ20190509-000336@2x

UIView的backgroundcolor是對(duì)CALayer里backgroundcolor的包裝，contents負(fù)責(zé)顯示內(nèi)容，backing store是一個(gè)bitmap的位圖

• UIView為CALayer提供顯示的內(nèi)容，以及負(fù)責(zé)處理觸摸等事件，參與響應(yīng)鏈
• CALayer負(fù)責(zé)顯示內(nèi)容contents

相關(guān)設(shè)計(jì)原則：單一職責(zé)原則

時(shí)間傳遞與視圖響應(yīng)鏈

// 返回最終響應(yīng)的視圖
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

• hitTest內(nèi)部實(shí)現(xiàn)邏輯

  
  
  QQ20190509-002135@2x

// 判斷某一個(gè)點(diǎn)擊的位置是否在當(dāng)前視圖范圍內(nèi)
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event

• 事件傳遞流程

  
  
  QQ20190509-001929@2x

• 事件響應(yīng)流程

  
  
  QQ20190509-002604@2x

3. 圖像顯示原理

[圖片上傳失敗...(image-9fc2d1-1557369619472)]

• CPU工作

  
  
  QQ20190509-003130@2x

1. UI布局，文本計(jì)算
2. 繪制 drawrect
3. 圖片編解碼
4. 提交位圖

• GPU渲染管線

  
  
  QQ20190509-003408@2x

UI卡頓、掉幀的原因

QQ20190509-003554@2x

• 滑動(dòng)優(yōu)化方案

  • CPU

    1. 對(duì)象的創(chuàng)建、調(diào)整、銷毀放到子線程
    2. 預(yù)排版（布局計(jì)算、文本計(jì)算）放到子線程
    3. 預(yù)渲染（文本等異步繪制、圖片編解碼）放到子線程

  • GPU

    4. 紋理渲染（避免離屏渲染）
    5. 試圖混合

• UIView繪制原理

  [圖片上傳失敗...(image-88b6af-1557369619472)]

  runloop將要結(jié)束時(shí)調(diào)用CALayer的display方法

• 系統(tǒng)繪制流程

QQ20190509-004655@2x

• 實(shí)現(xiàn)異步繪制

-[layer.delegate displayLayer:]

    1. 代理負(fù)責(zé)生成對(duì)應(yīng)的bitmap
    2. 設(shè)置該bitmap作為layer.contents屬性的值

QQ20190509-005146@2x

離屏渲染

• On-n-Screen Rendering
  意為當(dāng)前屏幕渲染，指的是GPU的渲染操作是在當(dāng)前用于顯示的屏幕緩沖區(qū)中進(jìn)行

• Off-n-Screen Rendering
  意為離屏渲染，指的是GPU的渲染操作是在當(dāng)前緩沖區(qū)以外新開辟一個(gè)緩沖區(qū)進(jìn)行渲染操作

• 觸發(fā)場景

  1. 圓角（當(dāng)和maskToBounds同時(shí)使用時(shí)）
  2. 圖層蒙版
  3. 陰影
  4. 光柵化

簡書吞圖，其他鏈接