iOS列表滑動流暢度的優(yōu)化

性能優(yōu)化是一件沒有盡頭的事情,只要你想寥掐,就能找到無數(shù)種方法。優(yōu)化性能的同時你會對控件的理解更加透徹磷蜀,一些平時看不到的屬性召耘、方法也都會了解到,這是個很好的學(xué)習(xí)方法褐隆。

優(yōu)化前查了很多資料污它,看過很多前輩們的文章,這里把我用的方法總結(jié)一下:

  1. 從數(shù)據(jù)源頭開始庶弃,從服務(wù)器獲取數(shù)據(jù)后衫贬,通常會做很多的計算、數(shù)據(jù)轉(zhuǎn)化歇攻,例如在UI上顯示性別固惯、富文本、字符串的拼接缴守、計算高度等等葬毫。這些過程都放在后臺子線程來做镇辉,在后臺子線程處理完數(shù)據(jù)之后,在丟給cell贴捡。盡量在cell加載過程中產(chǎn)生計算忽肛,如果可以也要放在后臺子線程中,不要堵塞主線程烂斋。
  2. 設(shè)計好試圖布局屹逛,在保證需求實現(xiàn)和靈活性的情況下減少視圖層次。對于UI控件的選用則是夠用就好源祈,能用簡單的就用簡單的煎源,例如只是顯示一張圖片,沒有事件響應(yīng)的話就直接用layer就好了香缺,文本顯示用CATextLayer手销,比UILabel渲染快很多,更甚還可以用像AsyncDisplayKit這樣的異步渲染庫图张。缺點就是開發(fā)時間锋拖、難度加大,需要權(quán)衡利弊祸轮。
  3. 這里有一些很基礎(chǔ)的問題兽埃,例如:
  • 控件要盡量設(shè)置成不透明的,很多人寫一個ImageView或Label時适袜,不會去設(shè)置背景顏色柄错,backgroundColor默認(rèn)是透明的,大部分情況下都會發(fā)生圖層混合苦酱。
  • 顯示圖片使用正確的大小售貌、格式。這點很容易理解疫萤,圖片大小和顯示大小不一樣颂跨,cpu會替我們計算去適應(yīng)大小,這會額外增加cpu的負(fù)擔(dān)扯饶。圖片格式一般有UI設(shè)計師的情況下不太需要我們?nèi)リP(guān)心恒削,需要注意的是切圖不要含有alpha通道。
  • 為什么設(shè)置陰影和圓角有可能影響滑動時流暢度尾序?
  • shouldRasterize和離屏渲染的關(guān)系是什么钓丰,何時應(yīng)該使用?

接著實際操作每币,打開Instrument->Core Animation斑粱,這個必須使用真機,點擊左上角的紅色圓圈就會開始錄制脯爪。

左邊記錄了實時的fps數(shù)值则北,右邊是調(diào)試選項

圖層混合

圖層混合的意思是說矿微,當(dāng)有兩個圖層一上一下,上層是藍色尚揣,下層是紅色涌矢,透明度都為50%,顯示效果是紫色快骗。如果上層藍色是不透明的娜庇,顯示效果為藍色。

在手機上方篮,當(dāng)兩個透明度小于1的圖層發(fā)生重疊時名秀,GPU會去計算最終顯示的顏色是什么。但是當(dāng)上面的圖層透明度為1時藕溅,GPU不用關(guān)心下面的圖層是什么顏色匕得,直接顯示上面涂層的顏色就好了。實際中圖層數(shù)會更多巾表,計算量也會更大汁掠。

第一個調(diào)試選項"Color Blended Layers"正是用于檢測哪里發(fā)生了圖層混合,并用紅色標(biāo)記出來集币。因此我們需要盡可能減少看到的紅色區(qū)域考阱。

這里會用到“opaque”屬性,該屬性為BOOL值鞠苟,UIView的默認(rèn)值是YES乞榨,但UIButton、UIImageView等子類的默認(rèn)值都是NO当娱。opaque表示當(dāng)前UIView是否不透明吃既,但是它不能決定UIView是不是不透明。比如你將opaque設(shè)為NO趾访,UIView還是可見的态秧。

有些人對opaque和hidden的作用有些迷糊董虱,這里解釋一下,
當(dāng)hidden值設(shè)為YES時:

  • 當(dāng)前的UIView和subview都會被隱藏扼鞋,而不管subview的hidden值為多少。
  • 當(dāng)前UIView會從響應(yīng)者鏈中移除愤诱,而響應(yīng)者鏈中的下一個會成為第一響應(yīng)者云头。

當(dāng)opaque值設(shè)為YES時:代表當(dāng)前試圖使不透明的,當(dāng)當(dāng)前視圖和子視圖發(fā)生重疊時淫半,GPU將不會做任何的計算合成溃槐,不需要考慮它下方的任何東西(因為都被它遮擋住了),而是簡單從這個層拷貝科吭。這節(jié)省了GPU相當(dāng)大的工作量昏滴。opaque屬性的是繪圖系統(tǒng)提供一個性能優(yōu)化開關(guān)猴鲫!

當(dāng)opaque屬性被設(shè)為YES時,GPU就不會再利用圖層顏色合成公式去合成真正的色值谣殊。因此拂共,如果opaque被設(shè)置成YES,而對應(yīng)UIView的alpha屬性不為1.0的時候姻几,就會有不可預(yù)料的情況發(fā)生宜狐。

對于UIImageView來說,不僅它自身需要是不透明的蛇捌,它的圖片也不能含有alpha通道抚恒。所以一定要和美工說不要給我含有alpha通道的切圖。

通過預(yù)覽->文件->導(dǎo)出络拌,在格式下有alpha選項俭驮,把鉤去掉,這樣導(dǎo)出的圖片就不含alpha通道了盒音。

還有上面說的backgroundColor屬性表鳍,如果不設(shè)置這個屬性,控件依然被認(rèn)為是透明的祥诽。所以一定要記得設(shè)置控件的backgroundColor譬圣。

這里要單獨說一下UILabel,當(dāng)UILabel的text包含中文時雄坪,設(shè)置背景色后依然會發(fā)生圖層混合厘熟。這是因為在iOS8以前,[[label layer] class]= CALayer维哈,從iOS8開始[[label layer] class]= _UILabelLayer绳姨,label背景色的四周多了一圈透明的邊,而這一圈透明的邊明顯超出了圖層的矩形區(qū)域阔挠,正是這透明的邊導(dǎo)致 label 的實際渲染區(qū)域要大于 label 的 size, 發(fā)生了圖層混合飘庄。解決方法有兩種,一種是使用label.layer.masksToBounds=YES , 讓 label 只會渲染她的實際 size 區(qū)域购撼,但masksToBounds和cornerRadius跪削、shadow等一起使用會產(chǎn)生離屏渲染。另一種是使用CATextLayer迂求。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末碾盐,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子揩局,更是在濱河造成了極大的恐慌毫玖,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異付枫,居然都是意外死亡烹玉,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門阐滩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來春霍,“玉大人,你說我怎么就攤上這事叶眉≈啡澹” “怎么了?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵衅疙,是天一觀的道長莲趣。 經(jīng)常有香客問我,道長饱溢,這世上最難降的妖魔是什么喧伞? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮绩郎,結(jié)果婚禮上潘鲫,老公的妹妹穿的比我還像新娘。我一直安慰自己肋杖,他們只是感情好溉仑,可當(dāng)我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著状植,像睡著了一般浊竟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上津畸,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天振定,我揣著相機與錄音,去河邊找鬼肉拓。 笑死后频,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的暖途。 我是一名探鬼主播卑惜,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼丧肴!你這毒婦竟也來了残揉?” 一聲冷哼從身側(cè)響起胧后,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤芋浮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體纸巷,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡镇草,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了瘤旨。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片梯啤。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖存哲,靈堂內(nèi)的尸體忽然破棺而出因宇,到底是詐尸還是另有隱情,我是刑警寧澤祟偷,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布察滑,位于F島的核電站,受9級特大地震影響修肠,放射性物質(zhì)發(fā)生泄漏贺辰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一嵌施、第九天 我趴在偏房一處隱蔽的房頂上張望饲化。 院中可真熱鬧,春花似錦吗伤、人聲如沸吃靠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽撩笆。三九已至,卻和暖如春缸浦,著一層夾襖步出監(jiān)牢的瞬間夕冲,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工裂逐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留歹鱼,地道東北人。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓卜高,卻偏偏與公主長得像弥姻,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子掺涛,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 1.最常用的就是cell的重用庭敦, 注冊重用標(biāo)識符它的原理是,根據(jù)cell高度和tableView大小薪缆,確定界面上能...
    樹下敲代碼的超人閱讀 4,878評論 4 26
  • Core Animation其實是一個令人誤解的命名秧廉。你可能認(rèn)為它只是用來做動畫的,但實際上它是從一個叫做Laye...
    小貓仔閱讀 3,715評論 1 4
  • 卷首語 歡迎來到 objc.io 的第三期! 這一期都是關(guān)于視圖層的疼电。當(dāng)然視圖層有很多方面嚼锄,我們需要把它們縮小到幾...
    評評分分閱讀 1,768評論 0 18
  • 書寫的很好,翻譯的也棒蔽豺!感謝譯者区丑,感謝感謝! iOS-Core-Animation-Advanced-Techni...
    錢噓噓閱讀 2,298評論 0 6
  • 舍友的鼾聲在夜里起伏 z先生修陡,你肯定睡了吧沧侥。對啊,我想你了魄鸦。就在這個孤獨的凌晨正什。 從十九歲到二十歲...
    愛夏1988閱讀 237評論 0 0