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

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

官方實例工程運行效果

先簡單總結(jié)一下這個方法思路就是:在tableView還在滾動未停止的狀態(tài)下,不發(fā)起網(wǎng)絡(luò)請求去加載圖片。只有在tableView滾動停止了才會去發(fā)起網(wǎng)絡(luò)請求加載當(dāng)前可見的cell里面的圖片,當(dāng)然如果這個圖片是已經(jīng)加載過的那也就不用再發(fā)起網(wǎng)絡(luò)請求了。

其實大家之前在tableView的cell加載url image的時候肯定都有使用SDWebImage或者其他‘遠程圖片子線程加載’庫或方法,這些庫或方法都會在子線程去下載指定url的圖片資源,下載完成再回主線程刷新界面。這已經(jīng)能夠?qū)⑾鄬臅r的圖片網(wǎng)絡(luò)請求都放到子線程去做,不要影響主線程刷新界面。

而現(xiàn)在要介紹的圖片懶加載的方式就是在此基礎(chǔ)上更加優(yōu)化一步,你想一想如果我的tableview里有很多行數(shù)據(jù),在過高速滾動的時候系統(tǒng)會‘瘋狂’調(diào)用UITableViewDataSource那些方法,我們就瘋狂地在子線程發(fā)起一大堆圖片網(wǎng)絡(luò)請求,雖然說是在子線程里,但是一下加入大量的請求道子線程對性能多少還是會有點影響,另外用戶在滾動的時候也說明用戶對當(dāng)前顯示行的內(nèi)容不感興趣,所以也沒有必要去發(fā)起請求浪費用戶流量。只有當(dāng)用戶停止?jié)L動了才去請求當(dāng)前顯示行的圖片資源。

工程講解

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

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

@property (nonatomic, strong) NSArray *entries;

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

每一行的模型數(shù)據(jù)是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

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

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
  UITableViewCell *cell = nil;
  
  //計算當(dāng)前數(shù)據(jù)模型的數(shù)組entries的數(shù)量
  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對象的模型數(shù)據(jù)
          AppRecord *appRecord = (self.entries)[indexPath.row];
          
          //將數(shù)據(jù)文字傳給cell的Label顯示
          cell.textLabel.text = appRecord.appName;
          cell.detailTextLabel.text = appRecord.artist;
          
          //判斷當(dāng)前模型數(shù)據(jù)是否已經(jīng)有圖片對象了(即判斷是否這個數(shù)據(jù)的圖片已經(jīng)請求過了)
          if (!appRecord.appIcon)
          {
              //判斷當(dāng)前tableView是否在滾動中(這個方法里最重要的一句判斷)
              if (self.tableView.dragging == NO && 
                  self.tableView.decelerating == NO) 
             {
                  //如果tableView又未再滾動中,即在停止住狀態(tài)下則調(diào)用開始下載圖片的方
                  [self startIconDownload:appRecord forIndexPath:indexPath];
              }
              //不管tableView是否在滾動中,是否要去下載圖片,都先將本地的默認占位圖顯示上去
              cell.imageView.image = [UIImage imageNamed:@"Placeholder.png"];                
          }
          else
          {
            //如果這個數(shù)據(jù)的圖片已經(jīng)請求過了,那么直接顯示圖片即可
             cell.imageView.image = appRecord.appIcon;
          }
      }
  }
    
    return cell;
}

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

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

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

    //將當(dāng)前位置的數(shù)據(jù)模型傳給IconDownloader
    //IconDownloader內(nèi)部一會就會根據(jù)這個模型對象的圖片url地址去下載
    iconDownloader.appRecord = appRecord;

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

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

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

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

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

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

可以看到這個兩個代理方法很簡單,我們就是為了定位到tableView停止?jié)L動的那一刻,然后就簡單調(diào)用了加載當(dāng)前顯示行圖片的方法。

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

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

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容