UITableView 滑動優(yōu)化

下面的情況或操作會引發(fā)離屏渲染:

設置透明(alpha)屬性
為圖層設置遮罩(layer.mask)
將圖層的layer.masksToBounds / view.clipsToBounds屬性設置為true
將圖層layer.allowsGroupOpacity屬性設置為YES和layer.opacity小于1.0
為圖層設置陰影(layer.shadow *)。
為圖層設置layer.shouldRasterize=true
具有l(wèi)ayer.cornerRadius,layer.edgeAntialiasingMask檐什,layer.allowsEdgeAntialiasing的圖層
文本(任何種類痪蝇,包括UILabel,CATextLayer喻旷,Core Text等)使用CGContext在drawRect :方法中繪制大部分情況下會導致離屏渲染生逸,甚至僅僅是一個空的實現
iOS 9.0 之前UIimageView跟UIButton設置圓角都會觸發(fā)離屏渲染。
iOS 9.0 之后UIButton設置圓角會觸發(fā)離屏渲染且预,而UIImageView里png圖片設置圓角不會觸發(fā)離屏渲染了槽袄,如果設置其他陰影效果之類的還是會觸發(fā)離屏渲染的。

常用的幾個優(yōu)化

1锋谐、圓角優(yōu)化

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

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

優(yōu)化方案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];

優(yōu)化方案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渲染而言三热,其效率極高歧蕉,能大大優(yōu)化內存使用情況。
總的來說就是用CAShapeLayer的內存消耗少康铭,渲染速度快惯退,建議使用優(yōu)化方案2。

2从藤、shadow優(yōu)化

對于shadow催跪,如果圖層是個簡單的幾何圖形或者圓角圖形锁蠕,我們可以通過設置shadowPath來優(yōu)化性能,能大幅提高性能懊蒸。示例如下:

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)。既然離屏渲染這么不好骑丸,為什么我們還要強制開啟呢舌仍?當一個圖像混合了多個圖層,每次移動時通危,每一幀都要重新合成這些圖層铸豁,十分消耗性能。當我們開啟光柵化后菊碟,會在首次渲染的時候產生一個位圖緩存节芥,當再次使用時候就會復用這個緩存。但是如果圖層發(fā)生改變的時候就會重新產生位圖緩存逆害。所以這個功能一般不能用于UITableViewCell中头镊,cell的復用反而降低了性能。最好用于圖層較多的靜態(tài)內容的圖形魄幕。而且產生的位圖緩存的大小是有限制的相艇,一般是2.5個屏幕尺寸。在100ms之內不使用這個緩存纯陨,緩存也會被刪除坛芽。所以我們要根據使用場景而定。

3队丝、其他的一些優(yōu)化建議

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

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

作者:Tamp__
鏈接:http://www.reibang.com/p/13f097d9a1d4
來源:簡書
著作權歸作者所有霸株。商業(yè)轉載請聯系作者獲得授權,非商業(yè)轉載請注明出處集乔。
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末去件,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子扰路,更是在濱河造成了極大的恐慌尤溜,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,252評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件汗唱,死亡現場離奇詭異宫莱,居然都是意外死亡,警方通過查閱死者的電腦和手機哩罪,發(fā)現死者居然都...
    沈念sama閱讀 94,886評論 3 399
  • 文/潘曉璐 我一進店門授霸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人际插,你說我怎么就攤上這事碘耳。” “怎么了框弛?”我有些...
    開封第一講書人閱讀 168,814評論 0 361
  • 文/不壞的土叔 我叫張陵辛辨,是天一觀的道長。 經常有香客問我,道長斗搞,這世上最難降的妖魔是什么绞蹦? 我笑而不...
    開封第一講書人閱讀 59,869評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮榜旦,結果婚禮上幽七,老公的妹妹穿的比我還像新娘。我一直安慰自己溅呢,他們只是感情好澡屡,可當我...
    茶點故事閱讀 68,888評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著咐旧,像睡著了一般驶鹉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上铣墨,一...
    開封第一講書人閱讀 52,475評論 1 312
  • 那天室埋,我揣著相機與錄音,去河邊找鬼伊约。 笑死姚淆,一個胖子當著我的面吹牛,可吹牛的內容都是我干的屡律。 我是一名探鬼主播腌逢,決...
    沈念sama閱讀 41,010評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼超埋!你這毒婦竟也來了搏讶?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,924評論 0 277
  • 序言:老撾萬榮一對情侶失蹤霍殴,失蹤者是張志新(化名)和其女友劉穎媒惕,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體来庭,經...
    沈念sama閱讀 46,469評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡妒蔚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,552評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了巾腕。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片面睛。...
    茶點故事閱讀 40,680評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖尊搬,靈堂內的尸體忽然破棺而出叁鉴,到底是詐尸還是另有隱情,我是刑警寧澤佛寿,帶...
    沈念sama閱讀 36,362評論 5 351
  • 正文 年R本政府宣布幌墓,位于F島的核電站但壮,受9級特大地震影響,放射性物質發(fā)生泄漏常侣。R本人自食惡果不足惜蜡饵,卻給世界環(huán)境...
    茶點故事閱讀 42,037評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望胳施。 院中可真熱鬧溯祸,春花似錦、人聲如沸舞肆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽椿胯。三九已至筷登,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間哩盲,已是汗流浹背前方。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留廉油,地道東北人惠险。 一個月前我還...
    沈念sama閱讀 49,099評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像娱两,于是被迫代替她去往敵國和親莺匠。 傳聞我的和親對象是個殘疾皇子金吗,可洞房花燭夜當晚...
    茶點故事閱讀 45,691評論 2 361

推薦閱讀更多精彩內容