iOS圖像顯示原理

析構(gòu)圖顯示:

屏幕顯示圖像原理<建議下載后觀看>.png

圖像顯示各組件分工:


~ CPU:計(jì)算視圖frame右莱,圖片解碼,繪制紋理交給GPU氏堤。
~ GPU:紋理混合沙绝,頂點(diǎn)變換,渲染到幀緩沖區(qū)鼠锈。
~ 時(shí)鐘信號(hào):垂直同步信號(hào)V-Sync / 水平同步信號(hào)H-Sync闪檬。
~ iOS設(shè)備雙緩沖機(jī)制:前/后幀緩沖區(qū)。
~ CRT:陰極電子槍發(fā)射電子购笆,在陰極高電壓的作用下粗悯,電子由電子槍射向熒光屏,使熒光粉發(fā)光同欠,將圖像顯示在屏幕上样傍。采用時(shí)鐘信號(hào)控制。
~ LCD:(光學(xué)成像原理)在不加電壓的情況下铺遂,光線會(huì)沿著液晶分子的間隙前進(jìn)旋轉(zhuǎn)90°衫哥,光可以通過。在 加入電壓后襟锐,光沿著液晶分子的間隙直線前進(jìn)撤逢,被濾光板擋住。
~ 注:LCD的成像原理與CRT截然不同粮坞,每一個(gè)像素的顏色在需要改變時(shí)才去改變電壓蚊荣,但扔需要按照一定的刷新頻率向GPU獲取新的圖像用于顯示。

圖像撕裂原因分析

?圖像撕裂:當(dāng)視頻控制器還未讀取完成時(shí)莫杈,GPU將新的一幀內(nèi)容提交到幀緩沖區(qū)并把兩個(gè)幀緩沖區(qū)進(jìn)行更新后互例,視頻控制器就會(huì)把新的一幀數(shù)據(jù)的下半段顯示到屏幕上,造成畫面撕裂的現(xiàn)象姓迅。
?解決方案:垂直同步機(jī)制
?弊端:GPU會(huì)等待顯示的V-Sync信號(hào)發(fā)出后敲霍,才進(jìn)行新的一幀渲染和緩存區(qū)更新。能解決畫面撕裂現(xiàn)象丁存,也增加了畫面流暢度肩杈,但需要消耗更多的計(jì)算資源,由此可能導(dǎo)致卡頓解寝。


圖像撕裂.png

離屏渲染與光柵化

?離屏渲染:CPU渲染及非GPU緩沖區(qū)的渲染統(tǒng)稱為離屏渲染扩然。
?離屏渲染的觸發(fā):CoreGraphics的上下文繪制,drawRect繪制聋伦,layer圓角/邊框/陰影/抗鋸齒/光柵化(shouldRasterize置為YES)等夫偶。
?離屏渲染的檢測:Instruments的CoreAnimation工具動(dòng)態(tài)監(jiān)測界睁。(使用方法:Color Offscreen –Rendered Yellow :開啟后會(huì)把那些需要離屏渲染的圖層高亮成黃色,黃色圖層可能存在性能問題兵拢。)
?光柵化簡介:隱式創(chuàng)建一個(gè)位圖翻斟,各種陰影遮罩等效果也會(huì)保存到位圖中緩存起來,從而減少渲染的頻度说铃,把GPU的操作轉(zhuǎn)到CPU上访惜,生成位圖緩存,直接讀取調(diào)用腻扇。(注:對(duì)于經(jīng)常變動(dòng)的內(nèi)容债热,不要開啟光柵化,防止性能浪費(fèi)幼苛,如Cell的復(fù)用)
?光柵化的檢測:Color Hits Green and Misses Red 開啟后窒篱,若shouldRasterize設(shè)置為YES,對(duì)應(yīng)的渲染結(jié)果會(huì)緩存舶沿,如果圖層是綠色墙杯,表示緩存被復(fù)用;如果是紅色暑椰,就表示緩存被重復(fù)創(chuàng)建霍转,可能存在性能問題。
?GPU緩存區(qū)渲染優(yōu)勢:為圖像顯示做了高度優(yōu)化一汽,速度較快。

卡頓原因分析

卡頓圖示

大體有三種原因:
1.UI渲染需要時(shí)間較長低滩,無法按時(shí)提交結(jié)果召夹。
2.一些需要密集計(jì)算的處理放在了主線程中執(zhí)行,導(dǎo)致主線程被阻塞恕沫,無法渲染UI界面监憎。
3.網(wǎng)絡(luò)請(qǐng)求由于網(wǎng)絡(luò)狀態(tài)的問題響應(yīng)較慢,UI層由于沒有模型返回?zé)o法渲染婶溯。

CPU資源消耗分析

1.對(duì)象創(chuàng)建:對(duì)象的創(chuàng)建會(huì)分配內(nèi)存鲸阔、調(diào)整屬性、甚至還有讀取文件等操作迄委,比較消耗CPU資源褐筛。盡量采取輕量級(jí)對(duì)象,盡量放到后臺(tái)線程處理叙身,盡量推遲對(duì)象的創(chuàng)建時(shí)間渔扎。(如UIView / CALayer)
2.對(duì)象調(diào)整:frame、bounds信轿、transform及視圖層次等屬性調(diào)整很耗費(fèi)CPU資源晃痴。盡量減少不必要屬性的修改残吩,盡量避免調(diào)整視圖層次、添加和移除視圖倘核。
3.布局計(jì)算:隨著視圖數(shù)量的增長泣侮,Autolayout帶來的CPU消耗會(huì)呈指數(shù)級(jí)增長,所以盡量提前算好布局紧唱,在需要時(shí)一次性調(diào)整好對(duì)應(yīng)屬性旁瘫。
4.文本渲染:屏幕上能看到的所有文本內(nèi)容控件,包括UIWebView琼蚯,在底層都是通過CoreText排版酬凳、繪制為位圖顯示的。常見的文本控件遭庶,其排版與繪制都是在主線程進(jìn)行的宁仔,顯示大量文本是,CPU壓力很大峦睡。對(duì)此解決方案唯一就是自定義文本控件翎苫,用CoreText對(duì)文本異步繪制。(很麻煩榨了,開發(fā)成本高)
5.圖片解碼:當(dāng)用UIImage或CGImageSource創(chuàng)建圖片時(shí)煎谍,圖片數(shù)據(jù)并不會(huì)立刻解碼。圖片設(shè)置到UIImageView或CALayer.contents中去龙屉,并且CALayer被提交到GPU前呐粘,CGImage中的數(shù)據(jù)才會(huì)得到解碼。這一步是發(fā)生在主線程的转捕,并且不可避免作岖。SD_WebImage處理方式:在后臺(tái)線程先把圖片繪制到CGBitmapContext中,然后從Bitmap直接創(chuàng)建圖片五芝。
6.圖像繪制:圖像的繪制通常是指用那些以CG開頭的方法把圖像繪制到畫布中痘儡,然后從畫布創(chuàng)建圖片并顯示的一個(gè)過程。CoreGraphics方法是線程安全的枢步,可以異步繪制沉删,主線程回調(diào)。

GPU資源消耗分析

?紋理混合:盡量減少短時(shí)間內(nèi)大量圖片的顯示醉途,盡可能將多張圖片合成一張進(jìn)行顯示矾瑰。
?視圖混合:盡量減少視圖層次和數(shù)量,并在不透明的視圖里標(biāo)明opaque屬性以避免無用的Alpha通道合成结蟋。
?圖形生成:盡量避免離屏渲染脯倚,盡量采用異步繪制,盡量避免使用圓角、陰影推正、遮罩等屬性恍涂。必要時(shí)用靜態(tài)圖片實(shí)現(xiàn)展示效果,也可嘗試光柵化緩存復(fù)用屬性植榕。

Instruments 卡頓監(jiān)測

Time Profiler ->Call Tree Options :

1.Separete By Thread :按線程劃分
2.Invert Call Tree :逆向調(diào)用樹再沧,方便查看調(diào)用順序
3.Hide System Libraries:隱藏系統(tǒng)庫

Core Animation ->Debug Options :

1.Color Blended Layers :監(jiān)測圖層混合情況,沒有混合的部分為綠色尊残,混合最嚴(yán)重的部分是紅色炒瘸,大量圖層混合會(huì)消耗GPU的時(shí)間。
2.Color Copied Images :監(jiān)測圖片顏色格式寝衫,如果GPU不支持當(dāng)前圖片的顏色格式顷扩,會(huì)將其交給CPU預(yù)先進(jìn)行格式轉(zhuǎn)化,并且這張圖片被標(biāo)記為藍(lán)色慰毅。(Apple 的 GPU值解析32bit的顏色格式隘截,RGBA)

  1. Color Immediately :設(shè)置調(diào)試顏色每幀更新。(一般不用)
  2. Color Compositing-Fast-Path Blue :對(duì)任何直接使用OpenGL繪制的圖層高亮汹胃。
  3. Flash Updated Regions :對(duì)重繪的內(nèi)容高亮成黃色婶芭。(使用Core Graphics繪制的圖層)
  4. Color Hits Green and Misses Red :光柵化監(jiān)測,前面已述着饥。
  5. Color Offscreen-Renderded Yellow :離屏渲染監(jiān)測犀农,前面已述。
  6. Color Non-Standard Surface Formats:Apple 文檔沒注解(一般不用)

性能優(yōu)化

請(qǐng)參考上一篇文章:Texture的異步渲染和布局引擎

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末宰掉,一起剝皮案震驚了整個(gè)濱河市呵哨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌贵扰,老刑警劉巖仇穗,帶你破解...
    沈念sama閱讀 212,542評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異戚绕,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)枝冀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門舞丛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人果漾,你說我怎么就攤上這事球切。” “怎么了绒障?”我有些...
    開封第一講書人閱讀 158,021評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵吨凑,是天一觀的道長。 經(jīng)常有香客問我,道長鸵钝,這世上最難降的妖魔是什么糙臼? 我笑而不...
    開封第一講書人閱讀 56,682評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮恩商,結(jié)果婚禮上变逃,老公的妹妹穿的比我還像新娘。我一直安慰自己怠堪,他們只是感情好揽乱,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,792評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著粟矿,像睡著了一般凰棉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上陌粹,一...
    開封第一講書人閱讀 49,985評(píng)論 1 291
  • 那天撒犀,我揣著相機(jī)與錄音,去河邊找鬼申屹。 笑死绘证,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的哗讥。 我是一名探鬼主播嚷那,決...
    沈念sama閱讀 39,107評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼杆煞!你這毒婦竟也來了魏宽?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,845評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤决乎,失蹤者是張志新(化名)和其女友劉穎队询,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體构诚,經(jīng)...
    沈念sama閱讀 44,299評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蚌斩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,612評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了范嘱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片送膳。...
    茶點(diǎn)故事閱讀 38,747評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖丑蛤,靈堂內(nèi)的尸體忽然破棺而出叠聋,到底是詐尸還是另有隱情,我是刑警寧澤受裹,帶...
    沈念sama閱讀 34,441評(píng)論 4 333
  • 正文 年R本政府宣布碌补,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏厦章。R本人自食惡果不足惜镇匀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,072評(píng)論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望闷袒。 院中可真熱鬧坑律,春花似錦、人聲如沸囊骤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,828評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽也物。三九已至宫屠,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間滑蚯,已是汗流浹背浪蹂。 一陣腳步聲響...
    開封第一講書人閱讀 32,069評(píng)論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留告材,地道東北人坤次。 一個(gè)月前我還...
    沈念sama閱讀 46,545評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像斥赋,于是被迫代替她去往敵國和親缰猴。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,658評(píng)論 2 350

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