一、UIView和CALayer
1、關系
UIView屬性:MyView、layer、backgroundColor。其中layer其實就是CALayer的類型,backgroundColor是對CALayer同名屬性方法的包裝,UIView顯示是由CALayer的contents決定的。關系圖如下:
2、區別
UIView 為其提供內容,以及負責處理觸摸等事件,參與響應鏈。
CALayer 負責顯示內容contents。
注:這里體現的是單一職責。
二、視圖事件傳遞和響應機制
1、事件傳遞
- 事件傳遞系統方法如下:
/**
哪個視圖響應事件就把哪個視圖返回
@param point 接收器局部坐標系中指定的點(邊界)
@param event 保證調用此方法的事件,如果從事件處理代碼外部調用此方法,則可以指定nil
@return 響應的UIView。如果該點完全位于接收者的視圖層次結構之外,則返回nil。
*/
- (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent*)event;
/**
判斷某一個點擊的位置是否在當前視圖的范圍內
@param point 點擊點的位置
@param event 保證調用此方法的事件,如果從事件處理代碼外部調用此方法,則可以指定nil
@return 如果點位于接收者的界限內,則為YES; 否則,不。
*/
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event;
- 事件傳遞流程:
點擊屏幕某一位置,這個事件就會傳遞到UIApplication,再由UIApplication傳遞到當前的UIWindow ,然后UIWindow里就會判斷hitTest: withEvent:
來返回最終的響應視圖,這個是通過調用pointInside: withEvent:
來判斷當前點擊位置是否在UIWindow范圍內,如果在范圍內就會(最后添加到UIWindow上的視圖最優先被遍歷到)子視圖來查找最終響應這個事件的視圖,即在每一個視圖都會調用
hitTest: withEvent:
方法,并返回一個響應視圖,如果視圖有值,這個視圖就做為最終的事件響應視圖。如果事件一直傳遞到UIAppliction還是沒處理,那就會忽略掉。如圖所示:
-
hitTest: withEvent:
系統實現
在這個系統方法內部會優先判斷當前視圖的hidden、userInteractionEnabled和alpha屬性,如果當前視圖不隱藏,可交互且alpha>0.01 則會調用pointInside: withEvent:
,否則返回nil結束事件。通過調用pointInside: withEvent:
判斷當前點是否在視圖內,如果其返回YES則會遍歷當前視圖的子視圖的hitTest: withEvent:
直到找到sv!=nil返回sv ,結束事件;如果沒有子視圖就返回當前視圖,結束事件。如圖所示:
2、響應機制
視圖響應傳遞鏈的流程圖。注意:箭頭表示
- 視圖事件響應系統方法
///告訴此對象在視圖或窗口中發生了一個或多個新觸摸
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;
///當與事件關聯的一個或多個觸摸發生更改時,告知響應者
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;
///當從視圖或窗口抬起一個或多個手指時告訴響應者
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;
三、圖像顯示原理
原理:CPU和GPU都是通過總線連接起來,在CPU中輸出的位圖經由總線在合適的時機上傳給GPU,GPU拿到位圖做相應位圖的圖層渲染、紋理合成,之后將渲染好的結果放到幀緩沖區,由視頻控制器根據Vsync(垂直同步信號)在指定時間之前去提取對應幀緩沖區當中的屏幕顯示內容,最終顯示到顯示器即手機屏幕上。如圖所示:
CPU工作
1.Layout: UI布局,文本計算
2.Display: 繪制
3.Prepare: 圖片解碼
4.Commit:提交位圖GPU渲染管線
頂點著色,圖元裝配,光柵化,片段著色,片段處理UI卡頓、掉幀原因
由圖像的顯示原理,我們知道一幀的顯示是由CPU和GPU共同決定的。一般來說,頁面滑動流暢是60fps,也就是1s有60幀更新,即每隔16.7ms就要產生一幀畫面,而如果CPU和GPU加起來的處理時間超過了16.7ms,就會造成掉幀甚至卡頓。
四、滑動優化方案
因為圖像原理可知CPU和GPU共同決定了UI是否卡頓、掉幀,所以優化需從解決。優化方案是從iOS 保持界面流暢的技巧中copy??的,大家可以看看這篇文章。
- CPU 資源消耗原因和解決方案
對象的創建會分配內存、調整屬性、甚至還有讀取文件等操作,比較消耗 CPU 資源。盡量用輕量的對象代替重量的對象,可以對性能有所優化。比如 CALayer 比 UIView 要輕量許多,那么不需要響應觸摸事件的控件,用 CALayer 顯示會更加合適。如果對象不涉及 UI 操作,則盡量放到后臺線程去創建,但可惜的是包含有 CALayer 的控件,都只能在主線程創建和操作。通過 Storyboard 創建視圖對象時,其資源消耗會比直接通過代碼創建對象要大非常多,在性能敏感的界面里,Storyboard 并不是一個好的技術選擇。
盡量推遲對象創建的時間,并把對象的創建分散到多個任務中去。盡管這實現起來比較麻煩,并且帶來的優勢并不多,但如果有能力做,還是要盡量嘗試一下。如果對象可以復用,并且復用的代價比釋放、創建新對象要小,那么這類對象應當盡量放到一個緩存池里復用。
對象的調整也經常是消耗 CPU 資源的地方。這里特別說一下 CALayer:CALayer 內部并沒有屬性,當調用屬性方法時,它內部是通過運行時 resolveInstanceMethod 為對象臨時添加一個方法,并把對應屬性值保存到內部的一個 Dictionary 里,同時還會通知 delegate、創建動畫等等,非常消耗資源。UIView 的關于顯示相關的屬性(比如 frame/bounds/transform)等實際上都是 CALayer 屬性映射來的,所以對 UIView 的這些屬性進行調整時,消耗的資源要遠大于一般的屬性。對此你在應用中,應該盡量減少不必要的屬性修改。
當視圖層次調整時,UIView、CALayer 之間會出現很多方法調用與通知,所以在優化性能時,應該盡量避免調整視圖層次、添加和移除視圖。
對象的銷毀雖然消耗資源不多,但累積起來也是不容忽視的。通常當容器類持有大量對象時,其銷毀時的資源消耗就非常明顯。同樣的,如果對象可以放到后臺線程去釋放,那就挪到后臺線程去。這里有個小 Tip:把對象捕獲到 block 中,然后扔到后臺隊列去隨便發送個消息以避免編譯器警告,就可以讓對象在后臺線程銷毀了。
NSArray *tmp = self.array;
self.array = nil;
dispatch_async(queue, ^{
[tmp class];
});
視圖布局的計算是 App 中最為常見的消耗 CPU 資源的地方。如果能在后臺線程提前計算好視圖布局、并且對視圖布局進行緩存,那么這個地方基本就不會產生性能問題了。
不論通過何種技術對視圖進行布局,其最終都會落到對 UIView.frame/bounds/center 等屬性的調整上。上面也說過,對這些屬性的調整非常消耗資源,所以盡量提前計算好布局,在需要時一次性調整好對應屬性,而不要多次、頻繁的計算和調整這些屬性。
Autolayout 是蘋果本身提倡的技術,在大部分情況下也能很好的提升開發效率,但是 Autolayout 對于復雜視圖來說常常會產生嚴重的性能問題。隨著視圖數量的增長,Autolayout 帶來的 CPU 消耗會呈指數級上升。具體數據可以看這個文章:http://pilky.me/36/。 如果你不想手動調整 frame 等屬性,你可以用一些工具方法替代(比如常見的 left/right/top/bottom/width/height 快捷屬性),或者使用 ComponentKit、AsyncDisplayKit 等框架。
如果一個界面中包含大量文本(比如微博微信朋友圈等),文本的寬高計算會占用很大一部分資源,并且不可避免。如果你對文本顯示沒有特殊要求,可以參考下 UILabel 內部的實現方式:用 [NSAttributedString boundingRectWithSize:options:context:] 來計算文本寬高,用 -[NSAttributedString drawWithRect:options:context:] 來繪制文本。盡管這兩個方法性能不錯,但仍舊需要放到后臺線程進行以避免阻塞主線程。
如果你用 CoreText 繪制文本,那就可以先生成 CoreText 排版對象,然后自己計算了,并且 CoreText 對象還能保留以供稍后繪制使用。
屏幕上能看到的所有文本內容控件,包括 UIWebView,在底層都是通過 CoreText 排版、繪制為 Bitmap 顯示的。常見的文本控件 (UILabel、UITextView 等),其排版和繪制都是在主線程進行的,當顯示大量文本時,CPU 的壓力會非常大。對此解決方案只有一個,那就是自定義文本控件,用 TextKit 或最底層的 CoreText 對文本異步繪制。盡管這實現起來非常麻煩,但其帶來的優勢也非常大,CoreText 對象創建好后,能直接獲取文本的寬高等信息,避免了多次計算(調整 UILabel 大小時算一遍、UILabel 繪制時內部再算一遍);CoreText 對象占用內存較少,可以緩存下來以備稍后多次渲染。
當你用 UIImage 或 CGImageSource 的那幾個方法創建圖片時,圖片數據并不會立刻解碼。圖片設置到 UIImageView 或者 CALayer.contents 中去,并且 CALayer 被提交到 GPU 前,CGImage 中的數據才會得到解碼。這一步是發生在主線程的,并且不可避免。如果想要繞開這個機制,常見的做法是在后臺線程先把圖片繪制到 CGBitmapContext 中,然后從 Bitmap 直接創建圖片。目前常見的網絡圖片庫都自帶這個功能。
圖像的繪制通常是指用那些以 CG 開頭的方法把圖像繪制到畫布中,然后從畫布創建圖片并顯示這樣一個過程。這個最常見的地方就是 [UIView drawRect:] 里面了。由于 CoreGraphic 方法通常都是線程安全的,所以圖像的繪制可以很容易的放到后臺線程進行。一個簡單異步繪制的過程大致如下(實際情況會比這個復雜得多,但原理基本一致):
- (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)和頂點描述(三角形),應用變換(transform)、混合并渲染,然后輸出到屏幕上。通常你所能看到的內容,主要也就是紋理(圖片)和形狀(三角模擬的矢量圖形)兩類。
所有的 Bitmap,包括圖片、文本、柵格化的內容,最終都要由內存提交到顯存,綁定為 GPU Texture。不論是提交到顯存的過程,還是 GPU 調整和渲染 Texture 的過程,都要消耗不少 GPU 資源。當在較短時間顯示大量圖片時(比如 TableView 存在非常多的圖片并且快速滑動時),CPU 占用率很低,GPU 占用非常高,界面仍然會掉幀。避免這種情況的方法只能是盡量減少在短時間內大量圖片的顯示,盡可能將多張圖片合成為一張進行顯示。
當圖片過大,超過 GPU 的最大紋理尺寸時,圖片需要先由 CPU 進行預處理,這對 CPU 和 GPU 都會帶來額外的資源消耗。目前來說,iPhone 4S 以上機型,紋理尺寸上限都是 4096×4096,更詳細的資料可以看這里:iosres.com。所以,盡量不要讓圖片和視圖的大小超過這個值。
當多個視圖(或者說 CALayer)重疊在一起顯示時,GPU 會首先把他們混合到一起。如果視圖結構過于復雜,混合的過程也會消耗很多 GPU 資源。為了減輕這種情況的 GPU 消耗,應用應當盡量減少視圖數量和層次,并在不透明的視圖里標明 opaque 屬性以避免無用的 Alpha 通道合成。當然,這也可以用上面的方法,把多個視圖預先渲染為一張圖片來顯示。
CALayer 的 border、圓角、陰影、遮罩(mask),CASharpLayer 的矢量圖形顯示,通常會觸發離屏渲染(offscreen rendering),而離屏渲染通常發生在 GPU 中。當一個列表視圖中出現大量圓角的 CALayer,并且快速滑動時,可以觀察到 GPU 資源已經占滿,而 CPU 資源消耗很少。這時界面仍然能正常滑動,但平均幀數會降到很低。為了避免這種情況,可以嘗試開啟 CALayer.shouldRasterize 屬性,但這會把原本離屏渲染的操作轉嫁到 CPU 上去。對于只需要圓角的某些場合,也可以用一張已經繪制好的圓角圖片覆蓋到原本視圖上面來模擬相同的視覺效果。最徹底的解決辦法,就是把需要顯示的圖形在后臺線程繪制為圖片,避免使用圓角、陰影、遮罩等屬性。
五、UIView的繪制原理
繪制原理:首先調用[UIView setNeedsDisplay]
,此時并沒有立刻發生UIView的繪制工作,接下來會調用[UIView.layer setNeedsDisplay]
方法,之后會等到當前RunLoop時調用
[CALayer display]
,然后進入當前UIView真正的繪制流程。[CALayer display]
內部實現中有layer.delegate respondsTo@selector(displayLayer:)
這個代理方法判斷是否響應displayLayer:
方法。若是代理不響應displayLayer:
方法就會進入到系統繪制流程;若是代理響應displayLayer:
方法就會進入異步繪制入口。如圖所示:
- 系統繪制流程
- 異步繪制
實現-[layer.delegate displayLayer]
方法就會進入異步繪制。在異步繪制流程的過程當中就需要1.代理負責生成對應的bitmap;2.設置該bitmap作為layer.contents屬性的設置。
六、離屏渲染
- On-Screen Rendering
在屏渲染:指的是的渲染操作是在當前用于顯示的屏幕緩沖區中進行。
- Off-Screen Rendering
離屏渲染:指的是在當前屏幕緩沖區以外
一個緩沖區進行渲染操作。
1.為什么離屏渲染耗性能?
在進行離屏渲染時,首選需要新開辟一個緩沖區,屏幕渲染會有一個上下文環境的概念,離屏渲染的整個過程需要切換上下文環境,先從當前屏幕切換到離屏,等結束后又要將上下文環境切換回來,這就是離屏渲染消耗性能的原因。
2.為什么有離屏渲染這套機制呢?
因為在設置視圖的圖層屬性圓角,陰影,遮罩的時候,圖層屬性的混合體被指定為在未預合成之前(下一個VSync信號開始前)不能直接在屏幕中繪制,所以就需要屏幕外渲染。
3.哪些操作會觸發離屏渲染?
官方公開的的資料里關于離屏渲染的信息最早是在 2011年的 WWDC,在多個 session 里都提到了盡量避免會觸發離屏渲染的效果,包括:
1.mask, shadow, group opacity, edge antialiasing。
2.shouldRasterize(光柵化): 將圖轉化為一個個柵格組成的圖象。 光柵化特點:每個元素對應幀緩沖區中的一像素。
3.masks(遮罩)是layer的一個屬性.
4.shadows(陰影)
5.edge antialiasing(抗鋸齒)
6.group opacity(不透明)
7.復雜形狀設置圓角等
8.漸變
9.Text(UILabel, CATextLayer, Core Text, etc)
寫這篇文章目的主要是當做開發筆記,當中有的內容是在其他文章中看到的,打算分享一下,大家可以參考一下。