語音社交app開發，如何實現介面優化？

介面渲染流程

卡頓

@interface ViewController ()
@property (nonatomic, strong) CADisplayLink *link;
@property (nonatomic, assign) NSTimeInterval lastTime; // 每隔1秒記錄一次時間
@property (nonatomic, assign) NSUInteger count; // 記錄VSync1秒內傳送的數量
@end
self.link = [CADisplayLink displayLinkWithTarget:self selector:@selector(linkAction:)];
[_link addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
- (void)linkAction: (CADisplayLink *)link {
    if (_lastTime == 0) {
        _lastTime = link.timestamp;
        return;
    }
    _count++;    
    NSTimeInterval delta = link.timestamp - _lastTime;
    if (delta < 1) return;
  
    _lastTime = link.timestamp;
    float fps = _count / delta;
    _count = 0;
      
    NSLog(@"? fps : %f ", fps);
}

@interface WSBlockMonitor () {
  CFRunLoopActivity activity;
}
@property (nonatomic, strong) dispatch_semaphore_t semaphore;
@property (nonatomic, assign) NSUInteger timeoutCount;
@end
- (void)registerObserver{
    CFRunLoopObserverContext context = {0,(__bridge void*)self,NULL,NULL};
    //NSIntegerMax : 優先順序最小
    CFRunLoopObserverRef observer = CFRunLoopObserverCreate(kCFAllocatorDefault,
                                                            kCFRunLoopAllActivities,
                                                            YES,
                                                            NSIntegerMax,
                                                            &CallBack,
                                                            &context);
    CFRunLoopAddObserver(CFRunLoopGetMain(), observer, kCFRunLoopCommonModes);
}
static void CallBack(CFRunLoopObserverRef observer, CFRunLoopActivity activity, void *info)
{
    WSBlockMonitor *monitor = (__bridge WSBlockMonitor *)info;
    monitor->activity = activity;
    // 傳送訊號
    dispatch_semaphore_t semaphore = monitor->_semaphore;
    dispatch_semaphore_signal(semaphore);
}
- (void)startMonitor {
    // 建立訊號
    _semaphore = dispatch_semaphore_create(0);
    // 在子執行緒監控時長
    dispatch_async(dispatch_get_global_queue(0, 0), ^{
        while (YES)
        {
            // 超時時間是 1 秒，沒有等到訊號量，st 就不等於 0， RunLoop 所有的任務
            long st = dispatch_semaphore_wait(self->_semaphore, dispatch_time(DISPATCH_TIME_NOW, 1 * NSEC_PER_SEC));
            if (st != 0)
            {
                if (self->activity == kCFRunLoopBeforeSources || self->activity == kCFRunLoopAfterWaiting) // 即將處理sources，即將進入休眠
                {
                    if (++self->_timeoutCount < 2) {
                        NSLog(@"timeoutCount==%lu",(unsigned long)self->_timeoutCount);
                        continue;
                    }
                    // 一秒左右的衡量尺度 很大可能性連續來 避免大規模列印!
                    // 可在此處記錄卡頓堆疊資訊，進行排查
                    NSLog(@"檢測到超過兩次連續卡頓");
                }
            }
            self->_timeoutCount = 0;
        }
    });
}
// 呼叫方法
- (void)start{
    [self registerObserver];
    [self startMonitor];
}

優化方案

@interface DataModel : NSObject
@property (nonatomic, strong) NSString *name;
@end

// .h
@interface LayoutModel : NSObject
@property (nonatomic, assign) CGRect nameRect;
@property (nonatomic, strong) DataModel *data;
@property (nonatomic, assign) CGFloat height;
- (instancetype)initWithModel:(DataModel *)model; // 初始化程式碼
@end
// .m
- (instancetype)initWithModel:(DataModel *)model {
  self = [super init];
  if (self) {
      self.data = model;
      // 根據資料計算相關控制元件的size
      CGSize size = [self getSizeWithContent:model.name];
      self.nameRect = CGRectMake(15, 100, size.width, size.height);
      self.height = 200; // 計算cell高度
  }
  return self;
}
- (CGSize)getSizeWithContent: (NSString *)content {
    //根據文字計算size ...
    return CGSizeMake(100, 40);
}

// .h
- (void)configCellWithModel: (LayoutModel *)model;
// .m
@interface TestCell ()
@property (nonatomic, strong) UILabel *nameLbl;
@end
@implementation TestCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        self.nameLbl = [UILabel new];
        [self.contentView addSubview:_nameLbl];
    }
    return self;
}
- (void)configCellWithModel:(LayoutModel *)model {
    self.nameLbl.frame = model.nameRect; // frame 賦值
    self.nameLbl.text = model.data.name; // 資料賦值
}

@property (nonatomic, strong) NSMutableArray<LayoutModel *> *dataSource;
// 模擬網路請求
dispatch_async(dispatch_get_global_queue(0, 0), ^{
    NSDictionary *dataDic;  // 網路請求資料
    NSMutableArray<DataModel *> *modelArray = [NSMutableArray array];
    for (NSDictionary *dic in dataDic[@"data"]) {
        DataModel *model = [DataModel yyModel: dic]; // 相關的json轉model方法
        [modelArray addObject:model];
    }
  
    self.dataSource = [NSMutableArray arrayWithCapacity:modelArray.count];
    for (DataModel *model in modelArray) {
        LayoutModel *layout = [[LayoutModel alloc] initWithModel:model]; // 根據資料model，初始化layoutModel，並進行控制元件的layout計算
        [self.dataSource addObject:layout];
    }
  
    // 計算完成後reloadData
    dispatch_async(dispatch_get_main_queue(), ^{
        [self.tableView reloadData];
    });
});
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return _dataSource.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString *identifier = @"cellID";
    TestCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (!cell) {
        cell = [[TestCell alloc] initWithStyle:(UITableViewCellStyleDefault) reuseIdentifier:identifier];
    }
  
    [cell configCellWithModel:self.dataSource[indexPath.row]];
    return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    LayoutModel *model = self.dataSource[indexPath.row];
    return model.height;
}

// WSLyer.m
- (void)display {
    // 建立context
    CGContextRef context = (__bridge CGContextRef)[self.delegate performSelector:@selector(createContext)];
    [self.delegate layerWillDraw:self]; // 繪製的準備工作
    [self drawInContext:context]; //繪製
    [self.delegate displayLayer:self]; // 展示點陣圖
    [self.delegate performSelector:@selector(closeContext)]; // 結束繪製
}
// WSView.m
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
+ (Class)layerClass {
    return [WsLayer class];
}
// 建立context
- (CGContextRef)createContext {
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, self.layer.opaque, self.layer.contentsScale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    return context;
}
- (void)layerWillDraw:(CALayer *)layer {
    // 繪製的準備工作
}
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
    [super drawLayer:layer inContext:ctx];
    // 形狀
    CGContextMoveToPoint(ctx, self.bounds.size.width / 2- 20, 20);
    CGContextAddLineToPoint(ctx, self.bounds.size.width / 2 + 20, 20);
    CGContextAddLineToPoint(ctx, self.bounds.size.width / 2 + 40, 60);
    CGContextAddLineToPoint(ctx, self.bounds.size.width / 2 - 40, 60);
    CGContextAddLineToPoint(ctx, self.bounds.size.width / 2 - 20, 20);
    CGContextSetFillColorWithColor(ctx, UIColor.magentaColor.CGColor);
    CGContextSetStrokeColorWithColor(ctx, UIColor.magentaColor.CGColor); // 描邊
    CGContextDrawPath(ctx, kCGPathFillStroke);
    // 文字
    [@"無雙" drawInRect:CGRectMake(self.bounds.size.width / 2 - 40, 70, 80, 24) withAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:15],NSForegroundColorAttributeName: UIColor.blackColor}];
    // 圖片
    [[UIImage imageNamed:@"buou"] drawInRect:CGRectMake(self.bounds.size.width / 2 - 40, 100, 60, 50)];
}
// 主執行緒渲染
- (void)displayLayer:(CALayer *)layer {
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    dispatch_async(dispatch_get_main_queue(), ^{
        layer.contents = (__bridge id)(image.CGImage);
    });
}
// 結束context
- (void)closeContext {
    UIGraphicsEndImageContext();
}

// ViewController.m
WsView *view = [[WsView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
view.backgroundColor = UIColor.yellowColor;
[self.view addSubview:view];