iOS繪制與渲染--性能優(yōu)化

GPU和CPU優(yōu)化

CPU和GPU任何一個(gè)出現(xiàn)操作延遲,都會(huì)導(dǎo)致在下一個(gè)垂直同步信號(hào)(VSync)到來時(shí)蹄衷,無法準(zhǔn)備好幀數(shù)據(jù)提交到幀緩沖區(qū)吆录,出現(xiàn)頁面卡頓現(xiàn)象虎忌。因此渲染優(yōu)化要權(quán)衡CPU和GPU的壓力归粉。

CPU優(yōu)化

  • 對(duì)象操作

    1)對(duì)象創(chuàng)建
    對(duì)象的創(chuàng)建會(huì)分配內(nèi)存椿疗、調(diào)整屬性、甚至還有讀取文件等操作糠悼,比較消耗 CPU 資源届榄。盡量用輕量的對(duì)象代替重量的對(duì)象,可以對(duì)性能有所優(yōu)化倔喂。比如 CALayer 比 UIView 要輕量許多铝条,那么不需要響應(yīng)觸摸事件的控件,用 CALayer 顯示會(huì)更加合適席噩。如果對(duì)象不涉及 UI 操作班缰,則盡量放到后臺(tái)線程去創(chuàng)建,但可惜的是包含有 CALayer 的控件悼枢,都只能在主線程創(chuàng)建和操作埠忘。通過 Storyboard 創(chuàng)建視圖對(duì)象時(shí),其資源消耗會(huì)比直接通過代碼創(chuàng)建對(duì)象要大非常多馒索,在性能敏感的界面里莹妒,Storyboard 并不是一個(gè)好的技術(shù)選擇。
    盡量推遲對(duì)象創(chuàng)建的時(shí)間绰上,并把對(duì)象的創(chuàng)建分散到多個(gè)任務(wù)中去旨怠。盡管這實(shí)現(xiàn)起來比較麻煩,并且?guī)淼膬?yōu)勢(shì)并不多蜈块,但如果有能力做鉴腻,還是要盡量嘗試一下。如果對(duì)象可以復(fù)用百揭,并且復(fù)用的代價(jià)比釋放爽哎、創(chuàng)建新對(duì)象要小,那么這類對(duì)象應(yīng)當(dāng)盡量放到一個(gè)緩存池里復(fù)用器一。

    1. 對(duì)象調(diào)整
      對(duì)象的調(diào)整也經(jīng)常是消耗 CPU 資源的地方倦青。這里特別說一下 CALayer:CALayer 內(nèi)部并沒有屬性,當(dāng)調(diào)用屬性方法時(shí)盹舞,它內(nèi)部是通過運(yùn)行時(shí) resolveInstanceMethod 為對(duì)象臨時(shí)添加一個(gè)方法产镐,并把對(duì)應(yīng)屬性值保存到內(nèi)部的一個(gè) Dictionary 里,同時(shí)還會(huì)通知 delegate踢步、創(chuàng)建動(dòng)畫等等癣亚,非常消耗資源。UIView 的關(guān)于顯示相關(guān)的屬性(比如 frame/bounds/transform)等實(shí)際上都是 CALayer 屬性映射來的获印,所以對(duì) UIView 的這些屬性進(jìn)行調(diào)整時(shí)述雾,消耗的資源要遠(yuǎn)大于一般的屬性。對(duì)此你在應(yīng)用中,應(yīng)該盡量減少不必要的屬性修改玻孟。
      當(dāng)視圖層次調(diào)整時(shí)唆缴,UIView、CALayer 之間會(huì)出現(xiàn)很多方法調(diào)用與通知黍翎,所以在優(yōu)化性能時(shí)面徽,應(yīng)該盡量避免調(diào)整視圖層次、添加和移除視圖匣掸。

    3)對(duì)象銷毀
    對(duì)象的銷毀雖然消耗資源不多趟紊,但累積起來也是不容忽視的。通常當(dāng)容器類持有大量對(duì)象時(shí)碰酝,其銷毀時(shí)的資源消耗就非常明顯霎匈。同樣的,如果對(duì)象可以放到后臺(tái)線程去釋放送爸,那就挪到后臺(tái)線程去铛嘱。這里有個(gè)小 Tip:把對(duì)象捕獲到 block 中,然后扔到后臺(tái)隊(duì)列去隨便發(fā)送個(gè)消息以避免編譯器警告袭厂,就可以讓對(duì)象在后臺(tái)線程銷毀了墨吓。

  • 排版

    1)布局計(jì)算
    視圖布局的計(jì)算是 App 中最為常見的消耗 CPU 資源的地方。如果能在后臺(tái)線程提前計(jì)算好視圖布局嵌器、并且對(duì)視圖布局進(jìn)行緩存,那么這個(gè)地方基本就不會(huì)產(chǎn)生性能問題了谐丢。
    不論通過何種技術(shù)對(duì)視圖進(jìn)行布局爽航,其最終都會(huì)落到對(duì) UIView.frame/bounds/center 等屬性的調(diào)整上。上面也說過乾忱,對(duì)這些屬性的調(diào)整非常消耗資源讥珍,所以盡量提前計(jì)算好布局,在需要時(shí)一次性調(diào)整好對(duì)應(yīng)屬性窄瘟,而不要多次衷佃、頻繁的計(jì)算和調(diào)整這些屬性。

    2)Autolayout
    Autolayout 是蘋果本身提倡的技術(shù)蹄葱,在大部分情況下也能很好的提升開發(fā)效率氏义,但是 Autolayout 對(duì)于復(fù)雜視圖來說常常會(huì)產(chǎn)生嚴(yán)重的性能問題。隨著視圖數(shù)量的增長(zhǎng)图云,Autolayout 帶來的 CPU 消耗會(huì)呈指數(shù)級(jí)上升惯悠。具體數(shù)據(jù)可以看這個(gè)文章:http://pilky.me/36/。 如果你不想手動(dòng)調(diào)整 frame 等屬性竣况,你可以用一些工具方法替代(比如常見的 left/right/top/bottom/width/height 快捷屬性)克婶,或者使用 ComponentKit、AsyncDisplayKit 等框架。

    3)文本計(jì)算
    如果一個(gè)界面中包含大量文本(比如微博微信朋友圈等)情萤,文本的寬高計(jì)算會(huì)占用很大一部分資源鸭蛙,并且不可避免。如果你對(duì)文本顯示沒有特殊要求筋岛,可以參考下 UILabel 內(nèi)部的實(shí)現(xiàn)方式:用 [NSAttributedString boundingRectWithSize:options:context:] 來計(jì)算文本寬高娶视,用 -[NSAttributedString drawWithRect:options:context:] 來繪制文本。盡管這兩個(gè)方法性能不錯(cuò)泉蝌,但仍舊需要放到后臺(tái)線程進(jìn)行以避免阻塞主線程歇万。
    如果你用 CoreText 繪制文本,那就可以先生成 CoreText 排版對(duì)象勋陪,然后自己計(jì)算了贪磺,并且 CoreText 對(duì)象還能保留以供稍后繪制使用。

    4)太多的layer或者幾何形狀
    如果視圖的層級(jí)結(jié)構(gòu)太復(fù)雜的話诅愚,當(dāng)某些視圖被渲染或者 frame 被修改的話寒锚,CPU 會(huì)花比較多得時(shí)間去重新計(jì)算 frame。尤其如果用 autolayout 的話违孝,會(huì)更消耗 CPU刹前。同時(shí)過多的幾何結(jié)構(gòu)會(huì)大大增多需要渲染的 OpenGL triangles 以及柵格化的操作(將 OpenGL 的 triangles 轉(zhuǎn)化成像素)

  • 繪制

    1)文本繪制
    屏幕上能看到的所有文本內(nèi)容控件,包括 UIWebView雌桑,在底層都是通過 CoreText 排版喇喉、繪制為 Bitmap 顯示的。常見的文本控件 (UILabel校坑、UITextView 等)拣技,其排版和繪制都是在主線程進(jìn)行的,當(dāng)顯示大量文本時(shí)耍目,CPU 的壓力會(huì)非常大膏斤。對(duì)此解決方案只有一個(gè),那就是自定義文本控件邪驮,用 TextKit 或最底層的 CoreText 對(duì)文本異步繪制莫辨。盡管這實(shí)現(xiàn)起來非常麻煩,但其帶來的優(yōu)勢(shì)也非常大毅访,CoreText 對(duì)象創(chuàng)建好后沮榜,能直接獲取文本的寬高等信息,避免了多次計(jì)算(調(diào)整 UILabel 大小時(shí)算一遍喻粹、UILabel 繪制時(shí)內(nèi)部再算一遍)敞映;CoreText 對(duì)象占用內(nèi)存較少,可以緩存下來以備稍后多次渲染磷斧。

    2)圖片的解碼
    當(dāng)你用 UIImage 或 CGImageSource 的那幾個(gè)方法創(chuàng)建圖片時(shí)振愿,圖片數(shù)據(jù)并不會(huì)立刻解碼捷犹。圖片設(shè)置到 UIImageView 或者 CALayer.contents 中去,并且 CALayer 被提交到 GPU 前冕末,CGImage 中的數(shù)據(jù)才會(huì)得到解碼萍歉。這一步是發(fā)生在主線程的,并且不可避免档桃。如果想要繞開這個(gè)機(jī)制枪孩,常見的做法是在后臺(tái)線程先把圖片繪制到 CGBitmapContext 中,然后從 Bitmap 直接創(chuàng)建圖片藻肄。目前常見的網(wǎng)絡(luò)圖片庫都自帶這個(gè)功能蔑舞。

    3)圖像的繪制
    圖像的繪制通常是指用那些以 CG 開頭的方法把圖像繪制到畫布中,然后從畫布創(chuàng)建圖片并顯示這樣一個(gè)過程嘹屯。這個(gè)最常見的地方就是 [UIView drawRect:] 里面了攻询。由于 CoreGraphic 方法通常都是線程安全的,所以圖像的繪制可以很容易的放到后臺(tái)線程進(jìn)行州弟。一個(gè)簡(jiǎn)單異步繪制的過程大致如下(實(shí)際情況會(huì)比這個(gè)復(fù)雜得多钧栖,但原理基本一致):

GPU優(yōu)化

  • 接收提交的紋理(Texture)和頂點(diǎn)描述(三角形)
  • 應(yīng)用變換(transform)、混合并渲染
    1) 紋理的渲染
    所有的 Bitmap婆翔,包括圖片拯杠、文本、柵格化的內(nèi)容啃奴,最終都要由內(nèi)存提交到顯存潭陪,綁定為 GPU Texture。不論是提交到顯存的過程最蕾,還是 GPU 調(diào)整和渲染 Texture 的過程依溯,都要消耗不少 GPU 資源。當(dāng)在較短時(shí)間顯示大量圖片時(shí)(比如 TableView 存在非常多的圖片并且快速滑動(dòng)時(shí))揖膜,CPU 占用率很低誓沸,GPU 占用非常高梅桩,界面仍然會(huì)掉幀壹粟。避免這種情況的方法只能是盡量減少在短時(shí)間內(nèi)大量圖片的顯示,盡可能將多張圖片合成為一張進(jìn)行顯示宿百。
    當(dāng)圖片過大趁仙,超過 GPU 的最大紋理尺寸時(shí),圖片需要先由 CPU 進(jìn)行預(yù)處理垦页,這對(duì) CPU 和 GPU 都會(huì)帶來額外的資源消耗雀费。目前來說,iPhone 4S 以上機(jī)型痊焊,紋理尺寸上限都是 4096x4096盏袄,更詳細(xì)的資料可以看這里:iosres.com忿峻。所以,盡量不要讓圖片和視圖的大小超過這個(gè)值辕羽。

2)視圖的混合 (Composing)
當(dāng)多個(gè)視圖(或者說 CALayer)重疊在一起顯示時(shí)逛尚,GPU 會(huì)首先把他們混合到一起。如果視圖結(jié)構(gòu)過于復(fù)雜刁愿,混合的過程也會(huì)消耗很多 GPU 資源绰寞。為了減輕這種情況的 GPU 消耗,應(yīng)用應(yīng)當(dāng)盡量減少視圖數(shù)量和層次铣口,并在不透明的視圖里標(biāo)明 opaque 屬性以避免無用的 Alpha 通道合成滤钱。當(dāng)然,這也可以用上面的方法脑题,把多個(gè)視圖預(yù)先渲染為一張圖片來顯示件缸。

3)圖形的生成
CALayer 的 border、圓角旭蠕、陰影停团、遮罩(mask),CASharpLayer 的矢量圖形顯示掏熬,通常會(huì)觸發(fā)離屏渲染(offscreen rendering)佑稠,而離屏渲染通常發(fā)生在 GPU 中。當(dāng)一個(gè)列表視圖中出現(xiàn)大量圓角的 CALayer旗芬,并且快速滑動(dòng)時(shí)舌胶,可以觀察到 GPU 資源已經(jīng)占滿,而 CPU 資源消耗很少疮丛。這時(shí)界面仍然能正翅I滑動(dòng),但平均幀數(shù)會(huì)降到很低誊薄。為了避免這種情況履恩,可以嘗試開啟 CALayer.shouldRasterize 屬性,但這會(huì)把原本離屏渲染的操作轉(zhuǎn)嫁到 CPU 上去呢蔫。對(duì)于只需要圓角的某些場(chǎng)合切心,也可以用一張已經(jīng)繪制好的圓角圖片覆蓋到原本視圖上面來模擬相同的視覺效果。最徹底的解決辦法片吊,就是把需要顯示的圖形在后臺(tái)線程繪制為圖片绽昏,避免使用圓角、陰影俏脊、遮罩等屬性全谤。

  • 輸出到屏幕上
    通常你所能看到的內(nèi)容,主要也就是紋理(圖片)和形狀(三角模擬的矢量圖形)兩類

參考

視圖渲染爷贫、CPU和GPU卡頓原因及其優(yōu)化方案

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末认然,一起剝皮案震驚了整個(gè)濱河市补憾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌卷员,老刑警劉巖余蟹,帶你破解...
    沈念sama閱讀 219,490評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異子刮,居然都是意外死亡威酒,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門挺峡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來葵孤,“玉大人,你說我怎么就攤上這事橱赠∮热裕” “怎么了?”我有些...
    開封第一講書人閱讀 165,830評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵狭姨,是天一觀的道長(zhǎng)宰啦。 經(jīng)常有香客問我,道長(zhǎng)饼拍,這世上最難降的妖魔是什么赡模? 我笑而不...
    開封第一講書人閱讀 58,957評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮师抄,結(jié)果婚禮上漓柑,老公的妹妹穿的比我還像新娘。我一直安慰自己叨吮,他們只是感情好辆布,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,974評(píng)論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著茶鉴,像睡著了一般锋玲。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上涵叮,一...
    開封第一講書人閱讀 51,754評(píng)論 1 307
  • 那天惭蹂,我揣著相機(jī)與錄音,去河邊找鬼围肥。 笑死剿干,一個(gè)胖子當(dāng)著我的面吹牛蜂怎,可吹牛的內(nèi)容都是我干的穆刻。 我是一名探鬼主播,決...
    沈念sama閱讀 40,464評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼杠步,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼氢伟!你這毒婦竟也來了榜轿?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤朵锣,失蹤者是張志新(化名)和其女友劉穎谬盐,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诚些,經(jīng)...
    沈念sama閱讀 45,847評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡飞傀,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,995評(píng)論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了诬烹。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片砸烦。...
    茶點(diǎn)故事閱讀 40,137評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖绞吁,靈堂內(nèi)的尸體忽然破棺而出幢痘,到底是詐尸還是另有隱情,我是刑警寧澤家破,帶...
    沈念sama閱讀 35,819評(píng)論 5 346
  • 正文 年R本政府宣布颜说,位于F島的核電站,受9級(jí)特大地震影響汰聋,放射性物質(zhì)發(fā)生泄漏门粪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,482評(píng)論 3 331
  • 文/蒙蒙 一烹困、第九天 我趴在偏房一處隱蔽的房頂上張望庄拇。 院中可真熱鬧,春花似錦韭邓、人聲如沸措近。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瞭郑。三九已至,卻和暖如春鸭你,著一層夾襖步出監(jiān)牢的瞬間屈张,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工袱巨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留阁谆,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,409評(píng)論 3 373
  • 正文 我出身青樓愉老,卻偏偏與公主長(zhǎng)得像场绿,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子嫉入,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,086評(píng)論 2 355

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