第一. 界面卡頓的原因

在 VSync信號(hào)到來后五续，系統(tǒng)圖形服務(wù)會(huì)通過 CADisplayLink 等機(jī)制通知 App，App 主線程開始在CPU中計(jì)算顯示內(nèi)容啄寡，影響因素:

????對(duì)象創(chuàng)建;

????對(duì)象調(diào)整;

????對(duì)象銷毀;

????布局計(jì)算;

????Autolayout;

????文本計(jì)算;

????文本渲染;

????圖片的解碼;

????圖像的繪制.

隨后 CPU 會(huì)將計(jì)算好的內(nèi)容提交到 GPU 去位隶，由GPU進(jìn)行變換、合成陌宿、渲染。隨后 GPU 會(huì)把渲染結(jié)果提交到幀緩沖區(qū)去波丰，等待下一次 VSync 信號(hào)到來時(shí)顯示到屏幕上壳坪。由于垂直同步的機(jī)制，如果在一個(gè) VSync 時(shí)間內(nèi)掰烟，CPU 或者 GPU 沒有完成內(nèi)容提交爽蝴，則那一幀就會(huì)被丟棄，等待下一次機(jī)會(huì)再顯示纫骑，而這時(shí)顯示屏?xí)Ａ糁暗膬?nèi)容不變蝎亚。

影響因素:

????變換;

????合成;

????渲染等.

CPU 資源消耗原因和解決方案

1. 對(duì)象創(chuàng)建

對(duì)象的創(chuàng)建會(huì)分配內(nèi)存、調(diào)整屬性先馆、甚至還有讀取文件等操作发框，比較消耗 CPU 資源。盡量用輕量的對(duì)象代替重量的對(duì)象煤墙，可以對(duì)性能有所優(yōu)化梅惯。比如 CALayer 比 UIView 要輕量許多，那么不需要響應(yīng)觸摸事件的控件仿野，用 CALayer 顯示會(huì)更加合適铣减。如果對(duì)象不涉及 UI 操作，則盡量放到后臺(tái)線程去創(chuàng)建脚作，但可惜的是包含有 CALayer 的控件葫哗，都只能在主線程創(chuàng)建和操作。通過 Storyboard 創(chuàng)建視圖對(duì)象時(shí)鳖枕，其資源消耗會(huì)比直接通過代碼創(chuàng)建對(duì)象要大非常多魄梯，在性能敏感的界面里，Storyboard 并不是一個(gè)好的技術(shù)選擇宾符。

盡量推遲對(duì)象創(chuàng)建的時(shí)間，并把對(duì)象的創(chuàng)建分散到多個(gè)任務(wù)中去灭翔。盡管這實(shí)現(xiàn)起來比較麻煩魏烫，并且?guī)淼膬?yōu)勢(shì)并不多辣苏，但如果有能力做，還是要盡量嘗試一下哄褒。如果對(duì)象可以復(fù)用稀蟋，并且復(fù)用的代價(jià)比釋放、創(chuàng)建新對(duì)象要小呐赡，那么這類對(duì)象應(yīng)當(dāng)盡量放到一個(gè)緩存池里復(fù)用退客。

2. 對(duì)象調(diào)整

對(duì)象的調(diào)整也經(jīng)常是消耗 CPU 資源的地方。這里特別說一下 CALayer：CALayer 內(nèi)部并沒有屬性链嘀，當(dāng)調(diào)用屬性方法時(shí)萌狂，它內(nèi)部是通過運(yùn)行時(shí) resolveInstanceMethod 為對(duì)象臨時(shí)添加一個(gè)方法，并把對(duì)應(yīng)屬性值保存到內(nèi)部的一個(gè) Dictionary 里怀泊，同時(shí)還會(huì)通知 delegate茫藏、創(chuàng)建動(dòng)畫等等，非常消耗資源霹琼。UIView 的關(guān)于顯示相關(guān)的屬性（比如 frame/bounds/transform）等實(shí)際上都是 CALayer 屬性映射來的务傲，所以對(duì) UIView 的這些屬性進(jìn)行調(diào)整時(shí)，消耗的資源要遠(yuǎn)大于一般的屬性枣申。對(duì)此你在應(yīng)用中售葡，應(yīng)該盡量減少不必要的屬性修改。

當(dāng)視圖層次調(diào)整時(shí)忠藤，UIView挟伙、CALayer 之間會(huì)出現(xiàn)很多方法調(diào)用與通知，所以在優(yōu)化性能時(shí)熄驼，應(yīng)該盡量避免調(diào)整視圖層次像寒、添加和移除視圖。

3.對(duì)象銷毀

對(duì)象的銷毀雖然消耗資源不多瓜贾，但累積起來也是不容忽視的诺祸。通常當(dāng)容器類持有大量對(duì)象時(shí)，其銷毀時(shí)的資源消耗就非常明顯祭芦。同樣的筷笨，如果對(duì)象可以放到后臺(tái)線程去釋放，那就挪到后臺(tái)線程去龟劲。這里有個(gè)小 Tip：把對(duì)象捕獲到 block 中胃夏，然后扔到后臺(tái)隊(duì)列去隨便發(fā)送個(gè)消息以避免編譯器警告，就可以讓對(duì)象在后臺(tái)線程銷毀了昌跌。

NSArray*tmp =self.array;

self.array =nil;

dispatch_async(queue, ^{

[tmpclass];

});

4. 布局計(jì)算

視圖布局的計(jì)算是 App 中最為常見的消耗 CPU 資源的地方仰禀。如果能在后臺(tái)線程提前計(jì)算好視圖布局、并且對(duì)視圖布局進(jìn)行緩存蚕愤，那么這個(gè)地方基本就不會(huì)產(chǎn)生性能問題了答恶。

不論通過何種技術(shù)對(duì)視圖進(jìn)行布局饺蚊，其最終都會(huì)落到對(duì) UIView.frame/bounds/center 等屬性的調(diào)整上。上面也說過悬嗓，對(duì)這些屬性的調(diào)整非常消耗資源污呼，所以盡量提前計(jì)算好布局，在需要時(shí)一次性調(diào)整好對(duì)應(yīng)屬性包竹，而不要多次燕酷、頻繁的計(jì)算和調(diào)整這些屬性。

5. Autolayout

Autolayout 是蘋果本身提倡的技術(shù)周瞎，在大部分情況下也能很好的提升開發(fā)效率苗缩，但是 Autolayout 對(duì)于復(fù)雜視圖來說常常會(huì)產(chǎn)生嚴(yán)重的性能問題。隨著視圖數(shù)量的增長(zhǎng)堰氓，Autolayout 帶來的 CPU 消耗會(huì)呈指數(shù)級(jí)上升挤渐。具體數(shù)據(jù)可以看這個(gè)文章：http://pilky.me/36/。 如果你不想手動(dòng)調(diào)整 frame 等屬性双絮，你可以用一些工具方法替代（比如常見的 left/right/top/bottom/width/height 快捷屬性）浴麻，或者使用ComponentKit、AsyncDisplayKit等框架囤攀。

6. 文本計(jì)算

如果一個(gè)界面中包含大量文本（比如微博微信朋友圈等）软免，文本的寬高計(jì)算會(huì)占用很大一部分資源，并且不可避免焚挠。如果你對(duì)文本顯示沒有特殊要求膏萧，可以參考下 UILabel 內(nèi)部的實(shí)現(xiàn)方式：用[NSAttributedString boundingRectWithSize:options:context:] 來計(jì)算文本寬高，用 -[NSAttributedString drawWithRect:options:context:]來繪制文本蝌衔。盡管這兩個(gè)方法性能不錯(cuò)榛泛，但仍舊需要放到后臺(tái)線程進(jìn)行以避免阻塞主線程。

如果你用 CoreText 繪制文本噩斟，那就可以先生成CoreText排版對(duì)象曹锨，然后自己計(jì)算了，并且 CoreText 對(duì)象還能保留以供稍后繪制使用剃允。

7. 文本渲染

屏幕上能看到的所有文本內(nèi)容控件沛简，包括 UIWebView，在底層都是通過 CoreText 排版斥废、繪制為 Bitmap 顯示的椒楣。常見的文本控件 （UILabel、UITextView 等）牡肉，其排版和繪制都是在主線程進(jìn)行的捧灰，當(dāng)顯示大量文本時(shí)，CPU 的壓力會(huì)非常大统锤。對(duì)此解決方案只有一個(gè)凤壁，那就是自定義文本控件吩屹，用TextKit 或最底層的 CoreText 對(duì)文本異步繪制跪另。盡管這實(shí)現(xiàn)起來非常麻煩拧抖，但其帶來的優(yōu)勢(shì)也非常大，CoreText 對(duì)象創(chuàng)建好后免绿，能直接獲取文本的寬高等信息唧席，避免了多次計(jì)算（調(diào)整 UILabel 大小時(shí)算一遍、UILabel 繪制時(shí)內(nèi)部再算一遍）嘲驾；CoreText 對(duì)象占用內(nèi)存較少淌哟，可以緩存下來以備稍后多次渲染。

8. 圖片的解碼

當(dāng)你用 UIImage 或 CGImageSource 的那幾個(gè)方法創(chuàng)建圖片時(shí)辽故，圖片數(shù)據(jù)并不會(huì)立刻解碼徒仓。圖片設(shè)置到 UIImageView 或者 CALayer.contents 中去，并且 CALayer 被提交到 GPU 前誊垢，CGImage 中的數(shù)據(jù)才會(huì)得到解碼掉弛。這一步是發(fā)生在主線程的，并且不可避免喂走。如果想要繞開這個(gè)機(jī)制殃饿，常見的做法是在后臺(tái)線程先把圖片繪制到 CGBitmapContext 中，然后從 Bitmap 直接創(chuàng)建圖片芋肠。目前常見的網(wǎng)絡(luò)圖片庫(kù)都自帶這個(gè)功能乎芳。

9. 圖像的繪制

圖像的繪制通常是指用那些以 CG 開頭的方法把圖像繪制到畫布中，然后從畫布創(chuàng)建圖片并顯示這樣一個(gè)過程帖池。這個(gè)最常見的地方就是 [UIView drawRect:] 里面了奈惑。由于 CoreGraphic 方法通常都是線程安全的，所以圖像的繪制可以很容易的放到后臺(tái)線程進(jìn)行睡汹。一個(gè)簡(jiǎn)單異步繪制的過程大致如下（實(shí)際情況會(huì)比這個(gè)復(fù)雜得多肴甸，但原理基本一致）：

- (void)display {

dispatch_async(backgroundQueue, ^{

CGContextRefctx =CGBitmapContextCreate(...);

// draw in context...

CGImageRefimg =CGBitmapContextCreateImage(ctx);

CFRelease(ctx);

dispatch_async(mainQueue, ^{

? ? ? ? ? ? layer.contents = img;

? ? ? ? });

? ? });

}

GPU 資源消耗原因和解決方案

相對(duì)于 CPU 來說，GPU 能干的事情比較單一：

接收提交的紋理（Texture）

2頂點(diǎn)描述（三角形）

應(yīng)用變換（transform）

混合并渲染帮孔，然后輸出到屏幕上雷滋。

通常你所能看到的內(nèi)容，主要也就是紋理（圖片）和形狀（三角模擬的矢量圖形）兩類文兢。

1. 紋理的渲染

所有的 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ù)處理，這對(duì) CPU 和 GPU 都會(huì)帶來額外的資源消耗褐澎。目前來說会钝，iPhone 4S 以上機(jī)型，紋理尺寸上限都是 4096x4096工三，更詳細(xì)的資料可以看這里：iosres.com迁酸。所以，盡量不要讓圖片和視圖的大小超過這個(gè)值徒蟆。

2. 視圖的混合 (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屬性以避免無(wú)用的 Alpha 通道合成抑淫。當(dāng)然，這也可以用上面的方法姥闪，把多個(gè)視圖預(yù)先渲染為一張圖片來顯示始苇。

3. 圖形的生成。

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 上去晶框。對(duì)于只需要圓角的某些場(chǎng)合排抬，也可以用一張已經(jīng)繪制好的圓角圖片覆蓋到原本視圖上面來模擬相同的視覺效果。

最徹底的解決辦法授段，就是把需要顯示的圖形在后臺(tái)線程繪制為圖片，避免使用圓角番甩、陰影侵贵、遮罩等屬性。

OpenGL中缘薛，GPU屏幕渲染有以下兩種方式： On-Screen Rendering 意為當(dāng)前屏幕渲染窍育，指的是GPU的渲染操作是在當(dāng)前用于顯示的屏幕緩沖區(qū)中進(jìn)行。 Off-Screen Rendering 意為離屏渲染宴胧，指的是GPU在當(dāng)前屏幕緩沖區(qū)以外新開辟一個(gè)緩沖區(qū)進(jìn)行渲染操作漱抓。