一、屏幕顯像原理
????????上圖顯示的是CRT電子槍掃描路徑，涉及到兩個比較重要的概念：水平同步信號（HSync）,垂直同步信號（VSync）。
????????當要顯示圖像時，電子槍會發送一個VSync信號，將電子槍移到左上角，然后發送一個HSync信號，電子槍從屏幕最左側掃描到屏幕最右側，完成一行的掃描，然后再發送一個HSync信號，開始第二行的掃描，重復此過程直到最后一行完成掃描，此時當前幀已經掃描完畢，屏幕呈現完整畫面。當要展示下一幀圖像時會再次發送VSync信號，將電子槍移到左上角重復掃描過程。
二、圖像顯示流程
? ? ? ? 上圖是圖像顯示流程，圖像的顯示需要CPU和GPU共同協作，CPU負責計算顯示內容并提交到GPU，GPU負責圖像渲染并將結果存放到幀緩存區，最后由視頻控制器通過VSync讀取幀緩存區中的內容，通過一些列轉換顯示到屏幕上。
? ? ? ? 為了使用圖像顯示更流暢iOS采用了雙緩沖機制。系統會準備A、B兩個緩沖區，假設A緩沖區有內容，B緩沖區無內容，視頻控制器發送VSync信號會讀取A緩沖區內容，這時GPU可以繼續像B緩沖區寫入內容。當A緩沖區讀取完畢，發送VSync信號讀取下一幀時，視頻控制器會立刻讀取B緩沖區的內容（B中的內容是在A在被讀取的時候寫入的），此時GPU會像A緩沖區繼續寫入內容。A、B兩個緩沖區交替讀寫實現了雙緩沖機制，提高了圖像顯示的流暢度。
三、iOS圖像顯示流程
UIKit是常用的框架，顯示、動畫都通過CoreAnimation。
CoreAnimation是核心動畫，依賴于OpenGL ES做GPU渲染，CoreGraphics做CPU渲染；
最底層的GraphicsHardWare是圖形硬件。
? ? ? ? 上圖顯示了在iOS中數據先通過CPU部分如CoreGraphics、CoreAnimation和CoreImage預處理，然后通過OpenGl ES將數據傳送到GPU，最終顯示到屏幕上。
注：CoreImage支持CPU和GPU兩種處理模式。
1).CoreAnimation提交會話，包括自己和子樹（view hierarchy）的layout狀態等；
2).RenderServer解析提交的子樹狀態，生成繪制指令；
3).GPU執行繪制指令
4).顯示渲染后的數據
CPU渲染職能
1).Layout:在這個階段，程序設置 View/Layer 的層級信息，設置 layer 的屬性，如 frame，background color 等
? ? ? ? 會造成CPU和I/O瓶頸。
2).Display:在這個階段程序會創建 layer 的 backing image，無論是通過 setContents 將一個 image 傳給 layer，還是通過 drawRect：或 drawLayer:inContext：來畫出來的。所以 drawRect：等函數是在這個階段被調用的
? ? ? ? 會造成CPU和內存瓶頸。
3).Prepare:在這個階段，Core Animation 框架準備要渲染的 layer 的各種屬性數據，以及要做的動畫的參數，準備傳遞給 render server。同時在這個階段也會解壓要渲染的 image。（除了用 imageNamed：方法從 bundle 加載的 image 會立刻解壓之外，其他的比如直接從硬盤讀入，或者從網絡上下載的 image 不會立刻解壓，只有在真正要渲染的時候才會解壓）
? ??????GPU不支持的某些圖片格式，盡量使用GPU能支持的圖片格式。
4).Commit:在這個階段，Core Animation 打包 layer 的信息以及需要做的動畫的參數，通過 IPC（inter-Process Communication）傳遞給 render server。
? ? ? ? 盡可能簡化視圖層級，層級太多會對性能造成影響。
OpenGL ES渲染職能
紋理的概念：紋理是一個用來保存圖像的顏色元??值的 OpenGL ES 緩存，可以簡單理解為一個單位。
OpenGL ES是對圖層進行取色，采樣，生成紋理，綁定數據，生成前后幀緩存。
最后，會將生成的前后幀緩存提交到GPU。
OpenGL ES具體的可以去看《OpenGL ES應用開發實踐指南：iOS卷》。
GPU渲染職能
? ??????Tiled-Based?渲染是移動設備的主流。整個屏幕會分解成N*Npixels組成的瓦片（Tiles），tiles存儲于SoC 緩存（SoC=system on chip，片上系統，是在整塊芯片上實現一個復雜系統功能，如intel cpu，整合了集顯，內存控制器，cpu運核心，緩存，隊列、非核心和I/O控制器）。幾何形狀會分解成若干個tiles，對于每一塊tile，把必須的幾何體提交到OpenGL ES，然后進行渲染（光柵化）。完畢后，將tile的數據發送回cpu。
1、普通的Tile-Based渲染流程
?CommandBuffer:接受OpenGL ES處理完畢的渲染指令
?Tiler:調用頂點著色器，把頂點數據進行分塊（Tiling）
?ParameterBuffer:接受分塊完畢的tile和對應的渲染參數
?Renderer:調用片元著色器，進行像素渲染
?RenderBuffer:存儲渲染完畢的像素
2.離屏渲染
3.渲染遲滯
????????由于一幀內的頂點和像素的處理是發生在相對獨立的階段的，應用程序會將CPU處理, 頂點處理，像素處理安排在相鄰的三幀中。如下圖所示。當一個渲染命令提交后，要在當幀之后的第三幀，渲染結果才會顯示出來。
四、卡頓原因
????????在 VSync 信號到來后，系統圖形服務會通過 CADisplayLink 等機制通知 App，App 主線程開始在 CPU 中計算顯示內容，比如視圖的創建、布局計算、圖片解碼、文本繪制等。隨后 CPU 會將計算好的內容提交到 GPU 去，由 GPU 進行變換、合成、渲染。隨后 GPU 會把渲染結果提交到幀緩沖區去，等待下一次 VSync 信號到來時顯示到屏幕上。由于垂直同步的機制，如果在一個 VSync 時間內，CPU 或者 GPU 沒有完成內容提交，則那一幀就會被丟棄，等待下一次機會再顯示，而這時顯示屏會保留之前的內容不變。這就是界面卡頓的原因。
????????從上面的圖中可以看到，CPU 和 GPU 不論哪個阻礙了顯示流程，都會造成掉幀引起卡頓。
五、優化方案
CPU方面優化
1.對象創建
????????對象的創建會分配內存、調整屬性、甚至還有讀取文件等操作，比較消耗 CPU 資源。
? ??????盡量用輕量的對象代替重量的對象，可以對性能有所優化。比如 CALayer 比 UIView 要輕量許多，那么不需要響應觸摸事件的控件，用 CALayer 顯示會更加合適。如果對象不涉及 UI 操作，則盡量放到后臺線程去創建，但可惜的是包含有 CALayer 的控件，都只能在主線程創建和操作。通過 Storyboard 創建視圖對象時，其資源消耗會比直接通過代碼創建對象要大非常多，在性能敏感的界面里，Storyboard 并不是一個好的技術選擇。
? ??????盡量推遲對象創建的時間，并把對象的創建分散到多個任務中去。盡管這實現起來比較麻煩，并且帶來的優勢并不多，但如果有能力做，還是要盡量嘗試一下。如果對象可以復用，并且復用的代價比釋放、創建新對象要小，那么這類對象應當盡量放到一個緩存池里復用。
2.對象調整
? ??????對象的調整也經常是消耗 CPU 資源的地方。這里特別說一下 CALayer：CALayer 內部并沒有屬性，當調用屬性方法時，它內部是通過運行時?resolveInstanceMethod 為對象臨時添加一個方法，并把對應屬性值保存到內部的一個 Dictionary 里，同時還會通知 delegate、創建動畫等等，非常消耗資源。UIView 的關于顯示相關的屬性（比如 frame/bounds/transform）等實際上都是 CALayer 屬性映射來的，所以對 UIView 的這些屬性進行調整時，消耗的資源要遠大于一般的屬性。對此你在應用中，應該盡量減少不必要的屬性修改。
????????當視圖層次調整時，UIView、CALayer 之間會出現很多方法調用與通知，所以在優化性能時，應該盡量避免調整視圖層次、添加和移除視圖。
3.對象銷毀
????????對象的銷毀雖然消耗資源不多，但累積起來也是不容忽視的。通常當容器類持有大量對象時，其銷毀時的資源消耗就非常明顯。同樣的，如果對象可以放到后臺線程去釋放，那就挪到后臺線程去。這里有個小 Tip：把對象捕獲到 block 中，然后扔到后臺隊列去隨便發送個消息以避免編譯器警告，就可以讓對象在后臺線程銷毀了。
4.布局計算
????????視圖布局的計算是 App 中最為常見的消耗 CPU 資源的地方。如果能在后臺線程提前計算好視圖布局、并且對視圖布局進行緩存，那么這個地方基本就不會產生性能問題了。
????????不論通過何種技術對視圖進行布局，其最終都會落到對 UIView.frame/bounds/center 等屬性的調整上。上面也說過，對這些屬性的調整非常消耗資源，所以盡量提前計算好布局，在需要時一次性調整好對應屬性，而不要多次、頻繁的計算和調整這些屬性。
5.文本計算
????????如果一個界面中包含大量文本（比如微博微信朋友圈等），文本的寬高計算會占用很大一部分資源，并且不可避免。如果你對文本顯示沒有特殊要求，可以參考下 UILabel 內部的實現方式：用 [NSAttributedString boundingRectWithSize:options:context:] 來計算文本寬高，用 -[NSAttributedString drawWithRect:options:context:] 來繪制文本。盡管這兩個方法性能不錯，但仍舊需要放到后臺線程進行以避免阻塞主線程。
????????如果你用 CoreText 繪制文本，那就可以先生成 CoreText 排版對象，然后自己計算了，并且 CoreText 對象還能保留以供稍后繪制使用。
6.文本渲染
????????屏幕上能看到的所有文本內容控件，包括 UIWebView，在底層都是通過 CoreText 排版、繪????制為 Bitmap 顯示的。常見的文本控件 （UILabel、UITextView 等），其排版和繪制都是在主線程進行的，當顯示大量文本時，CPU 的壓力會非常大。對此解決方案只有一個，那就是自定義文本控件，用 TextKit 或最底層的 CoreText 對文本異步繪制。盡管這實現起來非常麻煩，但其帶來的優勢也非常大，CoreText 對象創建好后，能直接獲取文本的寬高等信息，避免了多次計算（調整 UILabel 大小時算一遍、UILabel 繪制時內部再算一遍）；CoreText 對象占用內存較少，可以緩存下來以備稍后多次渲染。
7.圖片的解碼
????????當你用 UIImage 或 CGImageSource 的那幾個方法創建圖片時，圖片數據并不會立刻解碼。圖片設置到 UIImageView 或者 CALayer.contents 中去，并且 CALayer 被提交到 GPU 前，CGImage 中的數據才會得到解碼。這一步是發生在主線程的，并且不可避免。如果想要繞開這個機制，常見的做法是在后臺線程先把圖片繪制到 CGBitmapContext 中，然后從 Bitmap 直接創建圖片。
8.圖像的繪制
????????圖像的繪制通常是指用那些以 CG 開頭的方法把圖像繪制到畫布中，然后從畫布創建圖片并顯示這樣一個過程。這個最常見的地方就是 [UIView drawRect:] 里面了。由于 CoreGraphic 方法通常都是線程安全的，所以圖像的繪制可以放到后臺線程進行。
GPU方面優化
????????相對于 CPU 來說，GPU 能干的事情比較單一：接收提交的紋理（Texture）和頂點描述（三角形），應用變換（transform）、混合并渲染，然后輸出到屏幕上。通常你所能看到的內容，主要也就是紋理（圖片）和形狀（三角模擬的矢量圖形）兩類。
1.紋理的渲染
????????所有的 Bitmap，包括圖片、文本、柵格化的內容，最終都要由內存提交到顯存，綁定為 GPU Texture。不論是提交到顯存的過程，還是 GPU 調整和渲染 Texture 的過程，都要消耗不少 GPU 資源。當在較短時間顯示大量圖片時（比如 TableView 存在非常多的圖片并且快速滑動時），CPU 占用率很低，GPU 占用非常高，界面仍然會掉幀。避免這種情況的方法只能是盡量減少在短時間內大量圖片的顯示，盡可能將多張圖片合成為一張進行顯示。
????????當圖片過大，超過 GPU 的最大紋理尺寸時，圖片需要先由 CPU 進行預處理，這對 CPU 和 GPU 都會帶來額外的資源消耗。目前來說，iPhone 4S 以上機型，紋理尺寸上限都是 4096×4096，更詳細的資料可以看這里：iosres.com。所以，盡量不要讓圖片和視圖的大小超過這個值。
2.視圖的混合 (Composing)
????????當多個視圖（或者說 CALayer）重疊在一起顯示時，GPU 會首先把他們混合到一起。如果視圖結構過于復雜，混合的過程也會消耗很多 GPU 資源。為了減輕這種情況的 GPU 消耗，應用應當盡量減少視圖數量和層次，并在不透明的視圖里標明 opaque 屬性以避免無用的 Alpha 通道合成。當然，這也可以用上面的方法，把多個視圖預先渲染為一張圖片來顯示。
3.圖形的生成。
????????CALayer 的 border、圓角、陰影、遮罩（mask），CASharpLayer 的矢量圖形顯示，通常會觸發離屏渲染（offscreen rendering），而離屏渲染通常發生在 GPU 中。當一個列表視圖中出現大量圓角的 CALayer，并且快速滑動時，可以觀察到 GPU 資源已經占滿，而 CPU 資源消耗很少。這時界面仍然能正常滑動，但平均幀數會降到很低。為了避免這種情況，可以嘗試開啟 CALayer.shouldRasterize 屬性，但這會把原本離屏渲染的操作轉嫁到 CPU 上去。對于只需要圓角的某些場合，也可以用一張已經繪制好的圓角圖片覆蓋到原本視圖上面來模擬相同的視覺效果。最徹底的解決辦法，就是把需要顯示的圖形在后臺線程繪制為圖片，避免使用圓角、陰影、遮罩等屬性。
六、Core Animation工具
????????對于離屏渲染的檢測，蘋果為我們提供了一個測試工具Core Animation。可以在Xcode->Open Develeper Tools->Instruments中找到，如下圖：
????????Core Animation工具用來監測Core Animation性能，提供可見的FPS值，并且提供幾個選項來測量渲染性能。如下圖：
下面我們來說明每個選項的功能：
Color Blended Layers：這個選項如果勾選，你能看到哪個layer是透明的，GPU正在做混合計算。顯示紅色的就是透明的，綠色就是不透明的。
Color Hits Green and Misses Red：如果勾選這個選項，且當我們代碼中有設置shouldRasterize為YES，那么紅色代表沒有復用離屏渲染的緩存，綠色則表示復用了緩存。我們當然希望能夠復用。
Color Copied Images：按照官方的說法，當圖片的顏色格式GPU不支持的時候，Core Animation會
Color Immediately：默認情況下Core Animation工具以每毫秒10次的頻率更新圖層調試顏色，如果勾選這個選項則移除10ms的延遲。對某些情況需要這樣，但是有可能影響正常幀數的測試。
Color Misaligned Images：勾選此項，如果圖片需要縮放則標記為黃色，如果沒有像素對齊則標記為紫色。像素對齊我們已經在上面有所介紹。
Color Offscreen-Rendered Yellow：用來檢測離屏渲染的，如果顯示黃色，表示有離屏渲染。當然還要結合Color Hits Green and Misses Red來看，是否復用了緩存。
Color OpenGL Fast Path Blue：這個選項對那些使用OpenGL的圖層才有用，像是GLKView或者 CAEAGLLayer，如果不顯示藍色則表示使用了CPU渲染，繪制在了屏幕外，顯示藍色表示正常。
Flash Updated Regions：當對圖層重繪的時候回顯示黃色，如果頻繁發生則會影響性能。可以用增加緩存來增強性能。
七、其它
???????Core Animation 在 RunLoop 中注冊了一個 Observer，監聽了 BeforeWaiting 和 Exit 事件。當一個觸摸事件到來時，RunLoop 被喚醒，App 中的代碼會執行一些操作，比如創建和調整視圖層級、設置 UIView 的 frame、修改 CALayer 的透明度、為視圖添加一個動畫；這些操作最終都會被 CALayer 標記，并通過 CATransaction 提交到一個中間狀態去。當上面所有操作結束后，RunLoop 即將進入休眠（或者退出）時，關注該事件的 Observer 都會得到通知。這時 Core Animation 注冊的那個 Observer 就會在回調中，把所有的中間狀態合并提交到 GPU 去顯示；如果此處有動畫，通過 DisplayLink 穩定的刷新機制會不斷的喚醒runloop，使得不斷的有機會觸發observer回調，從而根據時間來不斷更新這個動畫的屬性值并繪制出來。
