渲染視圖

渲染視圖的核心是:Core Animation

  • 底層->上層:

    GPU->(OpenGL、Core Graphic)->Core Animation->UIKit

  • 在 iOS 上,動畫和視圖的渲染其實是在另外一個進程做的羹蚣,即可稱為:render server秩铆。(ios5以前:SpringBoard倒庵;ios6后:BackBoard)

iOS 上視圖或者動畫渲染的各個階段

在 APP 內(nèi)部有4個階段:

  1. 布局

    在這個階段怕午,程序設(shè)置 View / Layer 的層級信息陋守,設(shè)置 layer 的屬性震贵,如 frame,background color 等等水评。

  2. 創(chuàng)建 backing image

    在這個階段程序會創(chuàng)建 layer 的 backing image猩系,無論是通過 setContents 將一個 image 傳給 layer,還是通過 [drawRect:] 或 [drawLayer: inContext:] 來畫出來的中燥。所以 [drawRect:] 等函數(shù)是在這個階段被調(diào)用的寇甸。

  3. 準(zhǔn)備

    在這個階段,Core Animation 框架準(zhǔn)備要渲染的 layer 的各種屬性數(shù)據(jù)疗涉,以及要做的動畫的參數(shù)拿霉,準(zhǔn)備傳遞給 render server。同時在這個階段也會解壓要渲染的 image咱扣。(除了用 imageNamed:方法從 bundle 加載的 image 會立刻解壓之外绽淘,其他的比如直接從硬盤讀入,或者從網(wǎng)絡(luò)上下載的 image 不會立刻解壓闹伪,只有在真正要渲染的時候才會解壓)沪铭。

  4. 提交

    在這個階段,Core Animation 打包 layer 的信息以及需要做的動畫的參數(shù)祭往,通過 IPC(inter-Process Communication)傳遞給 render server伦意。

數(shù)據(jù)到達 render server 后火窒,會被反序列化成 render tree硼补。
之后,在 APP 外部有2個階段:

  1. 根據(jù) layer 的各種屬性(如果是動畫的熏矿,會計算動畫 layer 的屬性的中間值)已骇,用 OpenGL 準(zhǔn)備渲染离钝。
  2. 渲染這些可視的 layer 到屏幕。

掉幀效果

我們都知道 iOS 設(shè)備的屏幕刷新頻率是 60Hz褪储。如果上面的這些步驟在一個刷新周期之內(nèi)無法做完(1/60s)卵渴,就會造成掉幀。

多度消耗 CPU 和 GPU 的掉幀行為:

  • 視圖上有太多的 layer 或者幾何形狀(CPU&GPU)

    如果視圖的層級結(jié)構(gòu)太復(fù)雜的話鲤竹,當(dāng)某些視圖被渲染或者 frame 被修改的話浪读,CPU 會花比較多得時間去重新計算 frame。尤其如果用 autolayout 的話辛藻,會更消耗 CPU碘橘。同時過多的幾何結(jié)構(gòu)會大大增多需要渲染的 OpenGLl triangles 以及柵格化的操作(將 OpenGL 的 triangles 轉(zhuǎn)化成像素)

  • 太多的 overdraw:overdraw 是指一個像素點被多次地用顏色填充.(GPU)

    這個主要是由于一些半透明的 layer 相互重疊造成的。GPU 的 fill-rate(用顏色填充像素的速率)是有限的吱肌。如果 overdraw 太多的話痘拆,勢必會降低 GPU 的性能。

  • 視圖的延后載入:(CPU)

    iOS 只有在展示 viewcontroller 的 view 或者訪問 viewcontroller 的 view氮墨,比如說 someviewcontroller.view 的時候才會加載view纺蛆。如果在用戶點擊了某個 button,并且在 button 的響應(yīng)函數(shù)里做了很多消耗 cpu 的工作规揪,這個時候如果 present 某個 viewcontroller 的話桥氏,會容易卡頓,尤其是如果 viewcontroller 要從 database 里獲取數(shù)據(jù)猛铅,或者從 nib 文件初始化 view 或者加載圖片會更卡识颊。

  • 離屏的繪制(GPU):

    離屏的繪制有兩種情況:

    1. 有些效果(如 rounded corners,layer masks奕坟,drop shadows 和 layer rasterization)不能直接的繪制到屏幕上祥款,必須先繪制到一個 offscreen 的 image context 上,這種操作會引入額外的內(nèi)存和 CPU 消耗月杉。

    2. 實現(xiàn)了 drawRect 或者 drawLayer:inContext:刃跛,為了支持任意的繪制,core graphic 會創(chuàng)建一個大小跟要畫的 view 一樣的 backing image苛萎。并且當(dāng)畫完的以后要傳輸?shù)?render server 上渲染桨昙。所以沒事不要重載 drawRect 等函數(shù)卻什么都不做。

  • 圖片解壓:

    用 imageNamed:從 bundle 里加載會立馬解壓腌歉。一般的情況是在賦值給 UIImageView 的 image 或者 layer 的 contents 或者畫到一個 core graphic context 里才會解壓蛙酪。

渲染性能的優(yōu)化

  • 隱藏的繪制:

    catextlayer 和 uilabel 都是將 text 畫入 backing image 的。如果改了一個包含 text 的 view 的 frame 的話翘盖,text 會被重新繪制桂塞。

  • Rasterize:

    當(dāng)使用 layer 的 shouldRasterize 的時候(記得設(shè)置適當(dāng)?shù)?laye r的 rasterizationScale),layer 會被強制繪制到一個 offscreen image 上馍驯,并且會被緩存起來阁危。這種方法可以用來緩存繪制耗時(比如有比較絢的效果)但是不經(jīng)常改的 layer玛痊,如果 layer 經(jīng)常變,就不適合用狂打。

  • 離屏繪制:

    使用 Rounded corner擂煞, layer masks, drop shadows 的效果可以使用 stretchable images趴乡。比如實現(xiàn) rounded corner对省,可以將一個圓形的圖片賦值于 layer 的 content 的屬性。并且設(shè)置好 contentsCenter 和 contentScale 屬性晾捏。

  • Blending and Overdraw:

    如果一個 layer 被另一個 layer 完全遮蓋官辽,GPU 會做優(yōu)化不渲染被遮蓋的 layer,但是計算一個 layer 是否被另一個 layer 完全遮蓋是很耗 cpu 的粟瞬。將幾個半透明的 layer 的 color 融合在一起也是很消耗的同仆。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市裙品,隨后出現(xiàn)的幾起案子俗批,更是在濱河造成了極大的恐慌,老刑警劉巖市怎,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件岁忘,死亡現(xiàn)場離奇詭異,居然都是意外死亡区匠,警方通過查閱死者的電腦和手機干像,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來驰弄,“玉大人麻汰,你說我怎么就攤上這事∑莞荩” “怎么了五鲫?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長岔擂。 經(jīng)常有香客問我位喂,道長,這世上最難降的妖魔是什么乱灵? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任塑崖,我火速辦了婚禮,結(jié)果婚禮上痛倚,老公的妹妹穿的比我還像新娘规婆。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布聋呢。 她就那樣靜靜地躺著苗踪,像睡著了一般颠区。 火紅的嫁衣襯著肌膚如雪削锰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天毕莱,我揣著相機與錄音器贩,去河邊找鬼。 笑死朋截,一個胖子當(dāng)著我的面吹牛蛹稍,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播部服,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼唆姐,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了廓八?” 一聲冷哼從身側(cè)響起奉芦,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎剧蹂,沒想到半個月后声功,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡宠叼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年先巴,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片冒冬。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡伸蚯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出简烤,到底是詐尸還是另有隱情朝卒,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布乐埠,位于F島的核電站抗斤,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏丈咐。R本人自食惡果不足惜瑞眼,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望棵逊。 院中可真熱鬧伤疙,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至锯蛀,卻和暖如春灭衷,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背旁涤。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工翔曲, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人劈愚。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓瞳遍,卻偏偏與公主長得像,于是被迫代替她去往敵國和親菌羽。 傳聞我的和親對象是個殘疾皇子掠械,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,614評論 2 353

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

  • 有很多種framework以及很多種方法的組合可以在屏幕上渲染UI元素,我們在這里討論這個過程中發(fā)生的事情注祖,希望這...
    縱橫而樂閱讀 4,490評論 4 25
  • 本系列文章的重點是關(guān)注在總結(jié)iOS圖形圖像的原理和性能優(yōu)化的常規(guī)解決方案猾蒂。 事先聲明,本文絕大多數(shù)概念和內(nèi)容均來源...
    ac3閱讀 3,807評論 10 14
  • 文章寫的很實用,細節(jié)都很到位署鸡,我又邪惡的轉(zhuǎn)載了 原文地址:http://www.cnblogs.com/bugly...
    可能是老曹閱讀 776評論 0 6
  • 繪制像素到屏幕上 answer-huang22 Mar 2014 分享文章 一個像素是如何繪制到屏幕上去的案糙?有很多...
    阿貍旅途T恤閱讀 1,636評論 0 7
  • 卷首語 歡迎來到 objc.io 的第三期! 這一期都是關(guān)于視圖層的靴庆。當(dāng)然視圖層有很多方面时捌,我們需要把它們縮小到幾...
    評評分分閱讀 1,765評論 0 18