AsyncDisplayKit源代碼解析-整體(一)

前言

本文的中文注釋代碼demo更新在我的github上。

AsyncDisplayKit 是 Facebook 開源的一個(gè)用于保持 iOS 界面流暢的框架。主要作者是 Scott Goodson(github)蛉迹。
本文主要是從理論和源代碼角度分析一下整個(gè)ASDK庫姑隅,其中參考了很多參考資料中的內(nèi)容得滤,加以整理和復(fù)習(xí)盐肃。

發(fā)展歷史

AsyncDisplayKit(ASDK)是2012年由Facebook開始著手開發(fā),并于2014年出品的高性能顯示類庫号枕,主要作者是Scott Goodson缰揪。Scott曾經(jīng)參與了多個(gè)iOS版本系統(tǒng)的開發(fā),包括UIKit以及一些系統(tǒng)原生app葱淳,后來加入Facebook并參與了ASDK的開發(fā)并應(yīng)用到Paper钝腺,因此該庫有機(jī)會(huì)從相對(duì)底層的角度來進(jìn)行一系列的優(yōu)化。

想要了解 ASDK 的原理和細(xì)節(jié)赞厕,最好從下面幾個(gè)視頻開始:

解決的問題

很多時(shí)候用戶在操作app的時(shí)候艳狐,會(huì)感覺到不適那么流暢,有所卡頓皿桑。
ASDK主要就是解決的問題就是操作頁面過程中的保持幀率在60fps(理想狀態(tài)下)的問題毫目。

造成卡頓的原因有很多蔬啡,總結(jié)一句話基本上就是:
CPU或GPU消耗過大,導(dǎo)致在一次同步信號(hào)之間沒有準(zhǔn)備完成镀虐,沒有內(nèi)容提交箱蟆,導(dǎo)致掉幀的問題。

具體的原理刮便,在提升 iOS 界面的渲染性能文章中介紹的十分詳細(xì)了空猜,這里也不多闡述了。

優(yōu)化原理

從ASDK的視頻與tutorial上恨旱,可以整理出三個(gè)ASDK主要優(yōu)化的方面:

  1. 布局
    iOS自帶的Autolayout在布局性能上存在瓶頸辈毯,并且只能在主線程進(jìn)行計(jì)算。(參考Auto Layout Performance on iOS)因此ASDK棄用了Autolayout窖杀,自己參考自家的ComponentKit設(shè)計(jì)了一套布局方式。
  2. 渲染
    對(duì)于大量文本裙士,圖片等的渲染入客,UIKit組件只能在主線程并且可能會(huì)造成GPU繪制的資源緊張。ASDK使用了一些方法腿椎,比如圖層的預(yù)混合等桌硫,并且異步的在后臺(tái)繪制圖層,不阻塞主線程的運(yùn)行啃炸。
  3. 系統(tǒng)對(duì)象創(chuàng)建于銷毀
    UIKit組件封裝了CALayer圖層的對(duì)象铆隘,在創(chuàng)建、調(diào)整南用、銷毀的時(shí)候膀钠,都會(huì)在主線程消耗資源。ASDK自己設(shè)計(jì)了一套Node機(jī)制裹虫,也能夠調(diào)用肿嘲。

**實(shí)際上,從上面的一些解釋也可以看出筑公,ASDK最大的特點(diǎn)就是"異步"雳窟。
將消耗時(shí)間的渲染、圖片解碼匣屡、布局以及其它 UI 操作等等全部移出主線程封救,這樣主線程就可以對(duì)用戶的操作及時(shí)做出反應(yīng),來達(dá)到流暢運(yùn)行的目的捣作。
**

ASDisplayNode的整體設(shè)計(jì)

AsyncDisplayKit’s basic unit is the node. ASDisplayNode is an abstraction over UIView, which in turn is an abstraction over CALayer. Unlike views, which can only be used on the main thread, nodes are thread-safe: you can instantiate and configure entire hierarchies of them in parallel on background threads.

這段是ASDK官網(wǎng)上的原話誉结。可以看出ASDK的核心就是ASDisplayNode券躁。在介紹ASDisplayNode前搓彻,需要介紹一下目前UIView于CALayer的關(guān)系如绸。

UIView與CALayer的關(guān)系:

UIView持有CALayer,顯示依靠CALayer旭贬。
CALayer的delegate是UIView怔接,可以回調(diào)通知UIView的變化。
UIView 和 CALayer 都不是線程安全的稀轨,并且只能在主線程創(chuàng)建扼脐、訪問和銷毀。


UIKit

ASDisplayNode

ASNode(ASDisplayNode以下同)仿照這樣的關(guān)系奋刽,通過view去持有UIView瓦侮,并且讓UIView通過.node回調(diào)自己。在ASNode中封裝了常見的視圖屬性佣谐,讓開發(fā)者直接去調(diào)用ASNode進(jìn)行開發(fā)肚吏。


ASNode

并且ASNode可以設(shè)置layer backed屬性,就是不需要響應(yīng)觸摸事件狭魂。這時(shí)候ASNode將直接操作CALayer進(jìn)行顯示罚攀,更加優(yōu)化了性能。


Paste_Image.png

ASNode本身是線程安全的雌澄,所以它允許在后臺(tái)線程進(jìn)行創(chuàng)建和修改斋泄。

這里借用一下提升 iOS 界面的渲染性能中的一段話:

Node 剛創(chuàng)建時(shí),并不會(huì)在內(nèi)部新建 UIView 和 CALayer镐牺,直到第一次在主線程訪問 view 或 layer 屬性時(shí)炫掐,它才會(huì)在內(nèi)部生成對(duì)應(yīng)的對(duì)象。當(dāng)它的屬性(比如frame/transform)改變后睬涧,它并不會(huì)立刻同步到其持有的 view 或 layer 去募胃,而是把被改變的屬性保存到內(nèi)部的一個(gè)中間變量,稍后在需要時(shí)畦浓,再通過某個(gè)機(jī)制一次性設(shè)置到內(nèi)部的 view 或 layer摔认。

ASDK整體提供了十分多的Node組件,比如Button,Cell等等宅粥,利用這些組件参袱,開發(fā)者可以繞過UIKit進(jìn)行開發(fā)。這里貼一張官網(wǎng)上的層級(jí)圖


node層級(jí)

渲染過程

ASDisplayNode的渲染過程主要有以下幾步:

  1. 初始化ASDisplayNode對(duì)應(yīng)的 UIView 或者 CALayer
  2. 在當(dāng)前視圖進(jìn)入視圖層級(jí)時(shí)執(zhí)行 setNeedsDisplay秽梅;
  3. display 方法執(zhí)行時(shí)抹蚀,向后臺(tái)線程派發(fā)繪制事務(wù);
  4. 在Runloop中注冊(cè)observer企垦,在每個(gè) RunLoop 結(jié)束時(shí)回調(diào)环壤。

這邊的細(xì)化會(huì)在之后介紹源代碼的時(shí)候介紹。

其他內(nèi)容

ASDK還包含以下內(nèi)容:

  • ASLayout的布局功能
  • ASAsyncTransaction的異步繪制控制
  • ASViewController結(jié)點(diǎn)容器
  • ASTableView/ASCollectionView以及對(duì)應(yīng)的控制器ASRangeController/ASDataController

總結(jié)

本文大體上介紹了一下AsyncDisplayKit的整體流程和優(yōu)化方法钞诡,之后的幾章將從源代碼角度去分析ASDK的渲染過程郑现。

參考資料

本文csdn地址
1.AsyncDisplayKit源碼分析
2.AsyncDisplayKit介紹
3.提升 iOS 界面的渲染性能
4.iOS 保持界面流暢的技巧
5.AsyncDisplayKit Getting Started
6.AsyncDisplayKit Tutorial: Node Hierarchies

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末湃崩,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子接箫,更是在濱河造成了極大的恐慌攒读,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,013評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辛友,死亡現(xiàn)場(chǎng)離奇詭異薄扁,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)废累,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,205評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門邓梅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人邑滨,你說我怎么就攤上這事日缨。” “怎么了掖看?”我有些...
    開封第一講書人閱讀 152,370評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵匣距,是天一觀的道長。 經(jīng)常有香客問我乙各,道長墨礁,這世上最難降的妖魔是什么幢竹? 我笑而不...
    開封第一講書人閱讀 55,168評(píng)論 1 278
  • 正文 為了忘掉前任耳峦,我火速辦了婚禮,結(jié)果婚禮上焕毫,老公的妹妹穿的比我還像新娘蹲坷。我一直安慰自己,他們只是感情好邑飒,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,153評(píng)論 5 371
  • 文/花漫 我一把揭開白布循签。 她就那樣靜靜地躺著,像睡著了一般疙咸。 火紅的嫁衣襯著肌膚如雪县匠。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 48,954評(píng)論 1 283
  • 那天撒轮,我揣著相機(jī)與錄音乞旦,去河邊找鬼。 笑死题山,一個(gè)胖子當(dāng)著我的面吹牛兰粉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播顶瞳,決...
    沈念sama閱讀 38,271評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼玖姑,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼愕秫!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起焰络,我...
    開封第一講書人閱讀 36,916評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤戴甩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后舔琅,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體等恐,經(jīng)...
    沈念sama閱讀 43,382評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,877評(píng)論 2 323
  • 正文 我和宋清朗相戀三年备蚓,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了课蔬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 37,989評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡郊尝,死狀恐怖二跋,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情流昏,我是刑警寧澤扎即,帶...
    沈念sama閱讀 33,624評(píng)論 4 322
  • 正文 年R本政府宣布,位于F島的核電站况凉,受9級(jí)特大地震影響谚鄙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜刁绒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,209評(píng)論 3 307
  • 文/蒙蒙 一闷营、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧知市,春花似錦傻盟、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,199評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至跟啤,卻和暖如春诽表,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背隅肥。 一陣腳步聲響...
    開封第一講書人閱讀 31,418評(píng)論 1 260
  • 我被黑心中介騙來泰國打工竿奏, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人武福。 一個(gè)月前我還...
    沈念sama閱讀 45,401評(píng)論 2 352
  • 正文 我出身青樓议双,卻偏偏與公主長得像,于是被迫代替她去往敵國和親捉片。 傳聞我的和親對(duì)象是個(gè)殘疾皇子平痰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,700評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容