一、UIView和CALayer
1探赫、關(guān)系
UIView屬性：MyView型宙、layer、backgroundColor伦吠。其中l(wèi)ayer其實(shí)就是CALayer的類型妆兑，backgroundColor是對CALayer同名屬性方法的包裝，UIView顯示是由CALayer的contents決定的毛仪。關(guān)系圖如下：
2搁嗓、區(qū)別
UIView 為其提供內(nèi)容，以及負(fù)責(zé)處理觸摸等事件箱靴，參與響應(yīng)鏈腺逛。
CALayer 負(fù)責(zé)顯示內(nèi)容contents。
注：這里體現(xiàn)的是單一職責(zé)衡怀。
二棍矛、視圖事件傳遞和響應(yīng)機(jī)制
1安疗、事件傳遞
- 事件傳遞系統(tǒng)方法如下:
/**
哪個(gè)視圖響應(yīng)事件就把哪個(gè)視圖返回
@param point 接收器局部坐標(biāo)系中指定的點(diǎn)（邊界）
@param event 保證調(diào)用此方法的事件，如果從事件處理代碼外部調(diào)用此方法够委，則可以指定nil
@return 響應(yīng)的UIView荐类。如果該點(diǎn)完全位于接收者的視圖層次結(jié)構(gòu)之外，則返回nil茁帽。
*/
- (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent*)event;
/**
判斷某一個(gè)點(diǎn)擊的位置是否在當(dāng)前視圖的范圍內(nèi)
@param point 點(diǎn)擊點(diǎn)的位置
@param event 保證調(diào)用此方法的事件玉罐，如果從事件處理代碼外部調(diào)用此方法，則可以指定nil
@return 如果點(diǎn)位于接收者的界限內(nèi)脐雪，則為YES; 否則厌小，不。
*/
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event;
- 事件傳遞流程：
點(diǎn)擊屏幕某一位置,這個(gè)事件就會傳遞到UIApplication战秋，再由UIApplication傳遞到當(dāng)前的UIWindow 璧亚，然后UIWindow里就會判斷hitTest: withEvent:來返回最終的響應(yīng)視圖，這個(gè)是通過調(diào)用pointInside: withEvent:來判斷當(dāng)前點(diǎn)擊位置是否在UIWindow范圍內(nèi)脂信，如果在范圍內(nèi)就會(最后添加到UIWindow上的視圖最優(yōu)先被遍歷到)子視圖來查找最終響應(yīng)這個(gè)事件的視圖癣蟋，即在每一個(gè)視圖都會調(diào)用
hitTest: withEvent:方法，并返回一個(gè)響應(yīng)視圖狰闪，如果視圖有值疯搅，這個(gè)視圖就做為最終的事件響應(yīng)視圖。如果事件一直傳遞到UIAppliction還是沒處理埋泵，那就會忽略掉幔欧。如圖所示：
-
hitTest: withEvent:系統(tǒng)實(shí)現(xiàn)
在這個(gè)系統(tǒng)方法內(nèi)部會優(yōu)先判斷當(dāng)前視圖的hidden、userInteractionEnabled和alpha屬性丽声，如果當(dāng)前視圖不隱藏礁蔗，可交互且alpha>0.01 則會調(diào)用pointInside: withEvent:，否則返回nil結(jié)束事件雁社。通過調(diào)用pointInside: withEvent:判斷當(dāng)前點(diǎn)是否在視圖內(nèi)浴井，如果其返回YES則會遍歷當(dāng)前視圖的子視圖的hitTest: withEvent:直到找到sv!=nil返回sv ，結(jié)束事件霉撵；如果沒有子視圖就返回當(dāng)前視圖磺浙，結(jié)束事件。如圖所示：
2徒坡、響應(yīng)機(jī)制
視圖響應(yīng)傳遞鏈的流程圖撕氧。注意：箭頭表示
- 視圖事件響應(yīng)系統(tǒng)方法
///告訴此對象在視圖或窗口中發(fā)生了一個(gè)或多個(gè)新觸摸
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;
///當(dāng)與事件關(guān)聯(lián)的一個(gè)或多個(gè)觸摸發(fā)生更改時(shí)，告知響應(yīng)者
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;
///當(dāng)從視圖或窗口抬起一個(gè)或多個(gè)手指時(shí)告訴響應(yīng)者
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;
三喇完、圖像顯示原理
原理：CPU和GPU都是通過總線連接起來呵曹，在CPU中輸出的位圖經(jīng)由總線在合適的時(shí)機(jī)上傳給GPU，GPU拿到位圖做相應(yīng)位圖的圖層渲染何暮、紋理合成奄喂，之后將渲染好的結(jié)果放到幀緩沖區(qū)，由視頻控制器根據(jù)Vsync（垂直同步信號）在指定時(shí)間之前去提取對應(yīng)幀緩沖區(qū)當(dāng)中的屏幕顯示內(nèi)容海洼，最終顯示到顯示器即手機(jī)屏幕上跨新。如圖所示：
CPU工作
1.Layout: UI布局，文本計(jì)算
2.Display: 繪制
3.Prepare: 圖片解碼
4.Commit：提交位圖GPU渲染管線
頂點(diǎn)著色坏逢，圖元裝配域帐，光柵化，片段著色是整，片段處理UI卡頓肖揣、掉幀原因
由圖像的顯示原理，我們知道一幀的顯示是由CPU和GPU共同決定的浮入。一般來說龙优，頁面滑動流暢是60fps，也就是1s有60幀更新事秀，即每隔16.7ms就要產(chǎn)生一幀畫面彤断，而如果CPU和GPU加起來的處理時(shí)間超過了16.7ms，就會造成掉幀甚至卡頓易迹。
四、滑動優(yōu)化方案
因?yàn)閳D像原理可知CPU和GPU共同決定了UI是否卡頓睹欲、掉幀供炼，所以優(yōu)化需從解決。優(yōu)化方案是從iOS 保持界面流暢的技巧中copy??的窘疮，大家可以看看這篇文章袋哼。
- CPU 資源消耗原因和解決方案
對象的創(chuàng)建會分配內(nèi)存、調(diào)整屬性考余、甚至還有讀取文件等操作先嬉，比較消耗 CPU 資源。盡量用輕量的對象代替重量的對象楚堤，可以對性能有所優(yōu)化疫蔓。比如 CALayer 比 UIView 要輕量許多，那么不需要響應(yīng)觸摸事件的控件身冬，用 CALayer 顯示會更加合適衅胀。如果對象不涉及 UI 操作，則盡量放到后臺線程去創(chuàng)建酥筝，但可惜的是包含有 CALayer 的控件滚躯，都只能在主線程創(chuàng)建和操作。通過 Storyboard 創(chuàng)建視圖對象時(shí)，其資源消耗會比直接通過代碼創(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)整也經(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í)還會通知 delegate批糟、創(chuà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 之間會出現(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ì)算是 App 中最為常見的消耗 CPU 資源的地方。如果能在后臺線程提前計(jì)算好視圖布局辟躏、并且對視圖布局進(jìn)行緩存谷扣，那么這個(gè)地方基本就不會產(chǎn)生性能問題了。
不論通過何種技術(shù)對視圖進(jìn)行布局捎琐，其最終都會落到對 UIView.frame/bounds/center 等屬性的調(diào)整上。上面也說過裹匙，對這些屬性的調(diào)整非常消耗資源瑞凑，所以盡量提前計(jì)算好布局，在需要時(shí)一次性調(diào)整好對應(yīng)屬性概页，而不要多次籽御、頻繁的計(jì)算和調(diào)整這些屬性。
Autolayout 是蘋果本身提倡的技術(shù)惰匙，在大部分情況下也能很好的提升開發(fā)效率技掏，但是 Autolayout 對于復(fù)雜視圖來說常常會產(chǎn)生嚴(yán)重的性能問題。隨著視圖數(shù)量的增長项鬼，Autolayout 帶來的 CPU 消耗會呈指數(shù)級上升哑梳。具體數(shù)據(jù)可以看這個(gè)文章：http://pilky.me/36/。 如果你不想手動調(diào)整 frame 等屬性绘盟，你可以用一些工具方法替代（比如常見的 left/right/top/bottom/width/height 快捷屬性）鸠真，或者使用 ComponentKit、AsyncDisplayKit 等框架龄毡。
如果一個(gè)界面中包含大量文本（比如微博微信朋友圈等）吠卷，文本的寬高計(jì)算會占用很大一部分資源，并且不可避免沦零。如果你對文本顯示沒有特殊要求祭隔，可以參考下 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 的壓力會非常大。對此解決方案只有一個(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ù)并不會立刻解碼洼怔。圖片設(shè)置到 UIImageView 或者 CALayer.contents 中去署惯，并且 CALayer 被提交到 GPU 前，CGImage 中的數(shù)據(jù)才會得到解碼茴厉。這一步是發(fā)生在主線程的泽台，并且不可避免。如果想要繞開這個(gè)機(jī)制矾缓，常見的做法是在后臺線程先把圖片繪制到 CGBitmapContext 中怀酷，然后從 Bitmap 直接創(chuàng)建圖片。目前常見的網(wǎng)絡(luò)圖片庫都自帶這個(gè)功能嗜闻。
圖像的繪制通常是指用那些以 CG 開頭的方法把圖像繪制到畫布中蜕依，然后從畫布創(chuàng)建圖片并顯示這樣一個(gè)過程。這個(gè)最常見的地方就是 [UIView drawRect:] 里面了琉雳。由于 CoreGraphic 方法通常都是線程安全的样眠，所以圖像的繪制可以很容易的放到后臺線程進(jìn)行。一個(gè)簡單異步繪制的過程大致如下（實(shí)際情況會比這個(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 存在非常多的圖片并且快速滑動時(shí)）蜂嗽，CPU 占用率很低，GPU 占用非常高殃恒，界面仍然會掉幀。避免這種情況的方法只能是盡量減少在短時(shí)間內(nèi)大量圖片的顯示辱揭，盡可能將多張圖片合成為一張進(jìn)行顯示离唐。
當(dāng)圖片過大，超過 GPU 的最大紋理尺寸時(shí)问窃，圖片需要先由 CPU 進(jìn)行預(yù)處理亥鬓，這對 CPU 和 GPU 都會帶來額外的資源消耗。目前來說域庇，iPhone 4S 以上機(jī)型嵌戈，紋理尺寸上限都是 4096×4096，更詳細(xì)的資料可以看這里：iosres.com听皿。所以熟呛，盡量不要讓圖片和視圖的大小超過這個(gè)值。
當(dāng)多個(gè)視圖（或者說 CALayer）重疊在一起顯示時(shí)尉姨，GPU 會首先把他們混合到一起庵朝。如果視圖結(jié)構(gòu)過于復(fù)雜，混合的過程也會消耗很多 GPU 資源又厉。為了減輕這種情況的 GPU 消耗九府，應(yīng)用應(yīng)當(dāng)盡量減少視圖數(shù)量和層次，并在不透明的視圖里標(biāo)明 opaque 屬性以避免無用的 Alpha 通道合成覆致。當(dāng)然侄旬，這也可以用上面的方法，把多個(gè)視圖預(yù)先渲染為一張圖片來顯示煌妈。
CALayer 的 border儡羔、圓角宣羊、陰影、遮罩（mask）笔链，CASharpLayer 的矢量圖形顯示段只，通常會觸發(fā)離屏渲染（offscreen rendering），而離屏渲染通常發(fā)生在 GPU 中鉴扫。當(dāng)一個(gè)列表視圖中出現(xiàn)大量圓角的 CALayer赞枕，并且快速滑動時(shí)，可以觀察到 GPU 資源已經(jīng)占滿坪创，而 CPU 資源消耗很少炕婶。這時(shí)界面仍然能正常滑動莱预，但平均幀數(shù)會降到很低柠掂。為了避免這種情況，可以嘗試開啟 CALayer.shouldRasterize 屬性依沮，但這會把原本離屏渲染的操作轉(zhuǎn)嫁到 CPU 上去涯贞。對于只需要圓角的某些場合，也可以用一張已經(jīng)繪制好的圓角圖片覆蓋到原本視圖上面來模擬相同的視覺效果危喉。最徹底的解決辦法宋渔，就是把需要顯示的圖形在后臺線程繪制為圖片，避免使用圓角辜限、陰影皇拣、遮罩等屬性。
五薄嫡、UIView的繪制原理
繪制原理：首先調(diào)用[UIView setNeedsDisplay]氧急，此時(shí)并沒有立刻發(fā)生UIView的繪制工作，接下來會調(diào)用[UIView.layer setNeedsDisplay]方法毫深，之后會等到當(dāng)前RunLoop時(shí)調(diào)用
[CALayer display]吩坝，然后進(jìn)入當(dāng)前UIView真正的繪制流程。[CALayer display]內(nèi)部實(shí)現(xiàn)中有layer.delegate respondsTo@selector(displayLayer:)這個(gè)代理方法判斷是否響應(yīng)displayLayer:方法费什。若是代理不響應(yīng)displayLayer:方法就會進(jìn)入到系統(tǒng)繪制流程钾恢；若是代理響應(yīng)displayLayer:方法就會進(jìn)入異步繪制入口。如圖所示:
- 系統(tǒng)繪制流程
- 異步繪制
實(shí)現(xiàn)-[layer.delegate displayLayer]方法就會進(jìn)入異步繪制鸳址。在異步繪制流程的過程當(dāng)中就需要1.代理負(fù)責(zé)生成對應(yīng)的bitmap瘩蚪；2.設(shè)置該bitmap作為layer.contents屬性的設(shè)置。
六稿黍、離屏渲染
- On-Screen Rendering
在屏渲染：指的是的渲染操作是在當(dāng)前用于顯示的屏幕緩沖區(qū)中進(jìn)行疹瘦。
- Off-Screen Rendering
離屏渲染：指的是在當(dāng)前屏幕緩沖區(qū)以外
一個(gè)緩沖區(qū)進(jìn)行渲染操作。
1.為什么離屏渲染耗性能巡球？
在進(jìn)行離屏渲染時(shí)言沐，首選需要新開辟一個(gè)緩沖區(qū)邓嘹，屏幕渲染會有一個(gè)上下文環(huán)境的概念，離屏渲染的整個(gè)過程需要切換上下文環(huán)境险胰，先從當(dāng)前屏幕切換到離屏汹押，等結(jié)束后又要將上下文環(huán)境切換回來，這就是離屏渲染消耗性能的原因起便。
2.為什么有離屏渲染這套機(jī)制呢?
因?yàn)樵谠O(shè)置視圖的圖層屬性圓角棚贾，陰影，遮罩的時(shí)候榆综，圖層屬性的混合體被指定為在未預(yù)合成之前(下一個(gè)VSync信號開始前)不能直接在屏幕中繪制妙痹，所以就需要屏幕外渲染。
3.哪些操作會觸發(fā)離屏渲染?
官方公開的的資料里關(guān)于離屏渲染的信息最早是在 2011年的 WWDC鼻疮，在多個(gè) session 里都提到了盡量避免會觸發(fā)離屏渲染的效果怯伊，包括：
1.mask, shadow, group opacity, edge antialiasing。
2.shouldRasterize（光柵化）： 將圖轉(zhuǎn)化為一個(gè)個(gè)柵格組成的圖象判沟。 光柵化特點(diǎn)：每個(gè)元素對應(yīng)幀緩沖區(qū)中的一像素耿芹。
3.masks（遮罩）是layer的一個(gè)屬性.
4.shadows（陰影）
5.edge antialiasing（抗鋸齒）
6.group opacity（不透明）
7.復(fù)雜形狀設(shè)置圓角等
8.漸變
9.Text（UILabel, CATextLayer, Core Text, etc）
寫這篇文章目的主要是當(dāng)做開發(fā)筆記，當(dāng)中有的內(nèi)容是在其他文章中看到的挪哄，打算分享一下猩系，大家可以參考一下。
