一 流码、?ASDK簡介
ASDK是AsyncDisplayKit的簡稱楼雹，?是最初由Facebook的Paper應(yīng)用程序開發(fā)的UI框架辞做，主要用來解決盡可能緩解主線程的壓力莺掠，提升應(yīng)用程序的性能及使用流暢性谴蔑。
ASDK 的作者是 Scott Goodson (Linkedin)豌骏，
他曾經(jīng)在蘋果工作龟梦，負(fù)責(zé) iOS 的一些內(nèi)置應(yīng)用的開發(fā)，比如股票窃躲、計(jì)算器计贰、地圖、鐘表蒂窒、設(shè)置躁倒、Safari 等，當(dāng)然他也參與了 UIKit framework 的開發(fā)洒琢。后來他加入 Facebook 后秧秉，負(fù)責(zé) Paper 的開發(fā)，創(chuàng)建并開源了 AsyncDisplayKit衰抑。
二象迎、影響應(yīng)用程序卡頓的原因
通常來說，在顯示器發(fā)出的VSync 信號到來后（垂直同步信號）呛踊，App 主線程開始在CPU 計(jì)算好顯示內(nèi)容（比如視圖的創(chuàng)建砾淌、布局計(jì)算、圖片解碼谭网、文本繪制等）提交到 GPU中汪厨，由 GPU 進(jìn)行變換、合成愉择、渲染劫乱，GPU 渲染完成后將渲染結(jié)果放入幀緩沖區(qū)，等待下一次 VSync 信號到來锥涕，隨后視頻控制器會(huì)按照 VSync?信號逐行讀取幀緩沖區(qū)的數(shù)據(jù)衷戈，經(jīng)過數(shù)模轉(zhuǎn)換傳遞給顯示器顯示。
由于垂直同步的機(jī)制层坠，如果在一個(gè) VSync 時(shí)間內(nèi)脱惰，CPU 或者 GPU 沒有完成內(nèi)容提交，則那一幀就會(huì)被丟棄窿春，等待下一次機(jī)會(huì)再顯示，而這時(shí)顯示屏?xí)Ａ糁暗膬?nèi)容不變采盒。這就是界面卡頓的原因旧乞。
對于CPU：
1、對象創(chuàng)建
對象的創(chuàng)建會(huì)分配內(nèi)存磅氨、調(diào)整屬性尺栖、甚至還有讀取文件等操作，比較消耗 CPU 資源烦租。盡量用輕量的對象代替重量的對象延赌，可以對性能有所優(yōu)化除盏。比如 CALayer 比 UIView 要輕量許多，那么不需要響應(yīng)觸摸事件的控件挫以，用 CALayer 顯示會(huì)更加合適者蠕。如果對象不涉及 UI 操作，則盡量放到后臺(tái)線程去創(chuàng)建掐松，但可惜的是包含有 CALayer 的控件踱侣，都只能在主線程創(chuàng)建和操作。通過 Storyboard 創(chuàng)建視圖對象時(shí)大磺，其資源消耗會(huì)比直接通過代碼創(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ù)用橘茉。
2、對象調(diào)整
對象的調(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í)還會(huì)通知 delegate、創(chuàng)建動(dò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 之間會(huì)出現(xiàn)很多方法調(diào)用與通知，所以在優(yōu)化性能時(shí)出刷，應(yīng)該盡量避免調(diào)整視圖層次璧疗、添加和移除視圖。
3馁龟、對象銷毀
對象的銷毀雖然消耗資源不多崩侠，但累積起來也是不容忽視的。通常當(dāng)容器類持有大量對象時(shí)屁柏，其銷毀時(shí)的資源消耗就非常明顯啦膜。同樣的，如果對象可以放到后臺(tái)線程去釋放淌喻，那就挪到后臺(tái)線程去僧家。這里有個(gè)小 Tip：把對象捕獲到 block 中，然后扔到后臺(tái)隊(duì)列去隨便發(fā)送個(gè)消息以避免編譯器警告裸删，就可以讓對象在后臺(tái)線程銷毀了八拱。
4、布局計(jì)算
視圖布局的計(jì)算是 App 中最為常見的消耗 CPU 資源的地方涯塔。如果能在后臺(tái)線程提前計(jì)算好視圖布局肌稻、并且對視圖布局進(jìn)行緩存，那么這個(gè)地方基本就不會(huì)產(chǎn)生性能問題了匕荸。
不論通過何種技術(shù)對視圖進(jìn)行布局爹谭，其最終都會(huì)落到對 UIView.frame/bounds/center 等屬性的調(diào)整上。上面也說過榛搔，對這些屬性的調(diào)整非常消耗資源诺凡，所以盡量提前計(jì)算好布局，在需要時(shí)一次性調(diào)整好對應(yīng)屬性践惑，而不要多次腹泌、頻繁的計(jì)算和調(diào)整這些屬性。
5尔觉、Autolayout
Autolayout 是蘋果本身提倡的技術(shù)凉袱，在大部分情況下也能很好的提升開發(fā)效率，但是 Autolayout 對于復(fù)雜視圖來說常常會(huì)產(chǎn)生嚴(yán)重的性能問題侦铜。隨著視圖數(shù)量的增長专甩，Autolayout 帶來的 CPU 消耗會(huì)呈指數(shù)級上升。
6钉稍、文本計(jì)算
如果一個(gè)界面中包含大量文本（比如微博微信朋友圈等）配深，文本的寬高計(jì)算會(huì)占用很大一部分資源，并且不可避免嫁盲。如果你對文本顯示沒有特殊要求，可以參考下 UILabel 內(nèi)部的實(shí)現(xiàn)方式：用 text.boundingRect(with: , options: , attributes: , context: ) 來計(jì)算文本寬高，用 ?text.draw(at: , withAttributes: ) 來繪制文本羞秤。盡管這兩個(gè)方法性能不錯(cuò)缸托，但仍舊需要放到后臺(tái)線程進(jìn)行以避免阻塞主線程。
7瘾蛋、文本渲染
屏幕上能看到的所有文本內(nèi)容控件俐镐，包括 UIWebView，在底層都是通過 CoreText 排版哺哼、繪制為 Bitmap 顯示的佩抹。常見的文本控件 （UILabel、UITextView 等）取董，其排版和繪制都是在主線程進(jìn)行的棍苹，當(dāng)顯示大量文本時(shí)，CPU 的壓力會(huì)非常大茵汰。對此解決方案只有一個(gè)枢里，那就是自定義文本控件，用 TextKit 或最底層的 CoreText 對文本異步繪制蹂午。盡管這實(shí)現(xiàn)起來非常麻煩栏豺，但其帶來的優(yōu)勢也非常大，CoreText 對象創(chuàng)建好后豆胸，能直接獲取文本的寬高等信息奥洼，避免了多次計(jì)算（調(diào)整 UILabel 大小時(shí)算一遍、UILabel 繪制時(shí)內(nèi)部再算一遍）晚胡；CoreText 對象占用內(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ò)圖片庫都自帶這個(gè)功能。
9吱韭、圖像繪制
圖像的繪制通常是指用那些以 CG 開頭的方法把圖像繪制到畫布中吆豹，然后從畫布創(chuàng)建圖片并顯示這樣一個(gè)過程。這個(gè)最常見的地方就是 drawRect(rect: CGRect)? 里面了。由于 CoreGraphic 方法通常都是線程安全的痘煤，所以圖像的繪制可以很容易的放到后臺(tái)線程進(jìn)行凑阶。
對于GPU：
相對于 CPU 來說，GPU 能干的事情比較單一：接收提交的紋理（Texture）和頂點(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ù)處理咧虎，這對 CPU 和 GPU 都會(huì)帶來額外的資源消耗卓缰。
2、視圖的混合
當(dāng)多個(gè)視圖（或者說 CALayer）重疊在一起顯示時(shí)砰诵，GPU 會(huì)首先把他們混合到一起征唬。如果視圖結(jié)構(gòu)過于復(fù)雜孔庭，混合的過程也會(huì)消耗很多 GPU 資源革为。為了減輕這種情況的 GPU 消耗，應(yīng)用應(yīng)當(dāng)盡量減少視圖數(shù)量和層次特占，并在不透明的視圖里標(biāo)明 opaque 屬性以避免無用的 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 上去侠坎。對于只需要圓角的某些場合蚁趁，也可以用一張已經(jīng)繪制好的圓角圖片覆蓋到原本視圖上面來模擬相同的視覺效果。最徹底的解決辦法实胸，就是把需要顯示的圖形在后臺(tái)線程繪制為圖片他嫡，避免使用圓角、陰影庐完、遮罩等屬性钢属。
三、ASDK 的基本原理
ASDK 認(rèn)為门躯，阻塞主線程的任務(wù)淆党，主要分為三大類。文本和布局的計(jì)算生音、渲染宁否、解碼、繪制都可以通過各種方式異步執(zhí)行缀遍，但 UIKit 和 Core Animation 相關(guān)操作必需在主線程進(jìn)行慕匠。ASDK 的目標(biāo)，就是盡量把這些任務(wù)從主線程挪走域醇，而挪不走的台谊，就盡量優(yōu)化性能蓉媳。
傳統(tǒng)的CALayer(屬性改變/動(dòng)畫產(chǎn)生)是通過delegate來通知UIView的，View 持有 Layer 用于顯示锅铅，View 中大部分顯示屬性實(shí)際是從 Layer 映射而來酪呻；Layer 的 delegate 在這里是 View，當(dāng)其屬性改變盐须、動(dòng)畫產(chǎn)生時(shí)玩荠，View 能夠得到通知。UIView 和 CALayer 不是線程安全的贼邓，并且只能在主線程創(chuàng)建阶冈、訪問和銷毀。
ASDK 為此創(chuàng)建了 ASDisplayNode 類塑径，嘗試對 UIKit 組件進(jìn)行封女坑，包裝了常見的視圖屬性（比如frame、bounds统舀、alpha匆骗、transform、backgroundColor誉简、superNode碉就、subNodes等）
然后它用 UIView->CALayer 相同的方式，實(shí)現(xiàn)了 ASNode->UIView 這樣一個(gè)關(guān)系描融。
當(dāng)不需要響應(yīng)觸摸事件時(shí)铝噩，ASDisplayNode 可以被設(shè)置為 layer backed，即 ASDisplayNode 充當(dāng)了原來 UIView 的功能窿克，節(jié)省了更多資源骏庸。
與 UIView 和 CALayer 不同，ASDisplayNode 是線程安全的年叮，它可以在后臺(tái)線程創(chuàng)建和修改具被。Node 剛創(chuàng)建時(shí)，并不會(huì)在內(nèi)部新建 UIView 和 CALayer只损，直到第一次在主線程訪問 view 或 layer 屬性時(shí)一姿，它才會(huì)在內(nèi)部生成對應(yīng)的對象。當(dāng)它的屬性（比如frame/transform）改變后跃惫，它并不會(huì)立刻同步到其持有的 view 或 layer 去叮叹，而是把被改變的屬性保存到內(nèi)部的一個(gè)中間變量，稍后在需要時(shí)爆存，再通過某個(gè)機(jī)制一次性設(shè)置到內(nèi)部的 view 或 layer蛉顽。
通過模擬和封裝 UIView/CALayer，可以把代碼中的 UIView 替換為 ASNode先较，很大的降低了開發(fā)和學(xué)習(xí)成本携冤，同時(shí)能獲得 ASDK 底層大量的性能優(yōu)化悼粮。為了方便使用， ASDK 把大量常用控件都封裝成了 ASNode 的子類曾棕，比如 Button扣猫、Control、Cell翘地、Image申尤、ImageView、Text衙耕、TableView瀑凝、CollectionView 等。利用這些控件臭杰，可以盡量避免直接使用 UIKit 相關(guān)控件，以獲得更完整的性能提升谚中。
四渴杆、ASDK的使用
1、ASDK的安裝
ASDK我們使用CocoaPods來管理宪塔，?pod'Texture'磁奖，'> = 2.0'??
2、ASDisplayNode介紹?
Texture的基本單位是node某筐。?ASDisplayNode是一種抽象UIView比搭，而這又是一種抽象CALayer。與只能在主線程上使用的視圖不同南誊，節(jié)點(diǎn)是線程安全的身诺，可以在后臺(tái)線程上并行實(shí)例化和配置它們的整個(gè)層次結(jié)構(gòu)。
在 ASDK 中的渲染圍繞 ASDisplayNode 進(jìn)行抄囚，其過程總共有四條主線：
初始化 ASDisplayNode 對應(yīng)的 UIView 或者 CALayer
在當(dāng)前視圖進(jìn)入視圖層級時(shí)執(zhí)行 setNeedsDisplay
display 方法執(zhí)行時(shí)霉赡，向后臺(tái)線程派發(fā)繪制事務(wù)
注冊成為 RunLoop 觀察者，在每個(gè) RunLoop 結(jié)束時(shí)回調(diào)
3幔托、使用ASDisplayNode替換UIKit組件
以上我們可以看作是ASNode分別對基于UIKit的UILabel穴亏、UIView、UIButton重挑、UIImageView的封裝嗓化，需要注意的是，如果加載的是網(wǎng)絡(luò)圖片要使用?ASNetworkImageNode谬哀，如果是本地圖片使用ASImageNode刺覆。
4、列表卡頓的優(yōu)化
在基于UIkit的TableView的cell中玻粪，常常會(huì)有大量的UI繪制隅津、文本渲染诬垂、布局計(jì)算等。對于簡單的cell或者單一的cell伦仍，加上本身的cell的復(fù)用機(jī)制其實(shí)并不會(huì)出現(xiàn)很明顯的卡頓结窘。但當(dāng)List中有N種不同樣式的cell，而屏幕只能顯示四五條甚至更少的cll時(shí)候充蓝，卡頓就會(huì)比較明顯了隧枫。使用Node 創(chuàng)建時(shí), 不會(huì)立即在其內(nèi)部新建 UIView 和 CALayer, 直到主線程第一次訪問時(shí)才會(huì)生成對應(yīng)的對象, 除此之外, 還通過圖層預(yù)合成和基于 Runloop 的異步并發(fā)。
ASTableNode異于TableView之處的是谓苟，TableNode沒有復(fù)用機(jī)制官脓，只有緩存, 每個(gè) CellNode 都是全新的。
CellNode 與數(shù)據(jù)源沒有綁定關(guān)系: 創(chuàng)建后就算把數(shù)據(jù)源刪除, TableNode 依然可以正常展示
TableViewCell 的展示大致為: 添加空假數(shù)據(jù)子視圖 -> 數(shù)據(jù)填充 -> 刷新, 涉及布局或圖文時(shí)會(huì)更復(fù)雜
CellNode 只有一步: 添加真數(shù)據(jù)的子視圖; 因此可以直接根據(jù)業(yè)務(wù)邏輯對控件和布局做出處理, 而不用一次或多次刷新
5涝焙、ASTableNode的核心機(jī)制? 智能預(yù)加載
ASDK 可以通過滾動(dòng)的方向預(yù)加載不同數(shù)量的內(nèi)容
如上圖所示 ASDK 把正在滾動(dòng)的 ASTableView/ASCollectionView 劃分為三種狀態(tài)：
Fetch Data
Display
Visible
上面的這三種狀態(tài)都是由 ASDK 來管理的卑笨，而每一個(gè) ASCellNode 的狀態(tài)都是由 ASRangeController 控制，所有的狀態(tài)都對應(yīng)一個(gè) ASInterfaceState：
ASInterfaceStatePreload 當(dāng)前元素貌似要顯示到屏幕上仑撞，需要從磁盤或者網(wǎng)絡(luò)請求數(shù)據(jù)赤兴；
ASInterfaceStateDisplay 當(dāng)前元素非常可能要變成可見的隧哮，需要進(jìn)行異步繪制桶良；
ASInterfaceStateVisible 當(dāng)前元素最少在屏幕上顯示了 1px。
當(dāng)用戶滾動(dòng)當(dāng)前視圖時(shí)沮翔，ASRangeController就會(huì)修改不同區(qū)域內(nèi)元素的狀態(tài)：
在滾動(dòng)方向（Leading）上 Fetch Data 區(qū)域會(huì)是非滾動(dòng)方向（Trailing）的兩倍陨帆，ASDK 會(huì)根據(jù)滾動(dòng)方向的變化實(shí)時(shí)改變緩沖區(qū)的位置；在向下滾動(dòng)時(shí)采蚀，下面的 Fetch Data 區(qū)域就是上面的兩倍疲牵，向上滾動(dòng)時(shí)，上面的 Fetch Data 區(qū)域就是下面的兩倍搏存。
這里的兩倍并不是一個(gè)確定的數(shù)值瑰步，ASDK 會(huì)根據(jù)當(dāng)前設(shè)備的不同狀態(tài)，改變不同區(qū)域的大小璧眠，但是滾動(dòng)方向的區(qū)域總會(huì)比非滾動(dòng)方向大一些缩焦。
智能預(yù)加載能夠根據(jù)當(dāng)前的滾動(dòng)方向，自動(dòng)改變當(dāng)前的工作區(qū)域责静，選擇合適的區(qū)域提前觸發(fā)請求資源袁滥、渲染視圖以及異步布局等操作，讓視圖的滾動(dòng)達(dá)到真正的流暢灾螃。
