本文章將記錄有關(guān) iOS App的卡頓原因惜互、優(yōu)化和UI繪制原理，如有錯(cuò)誤歡迎指出~
圖像顯示原理
在使用App中，首先映入眼簾的就是圖像，它也是App傳遞思想和精神的核心∏撬蓿可以說，沒有圖像访雪，App將不復(fù)存在详瑞。
先來了解下圖像的顯示原理：
通常來說，CPU臣缀、GPU坝橡、顯示器通過總線連接協(xié)同工作
CPU進(jìn)行一系列的工作，輸出一個(gè)位圖(
Bitmap)在合適的時(shí)機(jī)精置，經(jīng)由總線把Bitmap提交給GPU
GPU進(jìn)行圖層渲染计寇，將結(jié)果放入幀緩存區(qū)(FrameBuffer)中
視頻控制器根據(jù)垂直同步信號(hào)(VSyn信號(hào))，在指定時(shí)間之前提取幀緩存區(qū)中的圖像脂倦，顯示到手機(jī)屏幕上
掉幀番宁、卡頓的產(chǎn)生及優(yōu)化
我們已經(jīng)知道系統(tǒng)是如何生成圖像，并展示給用戶了赖阻。接下來討論下用戶關(guān)注的另一個(gè)大問題：流暢性蝶押。
通常來說， 頁面滑動(dòng)的流暢性是60FPS(畫面每秒傳輸幀數(shù))政供，即每秒鐘刷新六十幀畫面播聪，16.7(1/60)毫秒刷新一幀畫面。如下示意圖
如果CPU和GPU無法在2個(gè)VSync信號(hào)(垂直同步信號(hào))之間完成一幀圖像內(nèi)容的提交布隔，則那一幀就會(huì)被丟棄(掉幀)离陶，而這時(shí)顯示器還是顯示之前的圖像，視覺上就會(huì)感覺卡頓衅檀，就要開始砸手機(jī)了招刨。
在這期間，CPU和GPU都在搞些什么事情呢哀军？
當(dāng)VSync信號(hào)到來后沉眶，系統(tǒng)圖形服務(wù)會(huì)通過 CADisplayLink 等機(jī)制通知 App，App 主線程開始
在 CPU 中
-
Layout
UI布局
文本計(jì)算
-
Display
- 繪制（drawRect）
-
Prepare
- 圖片解碼
-
Commit
- 提交位圖給GPU
GPU趕緊
頂點(diǎn)著色
圖元裝配
光柵化
片段著色
片段處理
提交到幀緩沖區(qū)中
等待下一次 VSync 信號(hào)到來時(shí)顯示到屏幕上杉适。
綜上谎倔，我們知道，要解決流暢性的問題猿推，可以從CPU片习、GPU兩個(gè)層面進(jìn)行優(yōu)化。
優(yōu)化方案可進(jìn)入傳送陣ibireme 大神的iOS 保持界面流暢的技巧文章中的CPU 資源消耗原因和解決方案 和 GPU 資源消耗原因和解決方案 蹬叭，這里面包括了開發(fā)中的大部分場(chǎng)景藕咏，可以幫助我們快速定位卡頓的原因，迅速解決卡頓秽五。
以下是對(duì)大神優(yōu)化方案的小結(jié)：
CPU層面
對(duì)象的創(chuàng)建孽查、調(diào)整、銷毀
預(yù)排版（布局計(jì)算坦喘、文本計(jì)算）
預(yù)渲染（文本等異步繪制盲再，圖片編解碼等）
GPU層面
文理渲染（避免離屏渲染）
視圖混合（減少視圖層級(jí)）
UIView繪制原理
UIView 表示屏幕上的一塊矩形區(qū)域，負(fù)責(zé)渲染區(qū)域的內(nèi)容瓣铣，并且響應(yīng)該區(qū)域內(nèi)發(fā)生的觸摸事件洲胖。它在 iOS App 中占有絕對(duì)重要的地位，因?yàn)?iOS 中幾乎所有可視化控件都是 UIView 的子類坯沪。
談到UIView绿映，就不得不讓我們談到 CALayer。每個(gè)UIView都持有一個(gè)layer(CALayer的實(shí)例)腐晾，layer負(fù)責(zé)的是繪圖部分的功能叉弦。UIView更像是一個(gè)CALayer的管理器，訪問UIView的跟繪圖和坐標(biāo)有關(guān)的屬性藻糖，例如frame淹冰，bounds等等，實(shí)際上內(nèi)部都是在訪問它所包含的CALayer的相關(guān)屬性巨柒。
說到底樱拴，UIView 和 CALayer 遵循單一職責(zé)原則：
UIView為CALayer提供顯示繪制內(nèi)容的容器柠衍，以及負(fù)責(zé)處理觸摸等事件。
CALayer負(fù)責(zé)繪制內(nèi)容
UIView繪制流程圖
當(dāng)我們調(diào)用
[UIView setNeedsDisplay]方法時(shí)晶乔，并沒有執(zhí)行立即執(zhí)行繪制工作珍坊。而是馬上調(diào)用
[view.layer setNeedsDisplay]方法，給當(dāng)前layer打上臟標(biāo)記正罢。在當(dāng)前RunLoop快要結(jié)束的時(shí)候調(diào)用
layer的display方法阵漏，來進(jìn)入到當(dāng)前視圖的真正繪制當(dāng)中。-
在
layer的display方法內(nèi)部翻具，系統(tǒng)會(huì)判斷layer的layer.delegate是否實(shí)現(xiàn)了displayLayer:方法NO履怯，則執(zhí)行系統(tǒng)的繪制流程
YES，則會(huì)進(jìn)入異步繪制的入口
系統(tǒng)繪制流程圖
在layer內(nèi)部會(huì)創(chuàng)建一個(gè)backing store裆泳，我們可以理解為CGContextRef上下文叹洲。
-
判斷l(xiāng)ayer是否有delegate:
YES，則會(huì)執(zhí)行
[layer.delegate drawLayer:inContext]（這個(gè)方法的執(zhí)行是在系統(tǒng)內(nèi)部執(zhí)行的）工禾，在這個(gè)方法中會(huì)調(diào)用view的drawRect:方法疹味，也就是我們重寫view的drawRect:方法才會(huì)被調(diào)用NO，會(huì)調(diào)用layer的
drawInContext:方法帜篇，也就是我們可以重寫的layer的該方法糙捺，此刻會(huì)被調(diào)用到笙隙。
最后把繪制完的backing store（可以理解為位圖）提交給GPU洪灯。
異步繪制時(shí)序圖
異步繪制的入口在[layer.delegate displayLayer]，通過實(shí)現(xiàn)layer的代理方法
- 生成對(duì)應(yīng)的位圖(bitmap);
- 將
bitmap賦值給layer.content屬性;
總結(jié)
如果界面出現(xiàn)卡頓竟痰，可以從 CPU 和 GUP兩個(gè)層面去優(yōu)化签钩。
UIView本身并不能繪制內(nèi)容，而只是提供一個(gè)顯示內(nèi)容的容器坏快，具體的繪制工作是由它持有的CALayer來完成的铅檩。
