UITableView的復用機制以及性能優化

UITableView的復用機制

UITableView首先加載一屏幕(假設UITableView的大小是整個屏幕的大小)所需要的UITableViewCell,具體個數要根據每個cell的高度而定,總之肯定要鋪滿整個屏幕,更準確說當前加載的cell的高度要大于屏幕高度。然后你往上滑動,想要查看更多的內容,那么肯定需要一個新的cell放在已經存在內容的下邊。這時候先不去生成,而是先去UITableView自己的一個資源池里去獲取。這個資源池里放了已經生成的而且能用的cell。如果資源池是空的話才會主動生成一個新的cell。那么這個資源池里的cell又來自哪里呢?當你滑動時視圖是,位于最頂部的cell會相應的往上滑動,直到它徹底消失在屏幕上,消失的cell去了哪里呢?你肯定想到了,是的,它被UITableView放到資源池里了。其他cell也是這樣,只要一滑出屏幕就放入資源池。這樣,有進有出,總共需要大約一屏幕多一兩個的cell就夠了。相對于1000來說節省的資源就是指數級啊,完美解決了性能問題。

常用的代碼

//方法1
- (void)viewDidLoad { 
    [super viewDidLoad]; 
        // Setup table view. 
    self.myTableView.delegate = self;
    self.myTableView.dataSource = self;
   [self.myTableView registerClass:[MyTableViewCell class] forCellReuseIdentifier:@"MyTableViewCell"];
   //或者[UITableView registerNib:forCellReuseIdentifier:]方法
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
     static NSString *CellIdentifier = @"MyTableViewCell"; 
     UITableViewCell *cell = nil; 
     cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

    //do something
    return cell;
}
//方法2
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
    static NSString *CellIdentifier = @"UITableViewCell"; 
   UITableViewCell *cell = nil; 
   cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 
   if (!cell) { 
       cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
      //不要在這里設置cell的屬性
   } 
   //do something
   return cell;
}

注意這里- [UITableView registerClass:forCellReuseIdentifier:]- [UITableView registerNib:forCellReuseIdentifier:]這兩個方法一定不能用錯,否則就會報錯。
還有就是我注釋中說的不要在if里面設置cell的屬性,這就是因為它的復用機制,如果在那里設置了,你后面的cell因為是復用的前面的cell,所以不會執行if里面的代碼,就會導致你設置的屬性失效。

UITableView的優化

1、cell高度的計算

如果是固定高度,則直接設置self.tableView.rowHeight = 88;,不要重寫-(CGFloat)tableView:(UITableView *)tableViewheightForRowAtIndexPath:(NSIndexPath *)indexPath這個方法,重寫了這個方法后前面設置的rowHeight將會失效,并且每次顯示一個cell都會調用一次這個方法,所以重寫這個方法肯定沒有直接設置rowHeight效率高。
iOS8之后有了self-sizing cell的概念,cell可以自己算出高度,使用self-sizing cell需要滿足以下三個條件:

  • 使用Autolayout進行UI布局約束(要求cell.contentView的四條邊都與內部元素有約束關系)。
  • 指定TableView的estimatedRowHeight屬性的默認值,就是初始化的一個默認高度。
  • 指定TableView的rowHeight屬性為UITableViewAutomaticDimension。
- (void)viewDidload {
    self.myTableView.estimatedRowHeight = 44.0;
    self.myTableView.rowHeight = UITableViewAutomaticDimension;
}

除了提高cell高度的計算效率之外,對于已經計算出的高度,也可以進行緩存,對于已經計算過的高度,沒有必要進行計算第二次。

2、渲染

GPU渲染機制:

CPU 計算好顯示內容提交到 GPU,GPU 渲染完成后將渲染結果放入幀緩沖區,隨后視頻控制器會按照 VSync 信號逐行讀取幀緩沖區的數據,經過可能的數模轉換傳遞給顯示器顯示。

GPU屏幕渲染有以下兩種方式:
  • On-Screen Rendering
    意為當前屏幕渲染,指的是GPU的渲染操作是在當前用于顯示的屏幕緩沖區中進行。
  • Off-Screen Rendering
    意為離屏渲染,指的是GPU在當前屏幕緩沖區以外新開辟一個緩沖區進行渲染操作。
離屏渲染的代價

相比于當前屏幕渲染,離屏渲染的代價是很高的,主要體現在兩個方面:

  • 創建新緩沖區

要想進行離屏渲染,首先要創建一個新的緩沖區。

  • 上下文切換

離屏渲染的整個過程,需要多次切換上下文環境:先是從當前屏幕(On-Screen)切換到離屏(Off-Screen);等到離屏渲染結束以后,將離屏緩沖區的渲染結果顯示到屏幕上又需要將上下文環境從離屏切換到當前屏幕。而上下文環境的切換是要付出很大代價的。

總之:離屏渲染會付出很大的開銷,能避免離屏渲染盡量就不要離屏渲染

下面的情況或操作會引發離屏渲染:
  • 設置透明(alpha)屬性
  • 為圖層設置遮罩(layer.mask)
  • 將圖層的layer.masksToBounds / view.clipsToBounds屬性設置為true
  • 將圖層layer.allowsGroupOpacity屬性設置為YES和layer.opacity小于1.0
  • 為圖層設置陰影(layer.shadow *)。
  • 為圖層設置layer.shouldRasterize=true
  • 具有layer.cornerRadius,layer.edgeAntialiasingMask,layer.allowsEdgeAntialiasing的圖層
  • 文本(任何種類,包括UILabel,CATextLayer,Core Text等)使用CGContext在drawRect :方法中繪制大部分情況下會導致離屏渲染,甚至僅僅是一個空的實現

iOS 9.0 之前UIimageView跟UIButton設置圓角都會觸發離屏渲染。
iOS 9.0 之后UIButton設置圓角會觸發離屏渲染,而UIImageView里png圖片設置圓角不會觸發離屏渲染了,如果設置其他陰影效果之類的還是會觸發離屏渲染的。

常用的幾個優化
1、圓角優化

在APP開發中,圓角圖片還是經常出現的。如果一個界面中只有少量圓角圖片或許對性能沒有非常大的影響,但是當圓角圖片比較多的時候就會APP性能產生明顯的影響。
我們設置圓角一般通過如下方式:

imageView.layer.cornerRadius=CGFloat(10);
imageView.layer.masksToBounds=YES;

優化方案1:使用貝塞爾曲線UIBezierPath和Core Graphics框架畫出一個圓角

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)]; 
imageView.image = [UIImage imageNamed:@"myImg"]; 
//開始對imageView進行畫圖 
UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0); 
//使用貝塞爾曲線畫出一個圓形圖 
[[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width/2.0] addClip];
[imageView drawRect:imageView.bounds];
imageView.image = UIGraphicsGetImageFromCurrentImageContext(); 
//結束畫圖 
UIGraphicsEndImageContext();
[self.view addSubview:imageView];

優化方案2:使用CAShapeLayer和UIBezierPath設置圓角

UIImageView *imageView=[[UIImageView alloc]initWithFrame:CGRectMake(100,100,100,100)];
imageView.image=[UIImage imageNamed:@"myImg"];
UIBezierPath *maskPath=[UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:imageView.bounds.size];
CAShapeLayer *maskLayer=[[CAShapeLayer alloc]init];
//設置大小
maskLayer.frame=imageView.bounds;
//設置圖形樣子
maskLayer.path=maskPath.CGPath;
imageView.layer.mask=maskLayer;
[self.view addSubview:imageView];

對于方案2的解釋:

  • 使用CAShapeLayer(屬于CoreAnimation)與貝塞爾曲線可以實現不在view的drawRect(繼承于CoreGraphics走的是CPU,消耗的性能較大)方法中畫出一些想要的圖形
  • CAShapeLayer動畫渲染直接提交到手機的GPU當中,相較于view的drawRect方法使用CPU渲染而言,其效率極高,能大大優化內存使用情況。

總的來說就是用CAShapeLayer的內存消耗少,渲染速度快,建議使用優化方案2。

2、shadow優化

對于shadow,如果圖層是個簡單的幾何圖形或者圓角圖形,我們可以通過設置shadowPath來優化性能,能大幅提高性能。示例如下:

imageView.layer.shadowColor=[UIColor grayColor].CGColor;
imageView.layer.shadowOpacity=1.0;
imageView.layer.shadowRadius=2.0;
UIBezierPath *path=[UIBezierPath bezierPathWithRect:imageView.bounds];
imageView.layer.shadowPath=path.CGPath;

我們還可以通過設置shouldRasterize屬性值為YES來強制開啟離屏渲染。其實就是光柵化(Rasterization)。既然離屏渲染這么不好,為什么我們還要強制開啟呢?當一個圖像混合了多個圖層,每次移動時,每一幀都要重新合成這些圖層,十分消耗性能。當我們開啟光柵化后,會在首次渲染的時候產生一個位圖緩存,當再次使用時候就會復用這個緩存。但是如果圖層發生改變的時候就會重新產生位圖緩存。所以這個功能一般不能用于UITableViewCell中,cell的復用反而降低了性能。最好用于圖層較多的靜態內容的圖形。而且產生的位圖緩存的大小是有限制的,一般是2.5個屏幕尺寸。在100ms之內不使用這個緩存,緩存也會被刪除。所以我們要根據使用場景而定。

3、其他的一些優化建議
  • 當我們需要圓角效果時,可以使用一張中間透明圖片蒙上去
  • 使用ShadowPath指定layer陰影效果路徑
  • 使用異步進行layer渲染(Facebook開源的異步繪制框架AsyncDisplayKit)
  • 設置layer的opaque值為YES,減少復雜圖層合成(如果opaque設置NO,那么Alpha應該小于1)
  • 盡量使用不包含透明(alpha)通道的圖片資源
  • 盡量設置layer的大小值為整形值
  • 直接讓美工把圖片切成圓角進行顯示,這是效率最高的一種方案
  • 很多情況下用戶上傳圖片進行顯示,可以讓服務端處理圓角
  • 使用代碼手動生成圓角Image設置到要顯示的View上,利用UIBezierPath(CoreGraphics框架)畫出來圓角圖片

3、其它

  • 1) 減少視圖的數目:
    我們在cell上添加系統控件的時候,實際上系統都會調用底層的接口進行繪制,大量添加控件時,會消耗很大的資源并且也會影響渲染的性能。當使用默認的UITableViewCell并且在它的ContentView上面添加控件時會相當消耗性能。所以目前最佳的方法還是繼承UITableViewCell,并重寫drawRect方法,并且這里的繪制過程可以通過多線程異步繪制。
  • 2)減少多余的繪制操作:
    在實現drawRect方法的時候,它的參數rect就是我們需要繪制的區域,在rect范圍之外的區域我們不需要進行繪制,否則會消耗相當大的資源。
  • 3)不要給cell動態添加subView:
    在初始化cell的時候就將所有需要展示的添加完畢,然后根據需要來設置hide屬性顯示和隱藏。
  • 4)滑動時按需加載對應的內容:
    滑動很快時,只加載目標范圍內的cell,這樣按需加載(配合SDWebImage),極大提高流暢度,但是這樣在滑動過程中就會暫時顯示空白,這就需要在性能和用戶體驗中權衡了。

最后安利一篇YY大神的博客
YY大神:iOS 保持界面流暢的技巧.

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,818評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,185評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,656評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,647評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,446評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,951評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,041評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,189評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,718評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,602評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,800評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,316評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,045評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,419評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,671評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,420評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,755評論 2 371

推薦閱讀更多精彩內容