[原文：https://github.com/nixzhu/dev-blog/blob/master/2014-11-22-asyncdisplaykit-tutorial-achieving-60-fps-scrolling.md]

Facebook 的 Paper 團隊給我們帶來另一個很棒的庫：AsyncDisplayKit。這個庫能讓你通過將圖像解碼、布局以及渲染操作放在后臺線程，從而帶來超級響應(yīng)的用戶界面，也就是說不再會因界面卡頓而阻斷用戶交互。既然這么厲害，那就在本教程里學一下它吧。

例如，對于非常復(fù)雜的界面，你可以使用 AsyncDisplayKit 構(gòu)建它而得到一種如絲般順滑的，60幀每秒的滑動體驗。而平常的 UIKit 優(yōu)化就不太可能克服這樣的性能挑戰(zhàn)。

在本教程中，你將從一個初始項目開始，它主要有一個 UICollectionView 的滑動問題，而使用 AsyncDisplayKit 將大大提高其滑動性能。一路上，你將學會如何在舊項目中使用 AsyncDisplayKit。

注意：在開始本教程之前，你應(yīng)該已熟悉 Swift、Core Animation 以及 Core Graphics。

開始

開始之前，先看看 AsyncDisplayKit 的介紹。以對它有個簡要的概念，知道它是要解決什么問題。

準備好了后就下載初始項目吧。你需要使用 Xcode 6.1 和 iOS 8.1 SDK 來編譯它。

注意：本教程的代碼使用 AsyncDisplayKit 1.0 來編寫。這個版本已經(jīng)被包含在初始項目中了。

你要研究的項目是由 UICollectionView 制作的卡片式界面來描述不同的雨林動物。每張信息卡包括一個圖片、名字以及一個對雨林動物的描述。卡片的背景圖是主圖片的模糊版。視覺設(shè)計的細節(jié)保證了文字的清晰易讀。

在 Xcode 中，打開初始項目里的 Layers.xcworkspace 。

在本教程里，請遵循以下原則以體會 AsyncDisplayKit 的那些十分吸引人的好處。

將應(yīng)用運行在真機上。在模擬器里運行很難看出性能改善。

應(yīng)用是通用的，但在 iPad 上看起來最好。

最后，要真正感激這個庫能為你所做的事情，請盡量在最舊的能運行 iOS 8.1 的設(shè)備上運行本應(yīng)用。第三代的 iPad 最好，因為它雖有視網(wǎng)膜屏幕，但運行得不是很快。

一旦你選定了設(shè)備，那就編譯并運行本項目。你會看到如下界面：

試著滑動 Collection View 并注意那可憐的幀率。在第三代 iPad 上，幀率大概只有 15-20 FPS，實在丟掉太多幀了。在本教程的最后，你能在 60 FPS （或非常接近）的幀率上滑動它。

注意：你所看到的圖像都在 App 的 asset 目錄里，并不是從網(wǎng)絡(luò)上獲取的。

測量響應(yīng)速度

在一個舊項目中使用 AsyncDisplayKit 前，你應(yīng)該通過 Instruments 測量你的 UI 的性能，這樣才有一個基準線以便對比改動的效果。

最重要的是，你要知道是 CPU-綁定 還是 GPU-綁定。也就是說，是 CPU 還是 GPU 拉低了應(yīng)用的幀率。這個信息會告訴你該充分利用 AsyncDisplayKit 的哪個特性以優(yōu)化應(yīng)用的性能。

如果你有時間，看看之前提到的 WWDC 2012 session 和/或在真實設(shè)備上使用 Instruments 來評估初始項目的時間曲線。滑動性能是 CPU-綁定 的。你能猜到是什么原因?qū)е铝?Collection View 丟掉這么多幀嗎？

丟幀是因為模糊 cell 的背景圖像時阻塞了主線程。

為項目準備好使用 AsyncDisplayKit

在舊項目里使用 AsyncDisplayKit，歸結(jié)起來就是使用 Display Node 層次結(jié)構(gòu)替換視圖層次結(jié)構(gòu)和/或 Layer 樹。各種 Display Node 是 AsyncDisplayKit 的關(guān)鍵所在。它們位于視圖之上，而且是線程安全的，也就是說之前在主線程才能執(zhí)行的任務(wù)現(xiàn)在也可以在非主線程執(zhí)行。這就能減輕主線程的工作量以執(zhí)行其他操 作，例如處理觸摸事件，或如在本應(yīng)用的情況里，處理 Collection View 的滑動。

這就意味著在本教程里，你的第一步是移除視圖層次結(jié)構(gòu)。

移除視圖層次結(jié)構(gòu)

打開 RainforestCardCell.swift 并刪除 awakeFromNib() 中所有的 addSubview(...) 調(diào)用，然后得到如下：

接下來，替換 layoutSubviews() 的內(nèi)容如下：

再將 configureCellDisplayWithCardInfo(cardInfo:) 的內(nèi)容替換如下：

刪除 RainforestCardCell 的所有視圖屬性，只留一個如下：

最后，編譯并運行，你看到的就全是空空如也的卡片：

現(xiàn)在所有的 cell 都空了，滑動起來超級順滑。你的目標是保證之后添加回取代各視圖的 node 后，滑動依然順滑。

你可用 Instruments 的  Core Animation 模版在真機上檢測應(yīng)用的性能，看看你的改動如何影響幀率。

添加一個占位圖

打開 RainforestCardCell.swift ，給 RainforestCardCell 添加一個可選的 CALayer 變量，名為 placeholderLayer：

你之所以需要一個占位圖是因為顯示會異步完成，如果這個過程需要些時間，那用戶就會看到空的 cell —— 這并不愉快。就如同如果你要從網(wǎng)絡(luò)上獲取圖像，那么就需要用占位圖來填充 cell，這能讓你的用戶知道內(nèi)容還沒有準備好。雖然在我們這種情況里，你是在后臺線程繪制而不是從網(wǎng)絡(luò)下載。

在 awakeFromNib() 里，刪除 contentView 的 border 設(shè)置再創(chuàng)建并配置一個 placeholderLayer。將其添加到 cell 的 contentView 的 Layer 上。現(xiàn)在這個方法如下：

在 layoutSubviews() 里，你需要布局 placeholderLayer。替換這個方法為：

編譯并運行，你從虛無的邊緣回來了：

樸素的 CALayer 不是由 UIView 支持的，當它們改變 frame 時，默認會有隱式動畫。這就是為何你看到 layer 在布局時放大。要修復(fù)這個問題，改動 layoutSubviews 如下：

編譯并運行，問題解決了。

現(xiàn)在占位圖不會亂動，不再動畫它們的 frame 了。

第一個 Node

重建 App 的第一步是給每一個 UICollectionView cell 添加一個背景圖片 Node，步驟如下：

1. 創(chuàng)建、布局并添加一個圖像 Node 到 UICollectionView cell；

2. 處理 cell 重用 Node 和它們的 layer；以及

3. 模糊圖像 Node

但在做之前，打開 Layers-Bridging-Header.h 并導(dǎo)入 AsyncDisplayKit ：

這會讓所有的 Swift 文件都能訪問 AsyncDisplayKit 的各種類。

編譯一下，確保沒有錯誤。

方向：雨林 Collection View 結(jié)構(gòu)

現(xiàn)在，我們來看看 Collection View 的組成：

· View Controller ：RainforestViewController 沒有什么花哨的東西。它只是為所有的雨林卡片獲取一個數(shù)據(jù)數(shù)組，并為 UICollectionView 實現(xiàn) Data Source。事實上，你不需要花太多時間到 View Controller 上。

· Data Source ：大部分時間都將花在 cell 類 RainforestCardCell 上。View Controller 出隊每個 cell 并將雨林卡片的數(shù)據(jù)用 configureCellDisplayWithCardInfo(cardInfo:) 傳給它。cell 就使用這個數(shù)據(jù)來配置自身。

· Cell ：在 configureCellDisplayWithCardInfo(cardInfo:) 里，cell 創(chuàng)建、配置、布局以及添加 Node 到它自己身上。這就意味著每次 View Controller 出隊一個 cell，這個 cell 就會創(chuàng)建并添加給它自己一個新的 Node 層次結(jié)構(gòu)。

如果你使用 View 而不是 Node，那么這樣做對于性能來說就不是最佳策略。但因為你可以異步地創(chuàng)建、配置以及布局，而且 Node 也是異步地繪制的，所以這不會是一個問題。真正的難點是在 cell 準備重用時取消任何在進行的異步操作并移除舊 Node 。

注意 ：本教程的這個策略來添加 Node 到 cell 還算 OK。對于精通 AsyncDisplayKit 來說，這是很好的第一步。

然而，在實際生產(chǎn)中，你最好使用 ASRangeController 來緩存你的 Node，這樣你就不用每次在 cell 重用時重建它的 Node 層次結(jié)構(gòu)。ASRangeController 超出了本教程的范圍，但若你想了解更多的信息，看看頭文件 ASRangeController.h 的注釋吧。

再注意一下：1.1 版的 AsyncDisplayKit （本教程編寫時還未放出，但會在此后不久放出）包含有 ASCollectionView。使用 ASCollectionView 會讓本 App 的整個 Collection View 都由 Display Node 控制。而在本教程中，每個 cell 會包含一個 Display Node 層次結(jié)構(gòu)。如上面所解釋的，這能工作，但如果使用 ASCollectionView 可能會更好。給力的 ASCollectionView!

OK，該動手了。

添加背景圖片 Node

現(xiàn)在你要走一遍用 Node 配置 cell 的過程，一次一步：

打開 RainforestCardCell.swift 并替換 configureCellDisplayWithCardInfo(cardInfo:) 為：

這就創(chuàng)建并配置了一個 ASImageNode 常量，叫做 backgroundImageNode。

注意：確保包含 //MARK: 注釋，這樣更容易看清代碼位置。

AsyncDisplayKit 帶有好幾種 Node 類型，包括 ASImageNode，用于顯示圖片。它相當于 UIImageView，除了 ASImageNode 是默認異步地解碼圖片。

添加如下代碼到 configureCellDisplayWithCardInfo(cardInfo:) 底部：

這讓 backgroundImageNode 變?yōu)?Layer 支持的 Node。

Node 可由 UIView 支持或 CALayer 支持。當 Node 需要處理事件時（例如觸摸事件），你就要使用  UIView 支持的 Node。如果你不需要處理事件，只需要顯示一下內(nèi)容，那使用 Layer 支持的 Node 會更加輕量，因此可以獲得一個小的性能提升。

因為本教程的 App 不需要處理事件，所以你可讓所有的 Node 都設(shè)置為 Layer 支持的。在上面的代碼中，由于 backgroundImageNode 為 Layer 支持的，AsyncDisplayKit 會創(chuàng)建一個 CALayer 用于雨林動物圖像內(nèi)容的顯示。

繼續(xù) configureCellDisplayWithCardInfo(cardInfo:) 并添加如下代碼：

這里使用 FrameCalculator 為 backgroundImageNode 布局。

FrameCalculator  是一個幫助類，它包裝了cell 的布局，為每個 Node 返回 frame。注意所有的東西都是手動布局的， 沒有使用 Auto Layout 約束 。如果你需要構(gòu)建自適應(yīng)布局或者本地化驅(qū)動的布局，那就要注意，因為你不能給 Node 添加約束。

接下來，添加如下代碼到 configureCellDisplayWithCardInfo(cardInfo:) 底部：

這句將 backgroundImageNode 的 Layer 添加到 cell contentView 的 Layer 上。

注意，AsyncDisplayKit 會為 backgroundImageNode 創(chuàng)建一個 Layer。然而，你必須要將 Node 放到某個 Layer 樹中才能在屏幕上顯示。這個 Node 會異步地繪制，所以直到繪制完成，它的內(nèi)容都不會顯示，盡管它的 Layer 已經(jīng)在一個 Layer 樹中。

從技術(shù)角度來說， Layer 一直都存在。但渲染圖像是異步進行的。Layer 初始化時沒有內(nèi)容（例如是透明的）。一旦渲染完成，Layer 的 contents 就會更新為包含圖像內(nèi)容。

在這個點，cell 的 contentView 的 Layer 將會包含兩個 Sublayer：一個占位圖和 Node 的 Layer。在 Node 完成繪制前，只有占位圖會顯示。

注意到 configureCellDisplayWithCardInfo(cardInfo:) 會在每次 cell 出隊時被調(diào)用。每次 cell 被回收，這個邏輯會添加一個新的 Sublayer 到 cell 的 contentView Layer 上。不要擔心，你很快會解決這個問題。

回到 RainforestCardCell.swift 開頭，給 RainforestCardCell 添加一個 ASImageNode 變量存為屬性 backgroundImageNode，如下：

你之所以需要這個屬性是因為必須要有某個東西將 backgroundImageNode 的引用保留住，否則 ARC 就會將其釋放，也就不會有任何東西顯示出來——即使 Node 的 Layer 在一個 Layer 樹中，你依然需要保留 Node。

在 configureCellDisplayWithCardInfo(cardInfo:) 底部的 Node Layer and Wrap Up Section ，設(shè)置 cell 新的 backgroundImageNode  為之前的 backgroundImageNode：

下面是完整的 configureCellDisplayWithCardInfo(cardInfo:) 方法：

編譯并運行，觀察 AsyncDisplayKit 是如何異步地使用圖像設(shè)置 Layer 的 contents 的。這能讓你在 CPU 還在繪制 Layer 的內(nèi)容的同時上下滑動界面。

如果你運行在舊設(shè)備上，注意圖像是如何彈出到位置——這是爆米花特效，但不總是讓人喜歡！本教程的最后一節(jié)會搞定這個不令人愉快的彈出效果，給你展示如何讓圖像自然地淡入，如同搖滾巨星。

如之前所討論的，新的 Node 會在每次 cell 被重用時創(chuàng)建。這并不很理想，因為這意味著新的 Layer 會在每次 cell 被重用時加入。

如果你想看看 Sublayer 堆積太多的影響，那就不停的滑上滑下多次，然后加斷點打印出 cell 的 contentView 的 Layer 的 sublayers 屬性。你會看到很多 Layer，這并不好。

處理 Cell 重用

繼續(xù) RainforestCardCell.swift ，給 RainforestCardCell 添加一個叫做 contentLayer 的 CALayer 屬性。這個屬性也是一個可選類型：

你將使用此屬性去移除 cell 的 contentView 的 Layer 樹中舊的 Node Layer。雖然你可以簡單地保留 Node 并訪問其 Layer 屬性，但上面的寫法更加明確。

添加如下代碼到 configureCellDisplayWithCardInfo(cardInfo:) 結(jié)尾：

這句讓  backgroundImageNode 的 Layer 保留到 contentLayer 屬性。

替換 prepareForReuse() 的實現(xiàn)如下：

因為 AsyncDisplayKit 能夠異步地繪制 Node，所以 Node 讓你能預(yù)防從頭繪制或取消任何在進行的繪制。無論是你需要預(yù)防或取消繪制，都可將 preventOrCancelDisplay 設(shè)置為 true，如上面代碼所示。在本例中，你要在 cell 被重用前取消任何正在進行的繪制活動。

接下來，添加如下代碼到 prepareForReuse() 尾部：

這將  contentLayer 從其 Superlayer （也就是 contentView 的 Layer）中移除。

每次一個 cell 被回收時，這個代碼就移除 Node 的舊 Layer ，因而解決了堆積問題。所以在任何時間，你的 Node 最多只有兩個 Sublayer：占位圖和 Node 的 Layer。

接下來添加如下代碼到 prepareForReuse() 尾部：

這確保 cell 釋放它們的引用，這樣如有必要，ARC 才好做清理工作。

編譯并運行。這次，沒有 Sublayer 會堆積的問題，且所有不必要的繪制都會被取消。

是時候來點兒模糊效果了，Baby，模糊哦。

模糊圖像

要模糊圖像，你要添加一個額外的步驟到圖像 Node 的顯示過程里。

繼續(xù) RainforestCardCell.swift ，在 configureCellDisplayWithCardInfo(cardInfo:) 的設(shè)置  backgroundImageNode.layerBacked 的后面，添加如下代碼：

ASImageNode 的 imageModificationBlock 給你一個機會在顯示之前去處理底層的圖像。這是非常實用的功能，它讓你能對圖像 Node 做一些操作，例如添加濾鏡等。

在上面的代碼里，你使用 imageModificationBlock 來為 cell 的背景圖像應(yīng)用模糊效果。關(guān)鍵點就是圖像 Node 將會繪制它的內(nèi)容并在后臺執(zhí)行這個閉包，而主線程依然順滑流暢。這個閉包接受原始的  UIImage 并返回一個修改過的  UIImage。

上面的代碼使用了  UIImage 的模糊 category，它由 Apple 在 WWDC 2013 提供，使用了 Accelerate framework 在 CPU 上模糊圖像。因為模糊會消耗很多時間和內(nèi)存，這個版本的 category 被修改為包含了取消機制。這個模糊方法將定期調(diào)用 didCancel 閉包來決定是否應(yīng)該要停止模糊。

現(xiàn)在，上面的代碼給  didCancel 簡單地返回 false。之后你會重寫 didCancel 閉包。

注意：還記得第一次運行 App 時 Collection View 那可憐的滑動效果嗎？模糊方法阻塞了主線程。通過使用 AsyncDisplayKit 將模糊放入后臺，你就大幅度地提高了 Collection View 的滑動性能。簡直天壤之別。

編譯并運行，觀察模糊效果：

注意你可以如何非常流暢地滑動 Collection View。

當 Collection View 出隊一個 cell 時，一個模糊操作將開始于后臺線程。當用戶快速滑動時，Collection View 會重用每個 cell 多次，并開始許多模糊操作。我們的目標是在 cell 準備被重用時取消正在進行中的模糊操作。

你已經(jīng)在 prepareForReuse() 里取消了 Node 的繪制操作 ，但一旦控制被移交給處理你圖像修改的閉包，那就是你的責任來處理 Node 的 preventOrCancelDisplay 設(shè)置，你現(xiàn)在就要做。

取消模糊操作

要取消進行中的模糊操作，你需要實現(xiàn)模糊方法的 didCancel 閉包。

添加一個捕捉列表到 imageModificationBlock 以捕捉一個 backgroundImageNode 的 weak 引用：

你需要 weak 引用來避免閉包和圖像 Node 之間的保留環(huán)問題。你將使用這個 weak  backgroundImageNode 來確定是否要取消模糊操作。

是時候構(gòu)建模糊取消閉包了。添加下面代碼到 imageModificationBlock：

下面解釋一下這些代碼：

1. 得到 backgroundImageNode 的 strong 引用，準備用其干活。如果 backgroundImageNode 在本次運行時消失，那么 isCancelled 將保持為 true，然后模糊操作會被取消。如果沒有 Node 需要顯示，自然沒有必要繼續(xù)模糊操作。

2. 在此你將操作取消檢查包在閉包里，因為一旦 Node 創(chuàng)建它的 Layer 或 View，那就只能在主線程訪問 Node 的屬性。由于你需要訪問 preventOrCancelDisplay，所以你必須在主線程檢查。

3. 最后，確保 isCancelledClosure 是在主線程運行，無論是已在主線程而直接運行，還是不在主線程而通過  dispatch_sync 來調(diào)度。它必須是一個同步的調(diào)度，因為我們需要閉包完成，并在 didCancelBlur 閉包返回之前設(shè)置 isCancelled。

在調(diào)用 applyBlurWithRadius(...) 中，修改傳遞給 didCancel 的參數(shù)，替換一直返回  false 的閉包為你剛才定義并保留在 didCancelBlur 的閉包。

編譯并運行。你看你不會注意到太多差別，但現(xiàn)在任何在 cell 離開屏幕時還未完成的模糊都會被取消了。這就意味著設(shè)備比之前做得更少。你可能觀察到輕微的性能提升，特別是在較慢的設(shè)備如第三代 iPad 上運行時。

當然，若沒有東西在前面，背景就不是真正的背景！你的卡片需要內(nèi)容。通過下面四個小節(jié)，你將學會：

· 創(chuàng)建一個容器 Node，它將所有的 Subnode 繪制到一個單獨的 CALayer 里；

· 構(gòu)建一個 Node 層次結(jié)構(gòu)；

· 創(chuàng)建一個自定義的 ASDisplayNode  子類；并

· 在后臺構(gòu)建并布局 Node 層次結(jié)構(gòu)；

做完這些，你就會得到一個看起來和添加 AsyncDisplayKit 之前一樣的 App，但有著黃油般順滑的滑動體驗。

柵格化的容器 Node

直到現(xiàn)在，你一直在操作 cell 內(nèi)的一個單獨的 Node。接下來，你將創(chuàng)建一個容器 Node，它會包含所有的卡片內(nèi)容。

添加一個容器 Node

繼續(xù) RainforestCardCell.swift ，在 configureCellDisplayWithCardInfo(cardInfo:) 的  backgroundImageNode.imageModificationBlock 后面以及 Node Layout Section 前面添加如下代碼：

這就創(chuàng)建并配置了一個叫做 containerNode 的 ASDisplayNode 常量。注意這個容器的 shouldRasterizeDescendants，這是一個關(guān)于節(jié)點如何工作的提示以及一個如何讓它們工作得更好地機會。

如單詞 “descendants（子孫）” 所暗示的，你可以創(chuàng)建 AsyncDisplayKit Node 的層次結(jié)構(gòu)或樹，就如你可以創(chuàng)建 Core Animation Layer 的層次結(jié)構(gòu)一樣。例如，如果你有一個都是 Layer 支持的 Node 層次結(jié)構(gòu)，那么 AsyncDisplayKit 將會為每個 Node 創(chuàng)建一個分離的 CALayer，Layer 層次結(jié)構(gòu)將會和 Node 層次結(jié)構(gòu)一樣，如同鏡像。

這聽起來很熟悉：它類似于當你使用普通的 UIKit 時，Layer 層次結(jié)構(gòu)鏡像于 View 層次結(jié)構(gòu)。然而，這個 Layer 的棧有一些不同的效果：

首先，因為是異步渲染，你就不會看到每個 Layer 一個接一個地顯示。當 AsyncDisplayKit 繪制完成每個 Layer，它馬上制作 Layer 的顯示內(nèi)容。所以如果你有一個 Layer 的繪制比其他 Layer 耗時更長，那么它將會在它們之后顯示。用戶會看到零碎的 Layer 組件，這個過程通常是不可見的，因為 Core Animation 會在顯示任何東西之前重繪所有必須的 Layer 。

第二，有許多 Layer 能夠引起性能問題。每個 CALayer 都需要一個支持存儲來保存它的像素位圖和內(nèi)容。同樣，Core Animation 必須將每個 Layer 通過 XPC 發(fā)給渲染服務(wù)器。最后，渲染服務(wù)器可能需要重繪一些 Layer 以復(fù)合它們，例如在混合 Layer 時。總的來說，更多的 Layer 意味著 Core Animation 更多的工作。所以限制 Layer 使用的數(shù)量有許多不同的好處。

為了解決這個問題，AsyncDisplayKit 有一個方便的特性：它允許你繪制一個 Node 層次結(jié)構(gòu)到一個單獨的 Layer 容器里。這就是 shouldRasterizeDescendants 所做的。當你設(shè)置它，那在完成所有的 Subnode 的繪制之前，ASDisplayNode 將不會設(shè)置 Layer 的 contents。

所以在之前的步驟里，設(shè)置容器 Node 的 shouldRasterizeDescendants 為 true 有兩個好處：

1. 它確保卡片一次顯示所有的 Node，如同舊的同步繪制；

2. 而且它通過柵格化 Layer 棧為單個 Layer 并較少未來的合成而提高了效率。

不足之處是，由于你將所有的 Layer 放入一個位圖，你就不能在之后單獨動畫某個 Node 了。

要獲得更多信息，請看 shouldRasterizeDescendants 在頭文件 ASDisplayNode.h 里的注釋。

接下來，在 Container Node Creation Section 后，添加 backgroundImageNode 為 containerNode 的 Subnode：

注意：添加 Node 的順序很重要，就如同 subview 和 sublayer。最先添加的 Node 會被之后添加的阻擋顯示。

替換 Node Layout Section 的第一行為：

最后，使用 FrameCalculator 布局 backgroundImageNode：

這設(shè)置 backgroundImageNode 填滿整個 containerNode。

你幾乎完成了新的 Node 層次結(jié)構(gòu)，但首先你需要正確地設(shè)置 Layer 層次結(jié)構(gòu)，因為容器 Node 現(xiàn)在是根。

管理容器 Node 的 Layer

在  Node Layer and Wrap Up Section ，將 backgroundImageNode 的 Layer 添加到 containerNode 的 Layer 上而不是 contentView 的 Layer 上：

刪除下面的  backgroundImageNode 保留：

因為 cell 只需要單獨保留容器 Node ，所以你要移除 backgroundImageNode 屬性。

不再設(shè)置 cell 的 contentLayer 屬性為  backgroundImageNode 的 Layer，現(xiàn)在將其設(shè)置為 containerNode 的 Layer：

給 RainforestCardCell 添加一個可選的 ASDisplayNode 實例存儲為屬性 containerNode：

記住你需要保留你自己的 Node ，如果你不這么做它們就會被立即釋放。

回到 configureCellDisplayWithCardInfo(cardInfo:)，在 Node Layer and Wrap Up Section 最后，設(shè)置 containerNode 屬性為 containerNode  常量：

編譯并運行。模糊的圖像將會再此顯示！但還有最后一件事要去改變，因為現(xiàn)在有了新的 Node 層次結(jié)構(gòu)。回憶之前 cell 重用時你將圖像停止顯示。現(xiàn)在你需要讓整個 Node 層次結(jié)構(gòu)停止顯示。

在新的 Node 層次結(jié)構(gòu)上處理 Cell 重用

繼續(xù) RainforestCardCell.swift ，在 prepareForReuse() 里，替換設(shè)置 backgroundImageNode.preventOrCancelDisplay 為在 containerNode 上調(diào)用 recursiveSetPreventOrCancelDisplay(...) 并傳遞 true：

當你要取消整個 Node 層次結(jié)構(gòu)的繪制，就使用 recursiveSetPreventOrCancelDisplay()。這個方法將會設(shè)置這個 Node 以及其所有子 Node 的 preventOrCancelDisplay 屬性，無論 true 或 false。

接下來，依然在 prepareForReuse()，用設(shè)置  containerNode 為 nil 替換設(shè)置 backgroundImageNode 為 nil：

移除 RainforestCardCell 的 backgroundImageNode 屬性：

編譯并運行。這個 App 就如之前一樣，但現(xiàn)在你的圖像 Node 在容器 Node 內(nèi)，而重用依然和它應(yīng)有的方式一樣。

Cell 內(nèi)容

目前為止你有了一個 Node 層次結(jié)構(gòu)，但容器內(nèi)還只有一個 Node——圖像 Node。現(xiàn)在是時候設(shè)置 Node 層次結(jié)構(gòu)去復(fù)制在添加 AsyncDisplayKit 之前時應(yīng)用的視圖層次結(jié)構(gòu)了。這意味著添加 text 和一個未模糊的特征圖像。

添加特征圖像

我們要添加特征圖像了，它是一個未模糊的圖像，顯示在卡片的頂部。

打開 RainforestCardCell.swift  并找到 configureCellDisplayWithCardInfo(cardInfo:)。在 Node Creation Section 的底部，添加如下代碼：

這會創(chuàng)建并配置一個叫做 featureImageNode 的 ASImageNode 常量。它被設(shè)置為 Layer 支持的，放大以適用，并設(shè)置顯示圖像，這次不需要模糊。

在 Node Hierarchy Section 的最后，添加 featureImageNode 為 containerNode 的 Subnode：

你正在用更多 Node 填充容器哦！

在 Node Layout Section ，使用 FrameCalculator 布局  featureImageNode：

編譯并運行。你就會看到特征圖像在卡片的頂部出現(xiàn)，位于模糊圖像的上方。注意特征圖像和模糊圖像是如何在同一時間跳出。這是你之前添加的 shouldRasterizeDescendants 在起作用。

添加 Title 文本

接下來添加文字 Label，以顯示動物的名字和描述。首先來動物名字吧。

繼續(xù) configureCellDisplayWithCardInfo(cardInfo:)，找到 Node Creation Section 。添加下列代碼到這節(jié)尾部，就在創(chuàng)建 featureImageNode 之后：

這就創(chuàng)建了一個叫做 titleTextNode 的 ASTextNode 常量。

ASTextNode 是另一個 AsyncDisplayKit 提供的 Node 子類，其用于顯示文本。它是一個具有 UILabel 效果的 Node。它接受一個 attributedString，由 TextKit 支持，有許多特性如文本鏈接。要學到更多關(guān)于這個 Node 的功能，去看 ASTextNode.h 吧。

初始項目包含有一個 NSAttributedString 的擴展，它提供了一個工廠方法去生成一個屬性字符串用于 Title 和 Description 文本以顯示在雨林卡片上。上面的代碼使用了這個擴展的 attributedStringForTitleText(...) 方法。

現(xiàn)在，在 Node Hierarchy Section 底部，添加如下代碼：

這就添加了 titleTextNode 到 Node 層次結(jié)構(gòu)里。它將位于特征圖像和背景圖像之上，因為它在它們之后添加。

在 Node Layout Section 底部添加如下代碼：

一樣使用 FrameCalculator 布局 titleTextNode，就像 backgroundImageNode 和 featureImageNode 那樣。

編譯并運行。你就有了一個 Title 顯示在特征圖像的頂部。再次說明， Label 只會在整個 cell 準備好渲染時才渲染。

添加 Description 文本

添加一個有著 Description 文本的 Node 和添加 Title 文本的 Node 類似。

回到 configureCellDisplayWithCardInfo(cardInfo:) ，在 Node Creation Section 最后，添加如下代碼。就在之前創(chuàng)建 titleTextNode 的語句之后：

這就創(chuàng)建并配置了一個叫做 descriptionTextNode 的 ASTextNode 實例。

在  Node Hierarchy Section 最后，添加 descriptionTextNode 到 containerNode：

在 Node Layout Section ，一樣使用 FrameCalculator 布局 descriptionTextNode：

編譯并運行。現(xiàn)在你能看到 Description 文本了。

Custom Node Subclasses 自定義 Node 子類

目前為止，你使用了 ASImageNode 和 ASTextNode。這會帶你走很遠，但有些時候你需要你自己的 Node，就如同某些時候在傳統(tǒng)的 UIKit 編程里你需要自己的 View 一樣。

創(chuàng)建梯度 Node 類

接下來，你將給 GradientView.swift 添加 Core Graphics 代碼來構(gòu)建一個自定義的梯度 Display Node。這會被用于創(chuàng)建一個繪制梯度的自定義 Node 。梯度圖會顯示在特征圖像的底部以便讓 Title 看起來更加明顯。

打開 Layers-Bridging-Header.h 并添加如下代碼：

需這一步是因為這個類沒有包含在庫的主頭文件里。你在子類化任何 ASDisplayNode 或 _ASDisplayLayer 時都需要訪問這個類。

菜單 File\New\File… 。選擇 iOS\Source\Cocoa Touch Class 。命名類為 GradientNode 并使其作為 ASDisplayNode 的子類。選擇 Swift 語言并點擊 Next 。保存文件再打開 GradientNode.swift 。

添加如下方法到這個類：

如同 UIView 或 CALayer，你可以子類化 ASDisplayNode 去做自定義繪制。你可以使用如同用于 UIView 的 Layer 或單獨的 CALayer 的繪制代碼，這取決于客戶 Node 如何配置 Node。查看 ASDisplayNode+Subclasses.h 獲取更多關(guān)于子類化 ASDisplayNode 的信息。

進一步，ASDisplayNode 的繪制方法比在 UIView 和 CALayer 里的接受更多參數(shù)，給你提供方法少做工作，并更有效率。

要為你的自定義 Display Node 填充內(nèi)容，你需要實現(xiàn)來自 _ASDisplayLayerDelegate 協(xié)議的 drawRect(...) 或 displayWithParameters(...)。在繼續(xù)之前，看看 _ASDisplayLayer.h 得到這個方法和它們參數(shù)的信息。搜索 _ASDisplayLayerDelegate。重點看看頭文件注釋里關(guān)于 drawRect(...) 的描述。

因為梯度圖位于特征圖的上方，使用 Core Graphics 繪制，所以你需要使用 drawRect(...) 。

打開 GradientView.swift 并拷貝 drawRect(...) 的內(nèi)容到 GradientNode.swift 的 drawRect(...)，如下：

然后刪除 GradientView.swift，編譯并確保沒有錯誤。

添加梯度 Node

打開 RainforestCardCell.swift 并找到 configureCellDisplayWithCardInfo(cardInfo:)。在 Node Creation Section 底部，添加如下代碼，就在創(chuàng)建 descriptionTextNode 的代碼之后：

這就創(chuàng)建了一個叫做 gradientNode 的 GradientNode 常量。

在 Node Hierarchy Section，在添加 featureImageNode 那樣下面，添加 gradientNode 到 containerNode：

梯度 Node 需要這個位置才能在特征圖之上，Title 之下。

然后添加如下代碼到 Node Layout Section 底部：

編譯并運行。你將看到梯度在特征圖的底部。Title 確實看得更清楚了！

爆米花特效

如之前提到的，cell 的 Node 內(nèi)容會在完成繪制時“彈出”。這不是很理想。所以讓我們繼續(xù)，以修復(fù)這個問題。但首先，更加深入 AsyncDisplayKit 以看看它是如何工作的。

在 configureCellDisplayWithCardInfo(cardInfo:) 的 Container Node Creation Section ，關(guān)閉容器 Node 的 shouldRasterizeDescendants：

編譯并運行。你會注意到現(xiàn)在容器層次結(jié)構(gòu)里不同的 Node 一個接一個的彈出。你會看到文字彈出，然后是特征圖，然后是模糊背景圖。

當 shouldRasterizeDescendants 關(guān)閉后，AsyncDisplayKit 就不是繪制一個容器 Layer 了，它會創(chuàng)建一個鏡像卡片 Node 層次結(jié)構(gòu)的 Layer 樹。記得爆米花特效存在是因為每個 Layer 都在它繪制結(jié)束后立即出現(xiàn)，而某些 Layer 比另外一個花費更多時間在繪制上。

這不是我們所需要的，但它描述了 AsyncDisplayKit 的工作方式。我們不想要這個行為，所以還是將 shouldRasterizeDescendants 打開：

編譯并運行。又回到整個 cell 在其渲染結(jié)束后彈出了。

該重新思考如何擺脫爆米花特效了。但首先，讓我們看看 Node 在后臺如何構(gòu)造。

在后臺構(gòu)造 Node

除了異步地繪制，使用 AsyncDisplayKit，你同樣可以異步地創(chuàng)建、配置以及布局。深呼吸一下，因為這就是你接下來要做的事情。

創(chuàng)建一個 Node 構(gòu)造操作（Operation）

你要將 Node 層次結(jié)構(gòu)的構(gòu)造包裝到一個 NSOperation 中。這樣做很棒，因為這個操作能很容易的在不同的操作隊列上執(zhí)行，包括后臺隊列。

打開  RainforestCardCell.swift 。然后添加如下方法：

繪制并不是唯一會拖慢主線程的操作。對于復(fù)雜的屏幕，布局計算也有可能變的昂貴。目前為止，本教程當前狀態(tài)的項目，一個緩慢的 Node 布局會引起  Collection View 丟幀。

60 FPS 意味著你有大約 17ms 的時間讓你的 cell 準備好顯示，否則一個或多個幀就會被丟掉。這在 Table View 和 Collection View 有很復(fù)雜的 cell 時是非常常見的，滑動時丟幀就是這個原因。

AsyncDisplayKit 前來救援！

你將使用上面的 nodeConstructionOperation 將所有 Node 層次結(jié)構(gòu)構(gòu)造以及布局從主線程剝離并放入后臺 NSOperationQueue，進一步確保 Collection View 能盡量以接近 60 FPS 的幀率滑動。

警告：你可以在后臺訪問并設(shè)置 Node 的屬性，但只能在 Node 的 Layer 或 View 被創(chuàng)建之前，也就是當你第一次訪問 Node 的 Layer 或 View 屬性時。

一旦 Node 的 Layer 或 View 被創(chuàng)建，你必須在主線程才能訪問和設(shè)置 Node 的屬性，因為 Node 將會轉(zhuǎn)發(fā)這些調(diào)用到它的 Layer 或 View。如果你得到一個崩潰 log 說“Incorrect display node thread affinity”，那就意味著在創(chuàng)建 Node 的 Layer 或 View 之后，你依然嘗試在后臺訪問或設(shè)置 Node 的屬性。

修改 nodeConstructionOperation 操作 Block 的內(nèi)容如下：

在這個操作運行時，cell 可能已經(jīng)被釋放了。在那種情況下，你不需要做任何工作。類似的，如果操作被取消了，那一樣也沒有工作要做了。

之所以對 nodeConstructionOperation` 使用 unowned  引用是為了避免在操作和執(zhí)行閉包之間產(chǎn)生保留環(huán)。

現(xiàn)在找到 configureCellDisplayWithCardInfo(cardInfo:)。將任何在 Image Size Section 之后的代碼移動到 nodeConstructionOperation 的執(zhí)行閉包里。將代碼放在 strongSelf 的條件語句里，即TODO的位置。之后 configureCellDisplayWithCardInfo(cardInfo:) 將看起來如下：

目前，你會有一些編譯錯誤。這是因為操作 Block 里的 self 是 weak 引用，因此是可選的。但你有一個 self 的 strong 引用，因為代碼在可選綁定語句內(nèi)。所以替換錯誤的幾行成下面的樣子：

最后，添加如下代碼到你剛改動的三行之下：

編譯確保沒有錯誤。如果你現(xiàn)在運行，那么只有占位圖會顯示，因為 Node 的創(chuàng)建操作還沒有實際使用。讓我們來添加它。

使用 Node 創(chuàng)建操作

打開 RainforestCardCell.swift 并添加如下屬性：

這就添加了一個叫做 nodeConstructionOperation 的可選屬性

當 cell 準備回收時，你會使用這個屬性去取消 Node 的構(gòu)造。這會在用戶非常快速地滑動 Collection View 時發(fā)生，特別是如果布局還需要一些計算時間的話。

在 prepareForReuse() 添加如下指示的代碼：

這就在 cell 重用時取消了操作，所以如果 Node 創(chuàng)建還沒完成，它也不會完成。

現(xiàn)在找到 configureCellDisplayWithCardInfo(cardInfo:) 并添加如下指示的代碼：

這個 cell 現(xiàn)在會在它準備重用并開始配置時，取消任何進行中的 Node 構(gòu)造操作。這確保了操作被取消，即使 cell 在準備好重用前就被重新配置。

編譯并確保沒有錯誤。

在主線程運行

AsyncDisplayKit 允許你在非主線程做許多工作。但當它要面對 UIKit 和 CoreAnimation 時，你還是需要在主線程做。目前為止，你從主線程移走了所有的 Node 創(chuàng)建。但還有一件事需要被放在主線程——即設(shè)置 CoreAnimation 的 Layer 層次結(jié)構(gòu)。

在 RainforestCardCell.swift 里，找到 nodeConstructionOperationWithCardInfo(cardInfo:image:) 并替換 Node Layer and Wrap Up Section 為如下代碼：

下面描述一下：

1. 回憶到當 Node 的 Layer 屬性被第一個訪問時，所有的 Layer 會被創(chuàng)建。這就是為何你必須運行 Node Layer 并在主線程包裝小節(jié)，因此代碼訪問 Node 的 Layer。

2. 操作被檢查以確定是否在添加 Layer 之前就已經(jīng)取消了。在操作完成前，cell 被重用或者重新配置，就很可能會出現(xiàn)這樣的情況，那你就不應(yīng)該添加 Layer 了。

3. 作為一個保險，確保 Node 當前的 nodeConstructionOperation 和調(diào)度此閉包的操作是同一個 NSOperation 。

4. 如果 containerNode 的 preventOrCancel 是 true 就立即返回。如果構(gòu)造操作完成，但 Node 的繪制還沒有被取消，你依然不想 Node 的 Layer 顯示在 cell 里。

5. 最后，添加 Node 的 Layer 到層次結(jié)構(gòu)中，如果必要，這將創(chuàng)建 Layer。

編譯確保沒有錯誤。

開始 Node 創(chuàng)建操作

你依然沒有 實際 創(chuàng)建和開始操作。讓我們現(xiàn)在來來吧。

繼續(xù)在 RainforestCardCell.swift 里，改變 configureCellDisplayWithCardInfo(cardInfo:) 的方法簽名為：

這里添加了一個新的參數(shù) nodeConstructionQueue。它就是一個用于 Node 創(chuàng)建操作的入隊的 NSOperationQueue 。

在 configureCellDisplayWithCardInfo(cardInfo:nodeConstructionQueue:) 底部，添加如下代碼：

這就創(chuàng)建了一個 Node 構(gòu)造操作，將其保留在 nodeConstructionOperation 屬性，并將其添加到傳入的隊列。

最后，打開 RainforestViewController.swift 。給 RainforestViewController 添加一個叫做 nodeConstructionQueue 的初始化為常量的屬性，如下：

接下來，在 collectionView(collectionView:cellForItemAtIndexPath indexPath:) 里，傳遞 View Controller 的 nodeConstructionQueue 到 configureCellDisplayWithCardInfo(cardInfo:nodeConstructionQueue:) ：

cell 將會創(chuàng)建一個新的 Node 構(gòu)造操作并將其添加到 View Controller 的操作隊列里并發(fā)運行。記住在 cell 出隊時就會創(chuàng)建一個新 Node 層次結(jié)構(gòu)。這并不理想，但足夠好。如果你要緩存 Node 的重用，看看 ASRangeController 吧。

哦呼，OK，現(xiàn)在編譯并運行！你將看到和之前一樣的效果，但現(xiàn)在布局和渲染都沒在主線程執(zhí)行了。牛！我打賭里你重來沒有想過你會看到這一天你所做的 事情。這就是 AsyncDisplayKit 的威力。你可以將更多更多不需要在主線程的操作從主線程移除，這將給主線程更多機會處理用戶交互，讓你的 App 摸起來如黃油般順滑。

淡入 Cell

現(xiàn)在是有趣的部分。在這個簡短的小節(jié)，你將學到：

· 用自定義 Display Layer 子類來支持 Node；

· 觸發(fā) Node Layer 的隱式動畫。

這將會確保你移除爆米花特效并最終帶來良好的淡入動畫。

創(chuàng)建一個新的 Layer 子類。

菜單 File\New\File… ，選擇 iOS\Source\Cocoa Touch Class 并單擊 Next 。命名類為 AnimatedContentsDisplayLayer 并使其作為 _ASDisplayLayer 的子類。選擇 Swift 語言并單擊 Next。最后保存并打開 AnimatedContentsDisplayLayer.swift 。

現(xiàn)在添加如下方法到類：

Layer 有一個 contents 屬性，它告訴系統(tǒng)為這個 Layer 繪制什么。AsyncDisplayKit 通過在后臺渲染 contents 并最后在主線程設(shè)置 contents。

這個代碼將會添加一個過渡動畫，這樣 contents 就會淡如到 View 中。你可以在 Apple 的 Core Animation Programming Guide 找到更多關(guān)于隱式 Layer 動畫以及 CAAction 的信息.。

編譯并確保沒有錯誤。

淡入容器 Node

你已經(jīng)設(shè)置好一個 Layer 會在其 contents 被設(shè)置時淡入，你現(xiàn)在就要使用這個 Layer。

打開 RainforestCardCell.swift 。在 nodeConstructionOperationWithCardInfo(cardInfo:image:) 里，在 Container Node Creation Section 開頭，改動如下行：

這會告訴容器 Node 使用 AnimatedContentsDisplayLayer 實例作為其支持 Layer，因此自動帶來淡入的效果。

注意：只有 _ASDisplayLayer 的子類才能被異步地繪制。

編譯并運行。你將看到容器 Node 會在其繪制好之后淡入。

又往何處去？

恭喜！在你需要高性能地滑動你的用戶界面的時候，你有了另外一個工具在手。

在本教程里，你通過替換視圖層次結(jié)構(gòu)為一個柵格化的 AsyncDisplayKit Node 層次結(jié)構(gòu)，顯著改善了一個性能很差的 Collection View 的滑動性能。多么令人激動！

這只是一個例子而已。AsyncDisplayKit 保有提高 UI 性能到一定水平的承諾，這通過平常的 UIKit 優(yōu)化往往難以達到。

實際說來，要充分利用 AsyncDisplayKit，你需要對標準 UIKit 的真正性能瓶頸的所在有足夠的了解。AsyncDisplayKit 很棒的一點是它引發(fā)我們探討這些問題并思考我們的 App 能如何在物理的極限上更快以及更具響應(yīng)性。

AsyncDisplayKit 是探討此性能前沿的一個非常強大的工具。明智地使用它，并步步逼近超級響應(yīng)UI的極限。

這僅僅是 AsyncDisplayKit 的一個開始！它作者和貢獻者每天都在構(gòu)建新的特性。請關(guān)注 1.1 版的 ASCollectionView 以及 ASMultiplexImageNode。從頭文件中可看到“ASMultiplexImageNode 是一個圖像 Node，它能加載并顯示一個圖像的多個版本。例如，它可以在高分辨率的圖像還在渲染時先顯示一個低分辨率的圖像。” 非常酷，對吧 :]

你可以在此下載最終的 Xcode 項目。

AsyncDisplayKit 的指導(dǎo)在這里，AsyncDisplayKit 的 Github 倉庫在這里。

這個庫的作者在收集 API 設(shè)計的反饋。你可以在 Facebook 上 的 Paper Engineering Community group 分享你的想法，或者直接參與到 AsyncDisplayKit 的開發(fā)中，通過 GitHub 貢獻你的 pull request。

總結(jié)

以上是生活随笔為你收集整理的[转]AsyncDisplayKit 教程：达到 60 FPS 的滚动帧率的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。