UI視圖的事件傳遞、顯示原理、繪制原理、離屏渲染

一、UIView和CALayer

1、關系

UIView屬性:MyView、layer、backgroundColor。其中layer其實就是CALayer的類型,backgroundColor是對CALayer同名屬性方法的包裝,UIView顯示是由CALayer的contents決定的。關系圖如下:


UIView和CALayer之間的關系

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范圍內,如果在范圍內就會\color{red}{倒序遍歷}(最后添加到UIWindow上的視圖最優先被遍歷到)子視圖來查找最終響應這個事件的視圖,即在每一個視圖都會調用hitTest: withEvent:方法,并返回一個響應視圖,如果視圖有值,這個視圖就做為最終的事件響應視圖。如果事件一直傳遞到UIAppliction還是沒處理,那就會忽略掉。如圖所示:

事件傳遞流程圖
  • hitTest: withEvent:系統實現

在這個系統方法內部會優先判斷當前視圖的hidden、userInteractionEnabled和alpha屬性,如果當前視圖不隱藏,可交互且alpha>0.01 則會調用pointInside: withEvent:,否則返回nil結束事件。通過調用pointInside: withEvent:判斷當前點是否在視圖內,如果其返回YES則會遍歷當前視圖的子視圖的hitTest: withEvent:直到找到sv!=nil返回sv ,結束事件;如果沒有子視圖就返回當前視圖,結束事件。如圖所示:

hitTest: withEvent:系統實現圖

2、響應機制

視圖響應傳遞鏈的流程圖。注意:箭頭表示\color{red}{下一個響應者}

蘋果官網的響應流程圖
  • 視圖事件響應系統方法

///告訴此對象在視圖或窗口中發生了一個或多個新觸摸
- (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(垂直同步信號)在指定時間之前去提取對應幀緩沖區當中的屏幕顯示內容,最終顯示到顯示器即手機屏幕上。如圖所示:

圖像顯示原理圖1
圖像顯示原理圖2
  • CPU工作
    1.Layout: UI布局,文本計算
    2.Display: 繪制
    3.Prepare: 圖片解碼
    4.Commit:提交位圖

  • GPU渲染管線
    頂點著色,圖元裝配,光柵化,片段著色,片段處理

  • UI卡頓、掉幀原因
    由圖像的顯示原理,我們知道一幀的顯示是由CPU和GPU共同決定的。一般來說,頁面滑動流暢是60fps,也就是1s有60幀更新,即每隔16.7ms就要產生一幀畫面,而如果CPU和GPU加起來的處理時間超過了16.7ms,就會造成掉幀甚至卡頓。

UI卡頓、掉幀原因圖解

四、滑動優化方案

因為圖像原理可知CPU和GPU共同決定了UI是否卡頓、掉幀,所以優化需從\color{red}{CPU和GPU}解決。優化方案是從iOS 保持界面流暢的技巧中copy??的,大家可以看看這篇文章。

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

\color{red}{對象創建}

對象的創建會分配內存、調整屬性、甚至還有讀取文件等操作,比較消耗 CPU 資源。盡量用輕量的對象代替重量的對象,可以對性能有所優化。比如 CALayer 比 UIView 要輕量許多,那么不需要響應觸摸事件的控件,用 CALayer 顯示會更加合適。如果對象不涉及 UI 操作,則盡量放到后臺線程去創建,但可惜的是包含有 CALayer 的控件,都只能在主線程創建和操作。通過 Storyboard 創建視圖對象時,其資源消耗會比直接通過代碼創建對象要大非常多,在性能敏感的界面里,Storyboard 并不是一個好的技術選擇。

盡量推遲對象創建的時間,并把對象的創建分散到多個任務中去。盡管這實現起來比較麻煩,并且帶來的優勢并不多,但如果有能力做,還是要盡量嘗試一下。如果對象可以復用,并且復用的代價比釋放、創建新對象要小,那么這類對象應當盡量放到一個緩存池里復用。

\color{red}{對象調整}

對象的調整也經常是消耗 CPU 資源的地方。這里特別說一下 CALayer:CALayer 內部并沒有屬性,當調用屬性方法時,它內部是通過運行時 resolveInstanceMethod 為對象臨時添加一個方法,并把對應屬性值保存到內部的一個 Dictionary 里,同時還會通知 delegate、創建動畫等等,非常消耗資源。UIView 的關于顯示相關的屬性(比如 frame/bounds/transform)等實際上都是 CALayer 屬性映射來的,所以對 UIView 的這些屬性進行調整時,消耗的資源要遠大于一般的屬性。對此你在應用中,應該盡量減少不必要的屬性修改。

當視圖層次調整時,UIView、CALayer 之間會出現很多方法調用與通知,所以在優化性能時,應該盡量避免調整視圖層次、添加和移除視圖。

\color{red}{對象銷毀}

對象的銷毀雖然消耗資源不多,但累積起來也是不容忽視的。通常當容器類持有大量對象時,其銷毀時的資源消耗就非常明顯。同樣的,如果對象可以放到后臺線程去釋放,那就挪到后臺線程去。這里有個小 Tip:把對象捕獲到 block 中,然后扔到后臺隊列去隨便發送個消息以避免編譯器警告,就可以讓對象在后臺線程銷毀了。

NSArray *tmp = self.array;
self.array = nil;
dispatch_async(queue, ^{
    [tmp class];
});

\color{red}{布局計算}

視圖布局的計算是 App 中最為常見的消耗 CPU 資源的地方。如果能在后臺線程提前計算好視圖布局、并且對視圖布局進行緩存,那么這個地方基本就不會產生性能問題了。

不論通過何種技術對視圖進行布局,其最終都會落到對 UIView.frame/bounds/center 等屬性的調整上。上面也說過,對這些屬性的調整非常消耗資源,所以盡量提前計算好布局,在需要時一次性調整好對應屬性,而不要多次、頻繁的計算和調整這些屬性。

\color{red}{Autolayout}

Autolayout 是蘋果本身提倡的技術,在大部分情況下也能很好的提升開發效率,但是 Autolayout 對于復雜視圖來說常常會產生嚴重的性能問題。隨著視圖數量的增長,Autolayout 帶來的 CPU 消耗會呈指數級上升。具體數據可以看這個文章:http://pilky.me/36/。 如果你不想手動調整 frame 等屬性,你可以用一些工具方法替代(比如常見的 left/right/top/bottom/width/height 快捷屬性),或者使用 ComponentKit、AsyncDisplayKit 等框架。

\color{red}{文本計算}

如果一個界面中包含大量文本(比如微博微信朋友圈等),文本的寬高計算會占用很大一部分資源,并且不可避免。如果你對文本顯示沒有特殊要求,可以參考下 UILabel 內部的實現方式:用 [NSAttributedString boundingRectWithSize:options:context:] 來計算文本寬高,用 -[NSAttributedString drawWithRect:options:context:] 來繪制文本。盡管這兩個方法性能不錯,但仍舊需要放到后臺線程進行以避免阻塞主線程。

如果你用 CoreText 繪制文本,那就可以先生成 CoreText 排版對象,然后自己計算了,并且 CoreText 對象還能保留以供稍后繪制使用。

\color{red}{文本渲染}

屏幕上能看到的所有文本內容控件,包括 UIWebView,在底層都是通過 CoreText 排版、繪制為 Bitmap 顯示的。常見的文本控件 (UILabel、UITextView 等),其排版和繪制都是在主線程進行的,當顯示大量文本時,CPU 的壓力會非常大。對此解決方案只有一個,那就是自定義文本控件,用 TextKit 或最底層的 CoreText 對文本異步繪制。盡管這實現起來非常麻煩,但其帶來的優勢也非常大,CoreText 對象創建好后,能直接獲取文本的寬高等信息,避免了多次計算(調整 UILabel 大小時算一遍、UILabel 繪制時內部再算一遍);CoreText 對象占用內存較少,可以緩存下來以備稍后多次渲染。

\color{red}{圖片的解碼}

當你用 UIImage 或 CGImageSource 的那幾個方法創建圖片時,圖片數據并不會立刻解碼。圖片設置到 UIImageView 或者 CALayer.contents 中去,并且 CALayer 被提交到 GPU 前,CGImage 中的數據才會得到解碼。這一步是發生在主線程的,并且不可避免。如果想要繞開這個機制,常見的做法是在后臺線程先把圖片繪制到 CGBitmapContext 中,然后從 Bitmap 直接創建圖片。目前常見的網絡圖片庫都自帶這個功能。

\color{red}{圖像的繪制}

圖像的繪制通常是指用那些以 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)、混合并渲染,然后輸出到屏幕上。通常你所能看到的內容,主要也就是紋理(圖片)和形狀(三角模擬的矢量圖形)兩類。

\color{red}{紋理渲染}

所有的 Bitmap,包括圖片、文本、柵格化的內容,最終都要由內存提交到顯存,綁定為 GPU Texture。不論是提交到顯存的過程,還是 GPU 調整和渲染 Texture 的過程,都要消耗不少 GPU 資源。當在較短時間顯示大量圖片時(比如 TableView 存在非常多的圖片并且快速滑動時),CPU 占用率很低,GPU 占用非常高,界面仍然會掉幀。避免這種情況的方法只能是盡量減少在短時間內大量圖片的顯示,盡可能將多張圖片合成為一張進行顯示。

當圖片過大,超過 GPU 的最大紋理尺寸時,圖片需要先由 CPU 進行預處理,這對 CPU 和 GPU 都會帶來額外的資源消耗。目前來說,iPhone 4S 以上機型,紋理尺寸上限都是 4096×4096,更詳細的資料可以看這里:iosres.com。所以,盡量不要讓圖片和視圖的大小超過這個值。

\color{red}{視圖混合 (Composing)}

當多個視圖(或者說 CALayer)重疊在一起顯示時,GPU 會首先把他們混合到一起。如果視圖結構過于復雜,混合的過程也會消耗很多 GPU 資源。為了減輕這種情況的 GPU 消耗,應用應當盡量減少視圖數量和層次,并在不透明的視圖里標明 opaque 屬性以避免無用的 Alpha 通道合成。當然,這也可以用上面的方法,把多個視圖預先渲染為一張圖片來顯示。

\color{red}{圖形的生成}

CALayer 的 border、圓角、陰影、遮罩(mask),CASharpLayer 的矢量圖形顯示,通常會觸發離屏渲染(offscreen rendering),而離屏渲染通常發生在 GPU 中。當一個列表視圖中出現大量圓角的 CALayer,并且快速滑動時,可以觀察到 GPU 資源已經占滿,而 CPU 資源消耗很少。這時界面仍然能正常滑動,但平均幀數會降到很低。為了避免這種情況,可以嘗試開啟 CALayer.shouldRasterize 屬性,但這會把原本離屏渲染的操作轉嫁到 CPU 上去。對于只需要圓角的某些場合,也可以用一張已經繪制好的圓角圖片覆蓋到原本視圖上面來模擬相同的視覺效果。最徹底的解決辦法,就是把需要顯示的圖形在后臺線程繪制為圖片,避免使用圓角、陰影、遮罩等屬性。

五、UIView的繪制原理

繪制原理:首先調用[UIView setNeedsDisplay],此時并沒有立刻發生UIView的繪制工作,接下來會調用[UIView.layer setNeedsDisplay]方法,之后會等到當前RunLoop\color{red}{將要結束}時調用[CALayer display],然后進入當前UIView真正的繪制流程。[CALayer display]內部實現中有layer.delegate respondsTo@selector(displayLayer:)這個代理方法判斷是否響應displayLayer:方法。若是代理不響應displayLayer:方法就會進入到系統繪制流程;若是代理響應displayLayer:方法就會進入異步繪制入口。如圖所示:

UIView的繪制原理圖
  • 系統繪制流程
系統繪制流程圖
  • 異步繪制

實現-[layer.delegate displayLayer]方法就會進入異步繪制。在異步繪制流程的過程當中就需要1.代理負責生成對應的bitmap;2.設置該bitmap作為layer.contents屬性的設置。

異步繪制流程圖

六、離屏渲染

  • On-Screen Rendering

在屏渲染:指的是\color{red}{GPU}的渲染操作是在當前用于顯示的屏幕緩沖區中進行。

  • Off-Screen Rendering

離屏渲染:指的是\color{red}{GPU}在當前屏幕緩沖區以外\color{red}{新開辟}一個緩沖區進行渲染操作。

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)

寫這篇文章目的主要是當做開發筆記,當中有的內容是在其他文章中看到的,打算分享一下,大家可以參考一下。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,882評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,208評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,746評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,666評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,477評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,960評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,047評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,200評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,726評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,617評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,807評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,327評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,049評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,425評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,674評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,432評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,769評論 2 372

推薦閱讀更多精彩內容