UITableView優化

Eidesen發表於2016-01-13
UIView優化
UITableView優化的那些事兒
作為iOS開發，UITableView可能是平時我們打交道最多的UI控制元件之一，其重要性不言而喻。

關於TableView，我想最核心的就是UITableViewCell的重用機制了。

簡單來說呢就是當TableView滾動時，會調tableView:cellForRowAtIndexPath:這個方法，TableView只會建立螢幕內或者只比螢幕多一點點的cell，當滾動需要展現新的cell的時候，TableView首先會把已經移出螢幕外的cell放入到快取池中去，然後再從快取池中取出新的cell用來展示，當快取池中沒有的時候，則會建立新的cell。但是cell可能不僅僅是一種，我們怎麼來辨別我們需要的cell呢？蘋果公司已經為我們做好了一切，我們只需要簡單地設定一個identifier即可，TableView便可自動根據identifier從快取池中去出相應cell出來複用。這樣就極大的節省了記憶體的開銷。 

知道cell的複用原理後，我們再來看看TableView的回撥方法。我們知道，TableView繼承自UIScrollView,必須先確定它的contentSize和每個cell的位置，這樣才能正確的放置每個cell。所以在建立或者複用cell之前，tableView會呼叫tableView:heightForRowAtIndexPath:來確定contentSize和每個cell的高度，之後再呼叫tableView:cellForRowAtIndexPath:顯示相應的cell。然而此舉對於那些成百上千不定高的cell，計算高度會相當消耗效能。

所以首先我們圍繞cell來看看TableView如何進行優化。

1.cell複用

這個很簡單，只要註冊一下，便會自動複用

複製程式碼
    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString *Identifier = @"cell";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
        if (!cell) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
        }
        
        return cell;
    }
複製程式碼
這裡說一句，有很多人會在這裡給cell進行賦值操作，繫結資料，但是最近看了一篇文章https://medium.com/ios-os-x-development/perfect-smooth-scrolling-in-uitableviews-fd609d5275a5#.373u9fh4p，裡面說到不要在這個方法中進行資料繫結，因為TableView會為每個cell呼叫一次這個方法，它應該快速執行，我們應該快速的返回cell重用例項。我們可以在tableView:willDisplayCell:forRowAtIndexPath:這個方法中進行資料繫結。

2.cell的高度計算

這邊我們分為兩種cell，一種是定高的cell，另外一種是動態高度的cell

a.定高的cell，應該採用如下方式：

self.tableView.rowHeight = 88;
這個方法指定了所有cell高度都是88的tableview，rowHeight預設的值是44，所以一個空的TableView會顯示成這個樣子。對於定高cell，直接採用上面方式給定高度，不需要實現tableView:heightForRowAtIndexPath:以節省不必要的計算和開銷。

b.動態高度的cell

我們需要實現它的代理，來給出高度：

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    // return xxx
}
這個方法給出後，上面的rowHeight的設定將會變成無效。在這個方法中，我們需要提高cell高度的計算效率，來節省時間。

需要說明的是自從iOS8之後有了self-sizing cell的概念，cell可以自己算出高度，但目前市面上的公司最低支援iOS8，能用上這個方法可能還有好久。

除了提高cell高度的計算效率之外，對於已經計算出的高度，我們需要進行快取，對於已經計算過的高度，沒有必要進行計算第二次。

此外，具體對於如何優化cell高度計算，何時快取cell高度，這篇部落格給出了非常好的說明，強烈推薦有興趣的深讀一下。http://blog.sunnyxx.com/2015/05/17/cell-height-calculation/

3.渲染 

為了保證TableView的流暢，當快速滑動的時候，cell必須被快速的渲染出來。所以cell渲染的速度必須快。如何提高cell的渲染速度呢？

a.當有影像時，預渲染影像，在bitmap context先將其畫一遍，匯出成UIImage物件,然後再繪製到螢幕,這會大大提高渲染速度。具體做法可以參考：《利用預渲染加速顯示iOS影像》

b.渲染最好時的操作之一就是混合(blending)了,所以我們不要使用透明背景，將cell的opaque值設為Yes，背景色不要使用clearColor，儘量不要使用陰影漸變等

c.由於混合操作是使用GPU來執行，我們可以用CPU來渲染，這樣混合操作就不再執行。可以在UIView的drawRect方法中自定義繪製，具體可參考：http://southpeak.github.io/blog/2015/12/20/perfect-smooth-scrolling-in-uitableviews/

4.減少檢視的數目

我們在cell上新增系統控制元件的時候，實際上系統都會呼叫底層的介面進行繪製，大量新增控制元件時，會消耗很大的資源並且也會影響渲染的效能。當使用預設的UITableViewCell並且在它的ContentView上面新增控制元件時會相當消耗效能。所以目前最佳的方法還是繼承UITableViewCell，並重寫drawRect方法。

5.減少多餘的繪製工作

在實現drawRect方法的時候，它的引數rect就是我們需要繪製的區域,在rect範圍之外的區域我們不需要進行繪製，否則會消耗相當大的資源

6.不要給cell動態新增subView

在初始化cell的時候就新增好，然後根據需要來設定hide屬性顯示和隱藏

7.非同步化UI，不要阻塞主執行緒

我們時常會看到這樣一個現象，就是載入時整個頁面卡住不動，怎麼點都沒用，彷彿當機了一般。原因是主執行緒被阻塞了。所以對於網路資料的請求或者圖片的載入，我們可以開啟多執行緒，非同步話操作

8.滑動時按需載入對應的內容

複製程式碼
//按需載入 - 如果目標行與當前行相差超過指定行數，只在目標滾動範圍的前後指定3行載入。
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    NSIndexPath *ip = [self indexPathForRowAtPoint:CGPointMake(0, targetContentOffset->y)];
    NSIndexPath *cip = [[self indexPathsForVisibleRows] firstObject];
    NSInteger skipCount = 8;
    if (labs(cip.row-ip.row)>skipCount) {
        NSArray *temp = [self indexPathsForRowsInRect:CGRectMake(0, targetContentOffset->y, self.width, self.height)];
        NSMutableArray *arr = [NSMutableArray arrayWithArray:temp];
        if (velocity.y<0) {            
 NSIndexPath *indexPath = [temp lastObject];           
  if (indexPath.row+33) {                 
[arr addObject:[NSIndexPath indexPathForRow:indexPath.row-3 inSection:0]];
[arr addObject:[NSIndexPath indexPathForRow:indexPath.row-2 inSection:0]];                 [arr addObject:[NSIndexPath indexPathForRow:indexPath.row-1 inSection:0]];             }         }         [needLoadArr addObjectsFromArray:arr];     } }
複製程式碼
記得在tableView:cellForRowAtIndexPath:方法中加入判斷：

if (needLoadArr.count>0&&[needLoadArr indexOfObject:indexPath]==NSNotFound) {
    [cell clear];
    return;
}
滑動很快時，只載入目標範圍內的cell，這樣按需載入（配合SDWebImage），極大提高流暢度。

最後，對於TableView的優化還有很多方面沒有提及，希望大家多多交流～

參考文章

https://medium.com/ios-os-x-development/perfect-smooth-scrolling-in-uitableviews-fd609d5275a5#.373u9fh4p

http://blog.sunnyxx.com/2015/05/17/cell-height-calculation/ 

http://southpeak.github.io/blog/2015/12/20/perfect-smooth-scrolling-in-uitableviews/

相關文章