iOS UITabelView性能優化之遠程圖片懶加載(簡單講解Apple官方Demo)

我們都知道iOS開發時UITabelView是使用頻率非常高的一個控件,圍繞它的性能優化也有很多方法,這里先介紹其中一個優化的點,蘋果官方也對這種優化方法給出了一個示例工程,大家也可以先下載下來看看效果:下載地址

官方實例工程運行效果

先簡單總結一下這個方法思路就是:在tableView還在滾動未停止的狀態下,不發起網絡請求去加載圖片。只有在tableView滾動停止了才會去發起網絡請求加載當前可見的cell里面的圖片,當然如果這個圖片是已經加載過的那也就不用再發起網絡請求了。

其實大家之前在tableView的cell加載url image的時候肯定都有使用SDWebImage或者其他‘遠程圖片子線程加載’庫或方法,這些庫或方法都會在子線程去下載指定url的圖片資源,下載完成再回主線程刷新界面。這已經能夠將相對耗時的圖片網絡請求都放到子線程去做,不要影響主線程刷新界面。

而現在要介紹的圖片懶加載的方式就是在此基礎上更加優化一步,你想一想如果我的tableview里有很多行數據,在過高速滾動的時候系統會‘瘋狂’調用UITableViewDataSource那些方法,我們就瘋狂地在子線程發起一大堆圖片網絡請求,雖然說是在子線程里,但是一下加入大量的請求道子線程對性能多少還是會有點影響,另外用戶在滾動的時候也說明用戶對當前顯示行的內容不感興趣,所以也沒有必要去發起請求浪費用戶流量。只有當用戶停止滾動了才去請求當前顯示行的圖片資源。

工程講解

接下來我們就用上面提到的蘋果官方示例工程來簡單解釋一下這個方法的實現過程。打開上面剛下載的LazyTableImages工程,直接進到RootViewController這個類去看就可以了。

RootViewController就是這個示例程序的主控制器,在RootViewController.h頭文件中定義了一個叫entries數組

@property (nonatomic, strong) NSArray *entries;

這個entries數組就放著tableview每一行row的模型數據,它是在AppDelegate的程序啟動時的方法里就發起的請求,請求回來之后就將數據轉模型然后傳給這個Controller。

每一行的模型數據是AppRecord類示例,AppRecord類屬性如下:

@interface AppRecord : NSObject
@property (nonatomic, strong) NSString *appName;
@property (nonatomic, strong) UIImage *appIcon;
@property (nonatomic, strong) NSString *artist;
@property (nonatomic, strong) NSString *imageURLString;
@property (nonatomic, strong) NSString *appURLString;
@end

剛請求回來的時候只有這行數據圖片的url地址叫做imageURLString,當這個圖片被請求回來了就將圖片對象設置給appIcon屬性里,下次再顯示這個行時候看到有圖片對象就不用請求了。

好的,現在就將目標放到最重要的幾個tableView的方法上去,先看到最主要cellForRowAtIndexPath方法,這個方法大家都知道在tableView滾動時候系統會瘋狂的調用,讓你返回要顯示的cell對象給他。請看下面方法和注解,只要重點看那個if else的else里面的代碼和注釋就可以了,這個if else只是用來判斷模型數據是否請求回來了,沒有則顯示一個正在loading的cell

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
  UITableViewCell *cell = nil;
  
  //計算當前數據模型的數組entries的數量
  NSUInteger nodeCount = self.entries.count;
    
  if (nodeCount == 0 && indexPath.row == 0) {
      cell = [tableView dequeueReusableCellWithIdentifier:PlaceholderCellIdentifier forIndexPath:indexPath];
  } else {
      //重點是這個else后面的!!!!!!!!!!!!!!!
      cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

      if (nodeCount > 0)
      {
          //取出在這個位置cell對象的模型數據
          AppRecord *appRecord = (self.entries)[indexPath.row];
          
          //將數據文字傳給cell的Label顯示
          cell.textLabel.text = appRecord.appName;
          cell.detailTextLabel.text = appRecord.artist;
          
          //判斷當前模型數據是否已經有圖片對象了(即判斷是否這個數據的圖片已經請求過了)
          if (!appRecord.appIcon)
          {
              //判斷當前tableView是否在滾動中(這個方法里最重要的一句判斷)
              if (self.tableView.dragging == NO && 
                  self.tableView.decelerating == NO) 
             {
                  //如果tableView又未再滾動中,即在停止住狀態下則調用開始下載圖片的方
                  [self startIconDownload:appRecord forIndexPath:indexPath];
              }
              //不管tableView是否在滾動中,是否要去下載圖片,都先將本地的默認占位圖顯示上去
              cell.imageView.image = [UIImage imageNamed:@"Placeholder.png"];                
          }
          else
          {
            //如果這個數據的圖片已經請求過了,那么直接顯示圖片即可
             cell.imageView.image = appRecord.appIcon;
          }
      }
  }
    
    return cell;
}

好的,看完了這個方法我們就去看看在上面這個方法里調用的那個開始下載圖片的方法是怎么實現的,請看下面方法和注解:

- (void)startIconDownload:(AppRecord *)appRecord forIndexPath:(NSIndexPath *)indexPath
{
  //控制器有一個imageDownloadsInProgress的字典屬性,用來保存對應indexPath位置的IconDownloader(圖片下載器)對象
  //先判斷是否已經有當前indexPath的圖片下載器對象,如果有則說明這個位置之前已經開始了下載動作,不用重復開始了
  //IconDownloader是這個工程自定義的下載圖片的類,你可以去看看它的實現,也可以不用管
  IconDownloader *iconDownloader = (self.imageDownloadsInProgress)[indexPath];

  if (iconDownloader == nil) 
  {
    //如果沒有則創建一個IconDownloader
    iconDownloader = [[IconDownloader alloc] init];

    //將當前位置的數據模型傳給IconDownloader
    //IconDownloader內部一會就會根據這個模型對象的圖片url地址去下載
    iconDownloader.appRecord = appRecord;

    //設置IconDownloader下載完成后的回調block
    [iconDownloader setCompletionHandler:^{
      
       //先取到對應indexPath位置的cell
        UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
        
        //讓cell顯示模型數據新下載到的圖片對象
        //appRecord的appIcon圖片對象的賦值在IconDownloader內部就自動完成了
        cell.imageView.image = appRecord.appIcon;
      
        //將這個完成下載的IconDownloader從控制器的imageDownloadsInProgress字典里移除掉
        [self.imageDownloadsInProgress removeObjectForKey:indexPath];
      
    }];
    //將這個準備開始下載圖片的IconDownloader加入到控制器的imageDownloadsInProgress字典里
    (self.imageDownloadsInProgress)[indexPath] = iconDownloader;
    //開始下載圖片
    [iconDownloader startDownload];  
  }
}

如果你覺得這樣子就完工了那就錯了!!!

因為根據現在這兩個方法的實現還只能讓tableView在滾動的時候不發起圖片加載請求,還不能讓tableView停止時候去加載當前顯示行的圖片,現在我們要想想在哪里可以知道tableView停止了呢?

肯定是UIScrollViewDelegate方法啦!UITableView是繼承UIScrollView的嘛。請看下面兩個代理方法實現和注釋:

//用戶停止拖動了scrollView(手指結束拖拽動作離開屏幕了),準備開始減速滾動時會調用
//由于慣性,用戶手指離開屏幕后還會繼續滾動一會,這個decelerate(減速)就是指這個后續的滾動狀態
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    //判斷是否已經停止減速了
    if (!decelerate)
    {
        //調用加載當前顯示行圖片方法
        [self loadImagesForOnscreenRows];
    }
}

//scrollView停止減速后會調用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
     //調用加載當前顯示行圖片方法
    [self loadImagesForOnscreenRows];
}

可以看到這個兩個代理方法很簡單,我們就是為了定位到tableView停止滾動的那一刻,然后就簡單調用了加載當前顯示行圖片的方法。

接下來再看最后一個方法和注釋,就是加載當前顯示行圖片:

- (void)loadImagesForOnscreenRows
{
    //判斷模型數據是否為空,為空說明模型數據都還沒請求回來,也就不畢繼續加載圖片動作
    if (self.entries.count > 0)
    {
        //獲取當前屏幕上可以見所有行對應的indexPath位置組成的數組
        NSArray *visiblePaths = [self.tableView indexPathsForVisibleRows];
        //遍歷所有位置
        for (NSIndexPath *indexPath in visiblePaths)
        {
            //取到對應位置的模型數據
            AppRecord *appRecord = (self.entries)[indexPath.row];
          
            //判斷這個模型數據是否已經有圖片對象了,如果有說明已經下載過了
            if (!appRecord.appIcon)
            {
                //如果還未下載過則去開始下載對應行的圖片
                [self startIconDownload:appRecord forIndexPath:indexPath];
            }
        }
    }
}

至此這個示例工程最主要的幾個方法就講解完了,大家應該對這個官方建議的優化方法理解了吧。當然tableView還有很多其他值得優化的地方和方法,不過這個其實也要具體情況具體分析,不用為了優化而優化。

這個內容來加載的方法也不一定要局限于UITableView或圖片,我覺得很多用了UIScrollView復雜界面都可以借鑒使用這個方法

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,466評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,251評論 4 61
  • 總會有很多人對我們說過這樣一句話,你還是個孩子。是啊,可能在父母、親人、或者年長我們的朋友眼里,我們還是個為長大成...
    sw沐晨閱讀 359評論 0 0
  • 雖早已入冬,乍寒還暖。天空罩著一層厚厚的迷霧,密不透氣。不冷,也不暖心。厚重的大氣層,壓得人有點窒息。陰云靄靄,少...
    六六毛閱讀 283評論 0 0
  • 大結局了,我只想說挺不錯的,好久沒有看國產劇了。叫好的人很多,批評的也不少。 比如那些批判說小時代電視劇版,三觀不...
    不叫鄭小某閱讀 510評論 0 49