UITableView效能優化-中級篇

小蠢驢打程式碼發表於2018-12-16
UIView優化

老實說，UITableView效能優化 這個話題，最經常遇到的還是在面試中，常見的回答例如:

  • Cell複用機制
  • Cell高度預先計算
  • 快取Cell高度
  • 圓角切割
  • 等等. . .

made in 小蠢驢的配圖

進階篇

最近遇到一個需求，對tableView有中級優化需求

  1. 要求 tableView 滾動的時候,滾動到哪行，哪行的圖片才載入並顯示,滾動過程中圖片不載入顯示;
  2. 頁面跳轉的時候，取消當前頁面的圖片載入請求；

以最常見的cell載入webImage為例:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (!cell) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    }
    
    DemoModel *model = self.datas[indexPath.row];
    cell.textLabel.text = model.text;
   
    [cell.imageView setYy_imageURL:[NSURL URLWithString:model.user.avatar_large]];
    
    return cell;
}
複製程式碼

解釋下cell的複用機制:

  • 如果cell沒進入到介面中(還不可見)，不會呼叫- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath去渲染cell,在cell中如果設定loadImage，不會呼叫;
  • 而當cell進去介面中的時候，再進行cell渲染(無論是init還是從複用池中取)

解釋下YYWebImage機制:

  • 內部的YYCache會對圖片進行資料快取，以key:value的形式，這裡的key = imageUrl，value = 下載的image圖片
  • 讀取的時候判斷YYCache中是否有該url，有的話，直接讀取快取圖片資料，沒有的話，走圖片下載邏輯，並快取圖片

問題所在:

如上設定，如果我們cell一行有20行，頁面啟動的時候，直接滑動到最底部，20個cell都進入過了介面，- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 被呼叫了20次，不符合 需求1的要求

解決辦法:

  1. cell每次被渲染時，判斷當前tableView是否處於滾動狀態，是的話，不載入圖片；
  2. cell 滾動結束的時候，獲取當前介面內可見的所有cell
  3. 在2的基礎之上，讓所有的cell請求圖片資料，並顯示出來
  • 步驟1:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (!cell) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    }
    
    DemoModel *model = self.datas[indexPath.row];
    cell.textLabel.text = model.text;
   
    //不在直接讓cell.imageView loadYYWebImage
    if (model.iconImage) {
        cell.imageView.image = model.iconImage;
    }else{
        cell.imageView.image = [UIImage imageNamed:@"placeholder"];
        
        //核心判斷：tableView非滾動狀態下，才進行圖片下載並渲染
        if (!tableView.dragging && !tableView.decelerating) {
            //下載圖片資料 - 並快取
            [ImageDownload loadImageWithModel:model success:^{
                
                //主執行緒重新整理UI
                dispatch_async(dispatch_get_main_queue(), ^{
                    cell.imageView.image = model.iconImage;
                });
            }];
        }
}
複製程式碼
  • 步驟2:
- (void)p_loadImage{

    //拿到介面內-所有的cell的indexpath
    NSArray *visableCellIndexPaths = self.tableView.indexPathsForVisibleRows;

    for (NSIndexPath *indexPath in visableCellIndexPaths) {

        DemoModel *model = self.datas[indexPath.row];

        if (model.iconImage) {
            continue;
        }

        UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];

        [ImageDownload loadImageWithModel:model success:^{
            //主執行緒重新整理UI
            dispatch_async(dispatch_get_main_queue(), ^{
 
                cell.imageView.image = model.iconImage;
            });
        }];
    }
}
複製程式碼
  • 步驟3:
//手一直在拖拽控制元件
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

    [self p_loadImage];
}

//手放開了-使用慣性-產生的動畫效果
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{

    if(!decelerate){
        //直接停止-無動畫
        [self p_loadImage];
    }else{
        //有慣性的-會走`scrollViewDidEndDecelerating`方法，這裡不用設定
    }
}
複製程式碼

dragging:returns YES if user has started scrolling. this may require some time and or distance to move to initiate dragging 可以理解為，使用者在拖拽當前檢視滾動(手一直拉著)

deceleratingreturns:returns YES if user isn't dragging (touch up) but scroll view is still moving 可以理解為使用者手已放開，試圖是否還在滾動(是否慣性效果)

ScrollView一次拖拽的代理方法執行流程:

ScrollView流程圖.png

當前程式碼生效的效果如下:

demo.gif

RunLoop小操作

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (!cell) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    }
    
    DemoModel *model = self.datas[indexPath.row];
    cell.textLabel.text = model.text;
   
    
    if (model.iconImage) {
        cell.imageView.image = model.iconImage;
    }else{
        cell.imageView.image = [UIImage imageNamed:@"placeholder"];

        /**
         runloop - 滾動時候 - trackingMode，
         - 預設情況 - defaultRunLoopMode
         ==> 滾動的時候，進入`trackingMode`，defaultMode下的任務會暫停
         停止滾動的時候 - 進入`defaultMode` - 繼續執行`trackingMode`下的任務 - 例如這裡的loadImage
         */
        [self performSelector:@selector(p_loadImgeWithIndexPath:)
                   withObject:indexPath
                   afterDelay:0.0
                      inModes:@[NSDefaultRunLoopMode]];
}

//下載圖片，並渲染到cell上顯示
- (void)p_loadImgeWithIndexPath:(NSIndexPath *)indexPath{
    
    DemoModel *model = self.datas[indexPath.row];
    UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
    
    [ImageDownload loadImageWithModel:model success:^{
        //主執行緒重新整理UI
        dispatch_async(dispatch_get_main_queue(), ^{
            cell.imageView.image = model.iconImage;
        });
    }];
}
複製程式碼

效果與demo.gif的效果一致

runloop - 兩種常用模式介紹: trackingMode && defaultRunLoopMode

  • 預設情況 - defaultRunLoopMode
  • 滾動時候 - trackingMode
  • 滾動的時候，進入trackingMode,導致defaultMode下的任務會被暫停,停止滾動的時候 ==> 進入defaultMode - 繼續執行defaultMode下的任務 - 例如這裡的defaultMode

大tips:這裡，如果使用RunLoop，滾動的時候雖然不執行defaultMode，但是滾動一結束，之前cell中的p_loadImgeWithIndexPath就會全部再被呼叫，導致類似YYWebImage的效果，其實也是不滿足需求,

  • 提示會被呼叫的程式碼如下:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    //p_loadImgeWithIndexPath一進入`NSDefaultRunLoopMode`就會執行
    [self performSelector:@selector(p_loadImgeWithIndexPath:)
               withObject:indexPath
               afterDelay:0.0
                  inModes:@[NSDefaultRunLoopMode]];
}
複製程式碼

runloopDemo.gif

效果如上

  • 滾動的時候不載入圖片,滾動結束載入圖片-滿足
  • 滾動結束，之前滾動過程中的cell會載入圖片 => 不滿足需求

版本回滾到Runloop之前 - git reset --hard runloop之前

解決: 需求2. 頁面跳轉的時候，取消當前頁面的圖片載入請求；


- (void)p_loadImgeWithIndexPath:(NSIndexPath *)indexPath{
    
    DemoModel *model = self.datas[indexPath.row];
    
    //儲存當前正在下載的操作
    ImageDownload *manager = self.imageLoadDic[indexPath];
    if (!manager) {
        
        manager = [ImageDownload new];
        //開始載入-儲存到當前下載操作字典中
        [self.imageLoadDic setObject:manager forKey:indexPath];
    }
    
    [manager loadImageWithModel:model success:^{
        //主執行緒重新整理UI
        dispatch_async(dispatch_get_main_queue(), ^{
            UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
            cell.imageView.image = model.iconImage;
        });
        
        //載入成功-從儲存的當前下載操作字典中移除
        [self.imageLoadDic removeObjectForKey:indexPath];
    }];
}

- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
  
    NSArray *loadImageManagers = [self.imageLoadDic allValues];
    //當前圖片下載操作全部取消
    [loadImageManagers makeObjectsPerformSelector:@selector(cancelLoadImage)];
}


@implementation ImageDownload
- (void)cancelLoadImage{
    [_task cancel];
}
@end
複製程式碼

思路:

  1. 建立一個可變字典，以indexPath:manager的格式，將當前的圖片下載操作存起來
  2. 每次下載之前，將當前下載執行緒存入，下載成功後，將該執行緒移除
  3. 在viewWillDisappear的時候,取出當前執行緒字典中的所有執行緒物件，遍歷進行cancel操作，完成需求

話外篇:面試題贈送

最近網上各種網際網路公司裁員資訊鋪天蓋地，甚至包括各種一線公司 ( X東 X乎 都扛不住了嗎-。-)iOS本來就是提前進入寒冬，iOS小白們可以嘗試思考下這個問題

問：UITableView的圓角效能優化如何實現

答:

  1. 讓伺服器直接傳圓角圖片；
  2. 貝塞爾切割控制元件layer；
  3. YYWebImage為例，可以先下載圖片，再對圖片進行圓角處理，再設定到cell上顯示

問：YYWebImage 如何設定圓角? 在下載完成的回撥中?如果你在下載完成的時候再切割，此時 YYWebImage 快取中的圖片是初始圖片，還是圓角圖片?(終於等到3了！！)

答: 如果是下載完，在回撥中進行切割圓角的處理，其實快取的圖片是原圖，等於每次取的時候，快取中取出來的都是矩形圖片，每次set都得做切割操作；


問: 那是否有解決辦法?

答：其實是有的，簡單來說YYWebImage 可以拆分成兩部分，預設情況下，我們拿到的回撥，是走了 download && cache的流程了，這裡我們多做一步，取出cache中該url路徑對應的圖片，進行圓角切割，再儲存到 cache中，就能保證以後每次拿到的就都是cacha中已經裁切好的圓角圖片

詳情可見：

NSString *path = [[UIApplication sharedApplication].cachesPath stringByAppendingPathComponent:@"weibo.avatar"];
YYImageCache *cache = [[YYImageCache alloc] initWithPath:path];
manager = [[YYWebImageManager alloc] initWithCache:cache queue:[YYWebImageManager sharedManager].queue];
manager.sharedTransformBlock = ^(UIImage *image, NSURL *url) {
    if (!image) return image;
    return [image imageByRoundCornerRadius:100]; // a large value
};
複製程式碼

SDWebImage同理，它有暴露了一個方法出來，可以直接設定儲存圖片到磁碟中，無需修改原始碼

“winner is coming”,如果面試正好遇到以上問題的，請叫我雷鋒~ 衷心希望各位iOS小夥伴門能熬過這個冬天？


Demo原始碼

參考資料

iOS 保持介面流暢的技巧

VVeboTableViewDemo

YYKitDemo

UIScrollView 實踐經驗

相關文章