在了解屏幕卡頓現(xiàn)象之前，我們先來了解一下屏幕顯示圖像的原理。
屏幕顯示圖像的原理
首先從過去的 CRT 顯示器原理說起。CRT 的電子槍按照上面方式，從上到下一行行掃描，掃描完成后顯示器就呈現(xiàn)一幀畫面，隨后電子槍回到初始位置繼續(xù)下一次掃描。為了把顯示器的顯示過程和系統(tǒng)的視頻控制器進(jìn)行同步，顯示器（或者其他硬件）會(huì)用硬件時(shí)鐘產(chǎn)生一系列的定時(shí)信號。當(dāng)電子槍換到新的一行，準(zhǔn)備進(jìn)行掃描時(shí)，顯示器會(huì)發(fā)出一個(gè)水平同步信號（horizonal synchronization），簡稱HSync；而當(dāng)一幀畫面繪制完成后，電子槍回復(fù)到原位，準(zhǔn)備畫下一幀前，顯示器會(huì)發(fā)出一個(gè)垂直同步信號（vertical synchronization），簡稱 VSync。顯示器通常以固定頻率進(jìn)行刷新，這個(gè)刷新率就是 VSync 信號產(chǎn)生的頻率。盡管現(xiàn)在的設(shè)備大都是液晶顯示屏了，但原理仍然沒有變。
通常來說，計(jì)算機(jī)系統(tǒng)中CPU、GPU、顯示器是以上面這種方式協(xié)同工作的。CPU 計(jì)算好顯示內(nèi)容提交到 GPU，GPU 渲染完成后將渲染結(jié)果放入幀緩沖區(qū)，隨后視頻控制器會(huì)按照 VSync 信號逐行讀取幀緩沖區(qū)的數(shù)據(jù)，經(jīng)過可能的數(shù)模轉(zhuǎn)換傳遞給顯示器顯示。
屏幕卡頓
在最簡單的情況下，幀緩沖區(qū)只有一個(gè)，這時(shí)幀緩沖區(qū)的讀取和刷新都都會(huì)有比較大的效率問題。為了解決效率問題，顯示系統(tǒng)通常會(huì)引入兩個(gè)緩沖區(qū)，即雙緩沖機(jī)制。在這種情況下，GPU 會(huì)預(yù)先渲染好一幀放入一個(gè)緩沖區(qū)內(nèi)，讓視頻控制器讀取，當(dāng)下一幀渲染好后，GPU 會(huì)直接把視頻控制器的指針指向第二個(gè)緩沖器。如此一來效率會(huì)有很大的提升。
雙緩沖雖然能解決效率問題，但會(huì)引入一個(gè)新的問題。當(dāng)視頻控制器還未讀取完成時(shí)，即屏幕內(nèi)容剛顯示一半時(shí)，GPU 將新的一幀內(nèi)容提交到幀緩沖區(qū)并把兩個(gè)緩沖區(qū)進(jìn)行交換后，視頻控制器就會(huì)把新的一幀數(shù)據(jù)的下半段顯示到屏幕上，造成畫面撕裂現(xiàn)象，如下圖：
為了解決這個(gè)問題，GPU 通常有一個(gè)機(jī)制叫做垂直同步（簡寫也是 V-Sync），當(dāng)開啟垂直同步后，GPU 會(huì)等待顯示器的 VSync 信號發(fā)出后，才進(jìn)行新的一幀渲染和緩沖區(qū)更新。這樣能解決畫面撕裂現(xiàn)象，也增加了畫面流暢度，但需要消費(fèi)更多的計(jì)算資源，也會(huì)帶來部分延遲。
那么目前主流的移動(dòng)設(shè)備是什么情況呢？從網(wǎng)上查到的資料可以知道，iOS 設(shè)備會(huì)始終使用雙緩存+垂直同步。而安卓設(shè)備直到 4.1 版本，Google 才開始引入這種機(jī)制，目前安卓系統(tǒng)是三緩存+垂直同步。
卡頓產(chǎn)生的原因和解決方案
在 VSync 信號到來后，系統(tǒng)圖形服務(wù)會(huì)通過 CADisplayLink 等機(jī)制通知 App，App 主線程開始在 CPU 中計(jì)算顯示內(nèi)容，比如視圖的創(chuàng)建、布局計(jì)算、圖片解碼、文本繪制等。隨后 CPU 會(huì)將計(jì)算好的內(nèi)容提交到 GPU 去，由 GPU 進(jìn)行變換、合成、渲染。隨后 GPU 會(huì)把渲染結(jié)果提交到幀緩沖區(qū)去，等待下一次 VSync 信號到來時(shí)顯示到屏幕上。由于垂直同步的機(jī)制，如果在一個(gè) VSync 時(shí)間內(nèi)，CPU 或者 GPU 沒有完成內(nèi)容提交，則那一幀就會(huì)被丟棄，等待下一次機(jī)會(huì)再顯示，而這時(shí)顯示屏?xí)Ａ糁暗膬?nèi)容不變。這就是界面卡頓的原因。
從上面的圖中可以看到，CPU 和 GPU 不論哪個(gè)阻礙了顯示流程，都會(huì)造成掉幀現(xiàn)象。所以開發(fā)時(shí)，也需要分別對 CPU 和 GPU 壓力進(jìn)行評估和優(yōu)化。
CPU 資源消耗原因和解決方案
對象創(chuàng)建
對象的創(chuàng)建會(huì)分配內(nèi)存、調(diào)整屬性、甚至還有讀取文件等操作，比較消耗 CPU 資源。盡量用輕量的對象代替重量的對象，可以對性能有所優(yōu)化。比如 CALayer比UIView 要輕量許多，那么不需要響應(yīng)觸摸事件的控件，用 CALayer 顯示會(huì)更加合適。如果對象不涉及 UI 操作，則盡量放到后臺線程去創(chuàng)建，但可惜的是包含有 CALayer 的控件，都只能在主線程創(chuàng)建和操作。通過 Storyboard創(chuàng)建視圖對象時(shí)，其資源消耗會(huì)比直接通過代碼創(chuàng)建對象要大非常多，在性能敏感的界面里，Storyboard 并不是一個(gè)好的技術(shù)選擇。
盡量推遲對象創(chuàng)建的時(shí)間，并把對象的創(chuàng)建分散到多個(gè)任務(wù)中去。盡管這實(shí)現(xiàn)起來比較麻煩，并且?guī)淼膬?yōu)勢并不多，但如果有能力做，還是要盡量嘗試一下。如果對象可以復(fù)用，并且復(fù)用的代價(jià)比釋放、創(chuàng)建新對象要小，那么這類對象應(yīng)當(dāng)盡量放到一個(gè)緩存池里復(fù)用。
對象調(diào)整
對象的調(diào)整也經(jīng)常是消耗 CPU 資源的地方。這里特別說一下 CALayer：CALayer 內(nèi)部并沒有屬性，當(dāng)調(diào)用屬性方法時(shí)，它內(nèi)部是通過運(yùn)行時(shí) resolveInstanceMethod為對象臨時(shí)添加一個(gè)方法，并把對應(yīng)屬性值保存到內(nèi)部的一個(gè)Dictionary 里，同時(shí)還會(huì)通知delegate、創(chuàng)建動(dòng)畫等等，非常消耗資源。UIView 的關(guān)于顯示相關(guān)的屬性（比如 frame/bounds/transform）等實(shí)際上都是 CALayer 屬性映射來的，所以對 UIView 的這些屬性進(jìn)行調(diào)整時(shí)，消耗的資源要遠(yuǎn)大于一般的屬性。對此你在應(yīng)用中，應(yīng)該盡量減少不必要的屬性修改。
當(dāng)視圖層次調(diào)整時(shí)，UIView、CALayer 之間會(huì)出現(xiàn)很多方法調(diào)用與通知，所以在優(yōu)化性能時(shí)，應(yīng)該盡量避免調(diào)整視圖層次、添加和移除視圖。
對象銷毀
對象的銷毀雖然消耗資源不多，但累積起來也是不容忽視的。通常當(dāng)容器類持有大量對象時(shí)，其銷毀時(shí)的資源消耗就非常明顯。同樣的，如果對象可以放到后臺線程去釋放，那就挪到后臺線程去。這里有個(gè)小 Tip：把對象捕獲到 block 中，然后扔到后臺隊(duì)列去隨便發(fā)送個(gè)消息以避免編譯器警告，就可以讓對象在后臺線程銷毀了。
NSArray *tmp = self.array;
self.array = nil;
dispatch_async(queue, ^{
[tmp class];
});
布局計(jì)算
視圖布局的計(jì)算是 App 中最為常見的消耗 CPU 資源的地方。如果能在后臺線程提前計(jì)算好視圖布局、并且對視圖布局進(jìn)行緩存，那么這個(gè)地方基本就不會(huì)產(chǎn)生性能問題了。
不論通過何種技術(shù)對視圖進(jìn)行布局，其最終都會(huì)落到對 UIView.frame/bounds/center等屬性的調(diào)整上。上面也說過，對這些屬性的調(diào)整非常消耗資源，所以盡量提前計(jì)算好布局，在需要時(shí)一次性調(diào)整好對應(yīng)屬性，而不要多次、頻繁的計(jì)算和調(diào)整這些屬性。
Autolayout
Autolayout 是蘋果本身提倡的技術(shù)，在大部分情況下也能很好的提升開發(fā)效率，但是 Autolayout 對于復(fù)雜視圖來說常常會(huì)產(chǎn)生嚴(yán)重的性能問題。隨著視圖數(shù)量的增長，Autolayout 帶來的 CPU 消耗會(huì)呈指數(shù)級上升。 如果你不想手動(dòng)調(diào)整 frame 等屬性，你可以用一些工具方法替代（比如常見的 left/right/top/bottom/width/height快捷屬性），或者使用 ComponentKit、AsyncDisplayKit 等框架。
文本計(jì)算
如果一個(gè)界面中包含大量文本（比如微博微信朋友圈等），文本的寬高計(jì)算會(huì)占用很大一部分資源，并且不可避免。如果你對文本顯示沒有特殊要求，可以參考下 UILabel 內(nèi)部的實(shí)現(xiàn)方式：用[NSAttributedString boundingRectWithSize:options:context:]來計(jì)算文本寬高，用-[NSAttributedString drawWithRect:options:context:]來繪制文本。盡管這兩個(gè)方法性能不錯(cuò)，但仍舊需要放到后臺線程進(jìn)行以避免阻塞主線程。
如果你用 CoreText 繪制文本，那就可以先生成 CoreText 排版對象，然后自己計(jì)算了，并且 CoreText 對象還能保留以供稍后繪制使用。
文本渲染
屏幕上能看到的所有文本內(nèi)容控件，包括UIWebView，在底層都是通過 CoreText 排版、繪制為 Bitmap顯示的。常見的文本控件 （UILabel、UITextView 等），其排版和繪制都是在主線程進(jìn)行的，當(dāng)顯示大量文本時(shí)，CPU 的壓力會(huì)非常大。對此解決方案只有一個(gè)，那就是自定義文本控件，用 TextKit 或最底層的 CoreText 對文本異步繪制。盡管這實(shí)現(xiàn)起來非常麻煩，但其帶來的優(yōu)勢也非常大，CoreText 對象創(chuàng)建好后，能直接獲取文本的寬高等信息，避免了多次計(jì)算（調(diào)整 UILabel 大小時(shí)算一遍、UILabel 繪制時(shí)內(nèi)部再算一遍）；CoreText 對象占用內(nèi)存較少，可以緩存下來以備稍后多次渲染。
圖片的解碼
當(dāng)你用 UIImage 或 CGImageSource 的那幾個(gè)方法創(chuàng)建圖片時(shí)，圖片數(shù)據(jù)并不會(huì)立刻解碼。圖片設(shè)置到 UIImageView 或者 CALayer.contents 中去，并且 CALayer 被提交到 GPU 前，CGImage 中的數(shù)據(jù)才會(huì)得到解碼。這一步是發(fā)生在主線程的，并且不可避免。如果想要繞開這個(gè)機(jī)制，常見的做法是在后臺線程先把圖片繪制到 CGBitmapContext 中，然后從 Bitmap直接創(chuàng)建圖片。目前常見的網(wǎng)絡(luò)圖片庫都自帶這個(gè)功能。
圖像的繪制
圖像的繪制通常是指用那些以CG開頭的方法把圖像繪制到畫布中，然后從畫布創(chuàng)建圖片并顯示這樣一個(gè)過程。這個(gè)最常見的地方就是[UIView drawRect:]里面了。由于CoreGraphic方法通常都是線程安全的，所以圖像的繪制可以很容易的放到后臺線程進(jìn)行。一個(gè)簡單異步繪制的過程大致如下（實(shí)際情況會(huì)比這個(gè)復(fù)雜得多，但原理基本一致）：
- (void)display {
dispatch_async(backgroundQueue, ^{
CGContextRef ctx = CGBitmapContextCreate(...);
// draw in context...
CGImageRef img = CGBitmapContextCreateImage(ctx);
CFRelease(ctx);
dispatch_async(mainQueue, ^{
layer.contents = img;
});
});
}
GPU 資源消耗原因和解決方案
相對于 CPU 來說，GPU 能干的事情比較單一：接收提交的紋理（Texture）和頂點(diǎn)描述（三角形），應(yīng)用變換（transform）、混合并渲染，然后輸出到屏幕上。通常你所能看到的內(nèi)容，主要也就是紋理（圖片）和形狀（三角模擬的矢量圖形）兩類。
紋理的渲染
所有的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ù)處理，這對 CPU 和 GPU 都會(huì)帶來額外的資源消耗。目前來說，iPhone 4S 以上機(jī)型，紋理尺寸上限都是4096x4096，更詳細(xì)的資料可以看這里：iosres.com。所以，盡量不要讓圖片和視圖的大小超過這個(gè)值。
視圖的混合 (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ù)先渲染為一張圖片來顯示。
圖形的生成
CALayer 的border、圓角、陰影、遮罩（mask），CASharpLayer 的矢量圖形顯示，通常會(huì)觸發(fā)離屏渲染（offscreen rendering），而離屏渲染通常發(fā)生在 GPU 中。當(dāng)一個(gè)列表視圖中出現(xiàn)大量圓角的 CALayer，并且快速滑動(dòng)時(shí)，可以觀察到 GPU 資源已經(jīng)占滿，而 CPU 資源消耗很少。這時(shí)界面仍然能正?；瑒?dòng)，但平均幀數(shù)會(huì)降到很低。為了避免這種情況，可以嘗試開啟 CALayer.shouldRasterize屬性，但這會(huì)把原本離屏渲染的操作轉(zhuǎn)嫁到 CPU 上去。在下個(gè)文章我們會(huì)探索離屏渲染產(chǎn)生的原因及如何避免離屏渲染，敬請期待。
補(bǔ)充知識
【面試題】UIView和CALayer的關(guān)系
- UIView基于UIKit框架，可以處理用戶觸摸事件，并管理子視圖
- CALayer基于CoreAnimation，而CoreAnimation是基于QuartzCode的。所以CALayer只負(fù)責(zé)顯示，不能處理用戶的觸摸事件
- 從父類來說，CALayer繼承的是NSObject，而UIView是直接繼承自UIResponder的，所以UIVIew相比CALayer而言，只是多了事件處理功能，
- 從底層來說，UIView屬于UIKit的組件，而UIKit的組件到最后都會(huì)被分解成layer，存儲到圖層樹中
- 在應(yīng)用層面來說，需要與用戶交互時(shí)，使用UIView，不需要交互時(shí)，使用兩者都可以
** UIView 與 CALayer各自的作用**
UIView
- UIView屬于UIKIt
- 負(fù)責(zé)繪制圖形和動(dòng)畫操作
- 用于界面布局和子視圖的管理
- 處理用戶的點(diǎn)擊事件
CALayer
- CALayer屬于CoreAnimation
- 只負(fù)責(zé)顯示，且顯示的是位圖
- CALayer既用于UIKit，也用于APPKit，
==> UIKit是iOS平臺的渲染框架，APPKit是Mac OSX系統(tǒng)下的渲染框架，
==> 由于iOS和Mac兩個(gè)系統(tǒng)的界面布局并不是一致的，iOS是基于多點(diǎn)觸控的交互方式，而Mac OSX是基于鼠標(biāo)鍵盤的交互方式，且分別在對應(yīng)的框架中做了布局的操作，所以并不需要layer載體去布局，且不用迎合任何布局方式。
