析構(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°，光可以通過(guò)。在 加入電壓后，光沿著液晶分子的間隙直線前進(jìn)，被濾光板擋住。
~ 注：LCD的成像原理與CRT截然不同，每一個(gè)像素的顏色在需要改變時(shí)才去改變電壓，但扔需要按照一定的刷新頻率向GPU獲取新的圖像用于顯示。

圖像撕裂原因分析

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

圖像撕裂.png

離屏渲染與光柵化

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

卡頓原因分析

卡頓圖示

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ù)量的增長(zhǎng)，Autolayout帶來(lái)的CPU消耗會(huì)呈指數(shù)級(jí)增長(zhǎng)，所以盡量提前算好布局，在需要時(shí)一次性調(diào)整好對(duì)應(yīng)屬性。
4.文本渲染：屏幕上能看到的所有文本內(nèi)容控件，包括UIWebView，在底層都是通過(guò)CoreText排版、繪制為位圖顯示的。常見(jiàn)的文本控件，其排版與繪制都是在主線程進(jìn)行的，顯示大量文本是，CPU壓力很大。對(duì)此解決方案唯一就是自定義文本控件，用CoreText對(duì)文本異步繪制。（很麻煩，開(kāi)發(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開(kāi)頭的方法把圖像繪制到畫(huà)布中，然后從畫(huà)布創(chuàng)建圖片并顯示的一個(gè)過(guò)程。CoreGraphics方法是線程安全的，可以異步繪制，主線程回調(diào)。

GPU資源消耗分析

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

Instruments 卡頓監(jiān)測(cè)

Time Profiler ->Call Tree Options :

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

Core Animation ->Debug Options :

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

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

性能優(yōu)化

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