如何检测和解决UITableView滚动时的卡顿问题？

题目

如何检测和解决UITableView滚动时的卡顿问题？

信息

• 类型：问答
• 难度：⭐⭐

考点

UITableView性能优化, 离屏渲染检测, 异步任务处理, 卡顿监控工具

快速回答

解决UITableView卡顿的核心要点：

• 减少主线程负担：异步处理耗时操作（图片解码/网络请求）
• 优化Cell布局：使用AutoLayout时减少嵌套层级
• 避免离屏渲染：使用cornerRadius+masksToBounds时设置layer.cornerRadius并预裁剪
• 复用机制：正确使用dequeueReusableCell和Cell重用标识符
• 监控工具：使用Instruments的Core Animation和Time Profiler定位问题

一、卡顿根本原因

当UITableView滚动时出现卡顿，通常是因为主线程被阻塞导致无法在16ms内完成帧渲染（60FPS要求）。常见瓶颈：

• 复杂Cell布局计算耗时
• 图片同步解码/加载
• 频繁的离屏渲染（如圆角+阴影）
• 非必要的对象创建

二、检测工具

1. Instruments工具：

• Core Animation：检查离屏渲染（黄色警告）和帧率
• Time Profiler：分析主线程耗时函数
• 使用方式：Xcode → Product → Profile → 选择工具

2. 代码监控：

// 添加FPS监控
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(fpsUpdate:)];
[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

三、优化方案

1. Cell布局优化：

• 使用systemLayoutSizeFittingSize预计算高度并缓存
• 避免Autolayout嵌套过深（超过3层需警惕）
• 复杂界面推荐手动计算布局（layoutSubviews）

2. 图片处理：

// 异步解码图片（SDWebImage内部实现）
cell.imageView.image = [UIImage imageNamed:@"placeholder"];
dispatch_async(dispatch_get_global_queue(0, 0), ^{
    UIImage *decodedImage = [UIImage decodedImageWithImage:rawImage];
    dispatch_async(dispatch_get_main_queue(), ^{
        cell.imageView.image = decodedImage;
    });
});

3. 离屏渲染解决方案：

// 错误做法（触发离屏渲染）
view.layer.cornerRadius = 10;
view.layer.masksToBounds = YES;

// 正确做法1：预渲染为位图
UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO, 0);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

// 正确做法2：使用贝塞尔路径裁剪
CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = [UIBezierPath bezierPathWithRoundedRect:view.bounds cornerRadius:10].CGPath;
view.layer.mask = mask;

4. 其他优化：

• 使用cellForRowAtIndexPath时避免同步网络请求
• 重用池标识符保持唯一性
• 减少透明视图（alpha < 1）叠加

四、最佳实践

• Cell复用：在viewDidLoad中注册Cell类
  [self.tableView registerClass:[CustomCell class] forCellReuseIdentifier:@"Cell"];
• 高度缓存：在heightForRowAtIndexPath使用字典缓存高度
• 异步绘制：重写Cell的drawRect并在后台线程渲染

五、常见错误

• 在Cell中同步加载大图（阻塞主线程）
• 动态修改约束导致布局重复计算
• 误用cornerRadius+masksToBounds组合
• 重用池标识符冲突导致Cell内容错乱

六、扩展知识

• UIView vs CALayer：非交互元素优先使用CALayer
• 栅格化：shouldRasterize适用于静态Cell，动态Cell慎用
• 预加载：在scrollViewDidEndDragging预加载后续数据
• 新方案：iOS 15的UICellConfiguration提升渲染效率