<p>一个第三方库能做到像新产品一样，值得大家去写写使用体会的，并不多见， AsyncDisplayKit 却完全可以，因为 AsyncDisplayKit 不仅仅是一个工具，它更像一个系统UI框架，改变整个编码体验。也正是这种极强的侵入性，导致不少听过、star过，甚至下过demo跑过 AsyncDisplayKit 的你我，望而却步，驻足观望。但列表界面稍微复杂时，烦人的高度计算，因为性能不得不放弃 Autolayout 而选择上古时代的 frame layout ，令人精疲力尽，这时 AsyncDisplayKit 总会不自然浮现眼前，让你跃跃欲试。</p>    <p>去年10月份，我们入坑了。</p>    <p>当时还只是拿简单的列表页试水，基本上手后，去年底在稍微空闲的时候用 AsyncDisplayKit 重构了帖子详情，今年三月份，又借着公司聊天增加群聊的契机，用 AsyncDisplayKit 重构整个聊天。林林总总，从简单到复杂，踩过的坑大大小小，将近一年的时光转眼飞逝，可以写写总结了。</p>    <h2>学习曲线</h2>    <p>先说说学习曲线，这是大家都比较关心的问题。</p>    <p>跟大多人一样，一开始我以为 AsyncDisplayKit 会像 Rxswift 等 MVVM 框架一样，有着陡峭的学习曲线。但事实上， AsyncDisplayKit 的学习曲线还算平滑。</p>    <p>主要是因为 AsyncDisplayKit 只是对 UIKit 的再一次封装，基本沿用了 UIKit 的 API 设计，大部分情况下，只是将 view 改成 node ， UI 前缀改为 AS ，写着写着，恍惚间，你以为自己还是在写 UIKit 呢。</p>    <p>比如 ASDisplayNode 与 UIView ：</p>    <pre>  <code class="language-objectivec">let nodeA = ASDisplayNode()  let nodeB = ASDisplayNode()  let nodeC = ASDisplayNode()  nodeA.addSubnode(nodeB)  nodeA.addSubnode(nodeC)  nodeA.backgroundColor = .red  nodeA.frame = CGRect(x: 0, y: 0, width: 100, height: 100)  nodeC.removeFromSupernode()    let viewA = UIView()  let viewB = UIView()  let viewC = UIView()  viewA.addSubview(viewB)  viewA.addSubview(viewC)  viewA.backgroundColor = .red  viewA.frame = CGRect(x: 0, y: 0, width: 100, height: 100)  viewC.removeFromSuperview()  </code></pre>    <p>相信你看两眼也就摸出门道了，大部分API一模一样。</p>    <p>真正发生翻天覆地变化的是布局方式， AsyncDisplayKit 用的是 flexbox 布局， UIView 使用的是 Autolayout 。用 AsyncDisplayKit 的 flexbox 布局替代 Autolayout 布局，完全不亚于用 Autolayout 替换 frame 布局的蜕变，需要比较大的观念转变。</p>    <p>但 flexbox 布局被提出已久，且其本身直观简单，较容易上手，学习曲线只是略陡峭。</p>    <p>这里有一个学习 AsyncDisplayKit 布局的 <a href="/misc/goto?guid=4959751246687307237" rel="nofollow,noindex">小游戏</a> ，简单有趣，可以一玩。</p>    <p>整体上两天即可上手，无须担心学习曲线问题。</p>    <h2>体会</h2>    <p>当过了上手的艰难阶段后，才是真正开始体会 AsyncDisplayKit 的时候。用了将近一年，有几点 AsyncDisplayKit 的优势相当明显：</p>    <p>1） cell 中再也不用算高度和位置等 frame 信息了</p>    <p>这是非常非常非常非常诱人的，当 cell 中有动态文本时，文本的高度计算很费神，计算完，还得缓存，如果再加上其他动态内容，比如有时候没图片，那 frame 算起来，简直让人想哭，而如果用 AsyncDisplayKit ，所有的 height 、 frame 计算都烟消云散，甚至都不知道 frame 这个东西存在过，很酸爽。</p>    <p>2）一帧不掉</p>    <p>平时界面稍微动态点，元素稍微多点， Autolayout 的性能就不堪重用，而上古时代的 frame 布局在高效缓存的基础上确实可以做到高性能，但 frame 缓存的维护和计算都不是一般的复杂，而 AsyncDisplayKit 却能在保持简介布局的同时，做到一帧不掉，这是多么的让人感动！</p>    <p>3）更优雅的架构设计</p>    <p>前两点好处是用 AsyncDisplayKit 最直接最容易被感受到的，其实，当深入使用时，你会发现， AsyncDisplayKit 还会给程序架构设计带来一些改变，会使原本复杂的架构变得更简单，更优雅，更灵活，更容易维护，更容易扩展，也会使整个代码更容易理解，而这个影响是深远的，毕竟代码是写给别人看的。</p>    <p>但 AsyncDisplayKit 有一个极其著名的问题，闪烁。</p>    <p>当我们开始试水使用 AsyncDisplayKit 时，只要简单 reload 一下 TableNode ，那闪烁，眼睛都瞎了。后来查了官方的 issue ，才发现很多人都提了这个问题，但官方也没给出什么优雅的解决方案。要知道，闪烁是非常影响用户体验的。如果非要在不闪烁和带闪烁的 AsyncDisplayKit 中选择，我会毫不犹豫的选择不闪烁，而放弃使用 AsyncDisplayKit 。但现在已经不存在这个选择了，因为经过 AsyncDisplayKit 的多次迭代努力加上一些小技巧， AsyncDisplayKit 的异步闪烁已经被优雅的解决了。</p>    <p>但 AsyncDisplayKit 不宜广泛使用，那些高度固定、 UI 简单用 UIKit 更好一些，毕竟 AsyncDisplayKit 并不像 UIKit ，人人都会，如果内容和高度复杂又很动态，强烈推荐 AsyncDisplayKit ，它会简化太多东西。</p>    <h2>疑难点</h2>    <p>一年的 AsyncDisplayKit 使用经验，踩过了不少坑，遇到了不少值得注意的问题，一并列在这里，以供参考。</p>    <h2>ASNetworkImageNode的缓存</h2>    <p>ASNetworkImageNode 是对 UIImageView 需要从网络加载图片这一使用场景的封装，省去了 YYWebImage 或者 SDWebImage 等第三方库的引入，只需要设置 URL 即可实现网络图片的自动加载。</p>    <pre>  <code class="language-objectivec">import AsyncDisplayKit    let avatarImageNode = ASNetworkImageNode()  avatarImageNode.url = URL(string: "http://shellhue.github.io/images/log.png")  </code></pre>    <p>这非常省事便捷，但 ASNetworkImageNode 默认用的缓存机制和图片下载器是 PinRemoteImage ，为了使用我们自己的缓存机制和图片下载器，需要实现 ASImageCacheProtocol 图片缓存协议和 ASImageDownloaderProtocol 图片下载器协议两个协议，然后初始化时，用 ASNetworkImageNode 的 init(cache: ASImageCacheProtocol, downloader: ASImageDownloaderProtocol) 初始化方法，传入对应的类，方便其间，一般会自定义一个初始化静态方法。我们公司缓存机制和图片下载器都是用的 YYWebImage ，桥接代码如下。</p>    <pre>  <code class="language-objectivec">import YYWebImage  import AsyncDisplayKit    extension ASNetworkImageNode {    static func imageNode() -> ASNetworkImageNode {      let manager = YYWebImageManager.shared()      return ASNetworkImageNode(cache: manager, downloader: manager)    }  }    extension YYWebImageManager: ASImageCacheProtocol, ASImageDownloaderProtocol {    public func downloadImage(with URL: URL,                              callbackQueue: DispatchQueue,                              downloadProgress: AsyncDisplayKit.ASImageDownloaderProgress?,                              completion: @escaping AsyncDisplayKit.ASImageDownloaderCompletion) -> Any? {      weak var operation: YYWebImageOperation?      operation = requestImage(with: URL,                               options: .setImageWithFadeAnimation,                               progress: { (received, expected) -> Void in                                callbackQueue.async(execute: {                                  let progress = expected == 0 ? 0 : received / expected                                  downloadProgress?(CGFloat(progress))                                })      }, transform: nil, completion: { (image, url, from, state, error) in        completion(image, error, operation)      })            return operation    }        public func cancelImageDownload(forIdentifier downloadIdentifier: Any) {      guard let operation = downloadIdentifier as? YYWebImageOperation else {        return      }      operation.cancel()    }        public func cachedImage(with URL: URL, callbackQueue: DispatchQueue, completion: @escaping AsyncDisplayKit.ASImageCacherCompletion) {      cache?.getImageForKey(cacheKey(for: URL), with: .all, with: { (image, cacheType) in        callbackQueue.async {          completion(image)        }      })    }  }  </code></pre>    <h2>闪烁</h2>    <p>初次使用 AsyncDisplayKit ，当享受其一帧不掉如丝般柔滑的手感时， ASTableNode 和 ASCollectionNode 刷新时的闪烁一定让你几度崩溃，到 AsyncDisplayKit 的 github 上搜索闪烁相关issue，会出来100多个问题。闪烁是 AsyncDisplayKit 与生俱来的问题，闻名遐迩，而闪烁的体验非常糟糕。幸运的是，几经探索， AsyncDisplayKit 的闪烁问题已经完美解决，这个完美指的是一帧不掉的同时没有任何闪烁，同时也没增加代码的复杂度。</p>    <p>闪烁可以分为四类，</p>    <h3>1）ASNetworkImageNode reload时的闪烁</h3>    <p>当 ASCellNode 中包含 ASNetworkImageNode ，则这个 cell reload 时， ASNetworkImageNode 会异步从本地缓存或者网络请求图片，请求到图片后再设置 ASNetworkImageNode 展示图片，但在异步过程中， ASNetworkImageNode 会先展示 PlaceholderImage ，从 PlaceholderImage —> fetched image 的展示替换导致闪烁发生，即使整个 cell 的数据没有任何变化，只是简单的 reload ， ASNetworkImageNode 的图片加载逻辑依然不变，因此仍然会闪烁，这显著区别于 UIImageView ，因为 YYWebImage 或者 SDWebImage 对 UIImageView 的 image 设置逻辑是，先同步检查有无内存缓存，有的话直接显示，没有的话再先显示 PlaceholderImage ，等待加载完成后再显示加载的图片，也即逻辑是 memory cached image —> PlaceholderImage —> fetched image 的逻辑，刷新当前 cell 时，如果数据没有变化 memory cached image 一般都会有，因此不会闪烁。</p>    <p>AsyncDisplayKit 官方给的修复思路是：</p>    <pre>  <code class="language-objectivec">import AsyncDisplayKit    let node = ASNetworkImageNode()  node.placeholderColor = UIColor.red  node.placeholderFadeDuration = 3  </code></pre>    <p>这样修改后，确实没有闪烁了，但这只是将 PlaceholderImage —> fetched image 图片替换导致的闪烁拉长到3秒而已，自欺欺人，并没有修复。</p>    <p>既然闪烁是 reload 时，没有事先同步检查有无缓存导致的，继承一个 ASNetworkImageNode 的子类，复写 url 设置逻辑：</p>    <pre>  <code class="language-objectivec">import AsyncDisplayKit    class NetworkImageNode: ASNetworkImageNode {    override var url: URL? {      didSet {        if let u = url,          let image = UIImage.cachedImage(with: u) else {          self.image = image          placeholderEnabled = false        }      }    }  }  </code></pre>    <p>按道理不会闪烁了，但事实上仍然会，只要是个 ASNetworkImageNode ，无论怎么设置，都会闪，这与官方的API说明严重不符，很无语。迫不得已之下，当有缓存时，直接用 ASImageNode 替换 ASNetworkImageNode 。</p>    <pre>  <code class="language-objectivec">import AsyncDisplayKit    class NetworkImageNode: ASDisplayNode {    private var networkImageNode = ASNetworkImageNode.imageNode()    private var imageNode = ASImageNode()        var placeholderColor: UIColor? {      didSet {        networkImageNode.placeholderColor = placeholderColor      }    }        var image: UIImage? {      didSet {        networkImageNode.image = image      }    }        override var placeholderFadeDuration: TimeInterval {      didSet {        networkImageNode.placeholderFadeDuration = placeholderFadeDuration      }    }        var url: URL? {      didSet {        guard let u = url,          let image = UIImage.cachedImage(with: u) else {            networkImageNode.url = url            return        }                imageNode.image = image      }    }        override init() {      super.init()      addSubnode(networkImageNode)      addSubnode(imageNode)    }        override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {      return ASInsetLayoutSpec(insets: .zero,                               child: networkImageNode.url == nil ? imageNode : networkImageNode)    }        func addTarget(_ target: Any?, action: Selector, forControlEvents controlEvents: ASControlNodeEvent) {      networkImageNode.addTarget(target, action: action, forControlEvents: controlEvents)      imageNode.addTarget(target, action: action, forControlEvents: controlEvents)    }  }  </code></pre>    <p>使用时将 NetworkImageNode 当成 ASNetworkImageNode 使用即可。</p>    <h3>2）reload 单个cell时的闪烁</h3>    <p>当 reload ASTableNode 或者 ASCollectionNode 的某个 indexPath 的 cell 时，也会闪烁。原因和 ASNetworkImageNode 很像，都是异步惹的祸。当异步计算 cell 的布局时， cell 使用 placeholder 占位（通常是白图），布局完成时，才用渲染好的内容填充 cell ， placeholder 到渲染好的内容切换引起闪烁。 UITableViewCell 因为都是同步，不存在占位图的情况，因此也就不会闪。</p>    <p>先看官方的修改方案，</p>    <pre>  <code class="language-objectivec">func tableNode(_ tableNode: ASTableNode, nodeForRowAt indexPath: IndexPath) -> ASCellNode {    let cell = ASCellNode()    ... // 其他代码          cell.neverShowPlaceholders = true        return cell  }  </code></pre>    <p>这个方案非常有效，因为设置 cell.neverShowPlaceholders = true ，会让 cell 从异步状态衰退回同步状态，若 reload 某个 indexPath 的 cell ，在渲染完成之前，主线程是卡死的，这与 UITableView 的机制一样，但速度会比 UITableView 快很多，因为 UITableView 的布局计算、资源解压、视图合成等都是在主线程进行，而 ASTableNode 则是多个线程并发进行，何况布局等还有缓存。所以，一般也没有问题，贝聊的聊天界面只是简单这样设置后，就不闪了，而且一帧不掉。但当页面布局较为复杂时，滑动时的卡顿掉帧就变的肉眼可见。</p>    <p>这时，可以设置 ASTableNode 的 leadingScreensForBatching 减缓卡顿</p>    <pre>  <code class="language-objectivec">override func viewDidLoad() {    super.viewDidLoad()    ... // 其他代码          tableNode.leadingScreensForBatching = 4  }  </code></pre>    <p>一般设置 tableNode.leadingScreensForBatching = 4 即提前计算四个屏幕的内容时，掉帧就很不明显了，典型的空间换时间。但仍不完美，仍然会掉帧，而我们期望的是一帧不掉，如丝般顺滑。这不难，基于上面不闪的方案，刷点小聪明就能解决。</p>    <pre>  <code class="language-objectivec">class ViewController: ASViewController {    ... // 其他代码    private var indexPathesToBeReloaded: [IndexPath] = []        func tableNode(_ tableNode: ASTableNode, nodeForRowAt indexPath: IndexPath) -> ASCellNode {      let cell = ASCellNode()      ... // 其他代码              cell.neverShowPlaceholders = false      if indexPathesToBeReloaded.contains(indexPath) {        let oldCellNode = tableNode.nodeForRow(at: indexPath)        cell.neverShowPlaceholders = true        oldCellNode?.neverShowPlaceholders = true        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {          cell.neverShowPlaceholders = false          if let indexP = self.indexPathesToBeReloaded.index(of: indexPath) {            self.indexPathesToBeReloaded.remove(at: indexP)          }        })      }      return cell    }        func reloadActionHappensHere() {      ... // 其他代码            let indexPath = ... // 需要roload的indexPath        indexPathesToBeReloaded.append(indexPath)      tableNode.reloadRows(at: [indexPath], with: .none)    }  }  </code></pre>    <p>关键代码是，</p>    <pre>  <code class="language-objectivec">if indexPathesToBeReloaded.contains(indexPath) {    let oldCellNode = tableNode.nodeForRow(at: indexPath)    cell.neverShowPlaceholders = true    oldCellNode?.neverShowPlaceholders = true    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {      cell.neverShowPlaceholders = false      if let indexP = self.indexPathesToBeReloaded.index(of: indexPath) {        self.indexPathesToBeReloaded.remove(at: indexP)      }    })  }  </code></pre>    <p>即，检查当前的 indexPath 是否被标记，如果是，则先设置 cell.neverShowPlaceholders = true ，等待 reload 完成（一帧是1/60秒，这里等待0.5秒，足够渲染了），将 cell.neverShowPlaceholders = false 。这样 reload 时既不会闪烁，也不会影响滑动时的异步绘制，因此一帧不掉。</p>    <p>这完全是耍小聪明的做法，但确实非常有效。</p>    <h3>3）reloadData时的闪烁</h3>    <p>在下拉刷新后，列表经常需要重新刷新，即调用 ASTableNode 或者 ASCollectionNode 的 reloadData 方法，但会闪，而且很明显。有了单个 cell reload 时闪烁的解决方案后，此类闪烁解决起来，就很简单了。</p>    <pre>  <code class="language-objectivec">func reloadDataActionHappensHere() {    ... // 其他代码        let count = tableNode.dataSource?.tableNode?(tableNode, numberOfRowsInSection: 0) ?? 0    if count > 2 {      // 将肉眼可见的cell添加进indexPathesToBeReloaded中      indexPathesToBeReloaded.append(IndexPath(row: 0, section: 0))      indexPathesToBeReloaded.append(IndexPath(row: 1, section: 0))      indexPathesToBeReloaded.append(IndexPath(row: 2, section: 0))    }    tableNode.reloadData()          ... // 其他代码  }  </code></pre>    <p>将肉眼可见的 cell 添加进 indexPathesToBeReloaded 中即可。</p>    <h3>4）insertItems时更改ASCollectionNode的contentOffset引起的闪烁</h3>    <p>我们公司的聊天界面是用 AsyncDisplayKit 写的，当下拉加载更多新消息时，为保持加载后当前消息的位置不变，需要在 collectionNode.insertItems(at: indexPaths) 完成后，复原 collectionNode.view.contentOffset ，代码如下：</p>    <pre>  <code class="language-objectivec">func insertMessagesToTop(indexPathes: [IndexPath]) {    let originalContentSizeHeight = collectionNode.view.contentSize.height    let originalContentOffsetY = collectionNode.view.contentOffset.y    let heightFromOriginToContentBottom = originalContentSizeHeight - originalContentOffsetY    let heightFromOriginToContentTop = originalContentOffsetY    collectionNode.performBatch(animated: false, updates: {      self.collectionNode.insertItems(at: indexPaths)    }) { (finished) in      let contentSizeHeight = self.collectionNode.view.contentSize.height      self.collectionNode.view.contentOffset = CGPointMake(0, isLoadingMore ? (contentSizeHeight - heightFromOriginToContentBottom) : heightFromOriginToContentTop)    }  }  </code></pre>    <p>遗憾的是，会闪烁。起初以为是 AsyncDisplayKit 异步绘制导致的闪烁，一度还想放弃 AsyncDisplayKit ，用 UITableView 重写一遍，幸运的是，当时项目工期太紧，没有时间重写，也没时间仔细排查，直接带问题上线了。</p>    <p>最近闲暇，经仔细排查，方知不是 AsyncDisplayKit 的锅，但也比较难修，有一定的参考价值，因此一并列在这里。</p>    <p>闪烁的原因是， collectionNode insertItems 成功后会先绘制 contentOffset 为 CGPoint(x: 0, y: 0) 时的一帧画面，无动画时这一帧画面立即显示，然后调用成功回调，回调中复原了 collectionNode.view.contentOffset ，下一帧就显示复原了位置的画面，前后有变化因此闪烁。这是做消息类APP一并会遇到的bug，google一下，主要有两种解决方案，</p>    <p>第一种，通过仿射变换倒置 ASCollectionNode ，这样下拉加载更多，就变成正常列表的上拉加载更多，也就无需移动 contentOffset 。 ASCollectionNode 还特意设置了个属性 inverted ，方便大家开发。然而这种方案换汤不换药，当收到新消息，同时正在查看历史消息，依然需要插入新消息并复原 contentOffset ，闪烁依然在其他情形下发生。</p>    <p>第二种，集成一个 UICollectionViewFlowLayout ，重写 prepare() 方法，做相应处理即可。这个方案完美，简介优雅。子类化的 CollectionFlowLayout 如下：</p>    <pre>  <code class="language-objectivec">class CollectionFlowLayout: UICollectionViewFlowLayout {    var isInsertingToTop = false    override func prepare() {      super.prepare()      guard let collectionView = collectionView else {        return      }      if !isInsertingToTop {        return      }      let oldSize = collectionView.contentSize      let newSize = collectionViewContentSize      let contentOffsetY = collectionView.contentOffset.y + newSize.height - oldSize.height      collectionView.setContentOffset(CGPoint(x: collectionView.contentOffset.x, y: contentOffsetY), animated: false)    }  }  </code></pre>    <p>当需要 insertItems 并且保持位置时，将 CollectionFlowLayout 的 isInsertingToTop 设置为 true 即可，完成后再设置为 false 。如下，</p>    <pre>  <code class="language-objectivec">class MessagesViewController: ASViewController {    ... // 其他代码    var collectionNode: ASCollectionNode!    var flowLayout: CollectionFlowLayout!    override func viewDidLoad() {      super.viewDidLoad()      flowLayout = CollectionFlowLayout()      collectionNode = ASCollectionNode(collectionViewLayout: flowLayout)      ... // 其他代码    }        ... // 其他代码        func insertMessagesToTop(indexPathes: [IndexPath]) {      flowLayout.isInsertingToTop = true      collectionNode.performBatch(animated: false, updates: {        self.collectionNode.insertItems(at: indexPaths)      }) { (finished) in        self.flowLayout.isInsertingToTop = false      }    }        ... // 其他代码  }  </code></pre>    <h2>布局</h2>    <p>AsyncDisplayKit 采用的是 flexbox 的布局思想，非常高效直观简洁，但毕竟迥异于 AutoLayout 和 frame layout 的布局风格，咋一上手，很不习惯，有些小技巧还是需要慢慢积累，有些概念也需要逐渐熟悉深入，下面列举几个笔者觉得比较重要的概念</p>    <p>1）设置任意间距</p>    <p>AutoLayout 实现任意间距，比较容易直观，因为 AutoLayout 的约束，本来就是我的边离你的边有多远的概念，而 AsyncDisplayKit 并没有， AsyncDisplayKit 里面的概念是，我自己的前面有多少空白距离，我自己的后面有多少空白距离，更强调自己。假如有三个元素，怎么约束它们之间的间距？</p>    <p>AutoLayout 是这样的：</p>    <pre>  <code class="language-objectivec">import Masonry  class SomeView: UIView {    override init() {      super.init()      let viewA = UIView()      let viewB = UIView()      let viewC = UIView()      addSubview(viewA)      addSubview(viewB)      addSubview(viewC)            viewB.snp.makeConstraints { (make) in        make.left.equalTo(viewA.snp.right).offset(15)      }            viewC.snp.makeConstraints { (make) in        make.left.equalTo(viewB.snp.right).offset(5)      }    }  }  </code></pre>    <p>而 AsyncDisplayKit 是这样的：</p>    <pre>  <code class="language-objectivec">import AsyncDisplayKit  class SomeNode: ASDisplayNode {    let nodeA = ASDisplayNode()    let nodeB = ASDisplayNode()    let nodeC = ASDisplayNode()    override init() {      super.init()      addSubnode(nodeA)      addSubnode(nodeB)      addSubnode(nodeC)    }    override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {      nodeB.style.spaceBefore = 15      nodeC.stlye.spaceBefore = 5            return ASStackLayoutSpec(direction: .horizontal, spacing: 0, justifyContent: .start, alignItems: .start, children: [nodeA, nodeB, nodeC])    }  }  </code></pre>    <p>如果是拿 ASStackLayoutSpec 布局，元素之间的任意间距一般是通过元素自己的 spaceBefore 或者 spaceBefore style 实现，这是自我包裹性，更容易理解，如果不是拿 ASStackLayoutSpec 布局，可以将某个元素包裹成 ASInsetsLayoutSpec ，再设置 UIEdgesInsets ，保持自己的四周任意边距。</p>    <p>能任意设置间距是自由布局的基础。</p>    <p>2）flexGrow和flexShrink</p>    <p>flexGrow 和 flexShrink 是相当重要的概念， flexGrow 是指当有多余空间时，拉伸谁以及相应的拉伸比例（当有多个元素设置了 flexGrow 时）， flexShrink 相反，是指当空间不够时，压缩谁及相应的压缩比例（当有多个元素设置了 flexShrink 时）。</p>    <p>灵活使用 flexGrow 和 spacer (占位 ASLayoutSpec )可以实现很多效果，比如等间距，</p>    <p><img src="https://simg.open-open.com/show/c731eecf9b628e6fbfe31ffd7f728504.png"></p>    <p>实现代码如下，</p>    <pre>  <code class="language-objectivec">import AsyncDisplayKit  class ContainerNode: ASDisplayNode {    let nodeA = ASDisplayNode()    let nodeB = ASDisplayNode()    override init() {      super.init()      addSubnode(nodeA)      addSubnode(nodeB)    }    override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {      let spacer1 = ASLayoutSpec()      let spacer2 = ASLayoutSpec()      let spacer3 = ASLayoutSpec()      spacer1.stlye.flexGrow = 1      spacer2.stlye.flexGrow = 1      spacer3.stlye.flexGrow = 1            return ASStackLayoutSpec(direction: .horizontal, spacing: 0, justifyContent: .start, alignItems: .start, children: [spacer1, nodeA,spacer2, nodeB, spacer3])    }  }  </code></pre>    <p>如果 spacer 的 flexGrow 不同就可以实现指定比例的布局，再结合 width 样式，轻松实现以下布局</p>    <p><img src="https://simg.open-open.com/show/f7a690397e54adf874af09c74c6e7a5b.png"></p>    <p>布局代码如下，</p>    <pre>  <code class="language-objectivec">override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {    let spacer1 = ASLayoutSpec()    let spacer2 = ASLayoutSpec()    let spacer3 = ASLayoutSpec()    spacer1.stlye.flexGrow = 2    spacer2.stlye.width = ASDimensionMake(100)    spacer3.stlye.flexGrow = 1        return ASStackLayoutSpec(direction: .horizontal, spacing: 0, justifyContent: .start, alignItems: .start, children: [spacer1, nodeA,spacer2, nodeB, spacer3])  }  </code></pre>    <p>相同的布局如果用 Autolayout ，麻烦去了。</p>    <p>3）constrainedSize的理解</p>    <p>constrainedSize 是指某个 node 的大小取值范围，有 minSize 和 maxSize 两个属性。比如下图的布局：</p>    <p><img src="https://simg.open-open.com/show/5833bc84010cd3844b9fc6c571e7feab.png"></p>    <pre>  <code class="language-objectivec">import AsyncDisplayKit  class ContainerNode: ASDisplayNode {    let nodeA = ASDisplayNode()    let nodeB = ASDisplayNode()    override init() {      super.init()      addSubnode(nodeA)      addSubnode(nodeB)      nodeA.style.preferredSize = CGSize(width: 100, height: 100)    }      override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {      nodeB.style.flexShrink = 1      nodeB.style.flexGrow = 1      let stack = ASStackLayoutSpec(direction: .horizontal, spacing: e, justifyContent: .start, alignItems: .start, children: [nodeA, nodeB])      return ASInsetLayoutSpec(insets: UIEdgeInsetsMake(a, b, c, d), child: stack)    }  }  </code></pre>    <p>其中方法 override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec 中的 constrainedSize 所指是 ContainerNode 自身大小的取值范围。给定 constrainedSize ， AsyncDisplayKit 会根据 ContainerNode 在 layoutSpecThatFits(_:) 中施加在 nodeA、nodeB 的布局规则和 nodeA、nodeB 自身属性计算 nodeA、nodeB 的 constrainedSize 。</p>    <p>假如 constrainedSize 的 minSize 是 CGSize(width: 0, height: 0) ， maxSize 为 CGSize(width: 375, height: Inf+) ( Inf+ 为正无限大)，则：</p>    <p>1）根据布局规则和 nodeA 自身样式属性 maxWidth 、 minWidth 、 width 、 height 、 preferredSize ，可计算出 nodeA 的 constrainedSize 的 minSize 和 maxSize 均为其 preferredSize 即 CGSize(width: 100, height: 100) ，因为布局规则为水平向的 ASStackLayout ，当空间富余或者空间不足时， nodeA 即不压缩又不拉伸，所以会取其指定的 preferredSize 。</p>    <p>2）根据布局规则和 nodeB 自身样式属性 maxWidth 、 minWidth 、 width 、 height 、 preferredSize ，可以计算出其 constrainedSize 的 minSize 是 CGSize(width: 0, height: 0) ， maxSize 为 CGSize(width: 375 - 100 - b - e - d, height: Inf+) ，因为 nodeB 的 flexShrink 和 flexGrow 均为1，也即当空间富余或者空间不足时， nodeB 添满富余空间或压缩至空间够为止。</p>    <p>如果不指定 nodeB 的 flexShrink 和 flexGrow ，那么当空间富余或者空间不足时， AsyncDisplayKit 就不知道压缩和拉伸哪一个布局元素，则 nodeB 的 constrainedSize 的 maxSize 就变为 CGSize(width: Inf+, height: Inf+) ，即完全无大小限制，可想而知， nodeB 的子 node 的布局将完全不对。这也说明另外一个问题， node 的 constrainedSize 并不是一定大于其子 node 的 constrainedSize 。</p>    <p>理解 constrainedSize 的计算，才能熟练利用 node 的样式 maxWidth 、 minWidth 、 width 、 height 、 preferredSize 、 flexShrink 和 flexGrow 进行布局。如果发现布局结果不对，而对应 node 的布局代码确是正确无误，一般极有可能是因为此 node 的父布局元素不正确。</p>    <h2>动画</h2>    <p>因为 AsyncDisplayKit 的布局方式有两种， frame 布局和 flexbox 式的布局，相应的动画方式也有两种</p>    <p>1）frame布局</p>    <p>如果采用的是 frame 布局，动画跟普通的 UIView 相同</p>    <pre>  <code class="language-objectivec">class ViewController: ASViewController {    let nodeA = ASDisplayNode()    override func viewDidLoad() {      super.viewDidLoad()      nodeA.frame = CGRect(x: 0, y: 0, width: 100, height: 100)      ... // 其他代码    }      ... // 其他代码    func animateNodeA() {      UIView.animate(withDuration: 0.5) {         let newFrame = ... // 新的frame        nodeA.frame = newFrame      }    }  }  </code></pre>    <p>不要觉得用了 AsyncDisplayKit 就告别了 frame 布局， ViewController 中主要元素个数很少，布局简单，因此，一般也还是采用 frame layout ，如果只是做一些简单的动画，直接采用 UIView 的动画 API 即可</p>    <p>2）flexbox式的布局</p>    <p>这种布局方式，是在某个子 node 中常用的，如果 node 内部布局发生了变化，又需要做动画时，就需要复写 AsyncDisplayKit 的动画 API ，并基于提供的动画上下文类 context ，做动画：</p>    <pre>  <code class="language-objectivec">class SomeNode: ASDisplayNode {    let nodeA = ASDisplayNode()      override func animateLayoutTransition(_ context: ASContextTransitioning) {      // 利用context可以获取animate前后布局信息        UIView.animate(withDuration: 0.5) {         // 不使用系统默认的fade动画，采用自定义动画        let newFrame = ... // 新的frame        nodeA.frame = newFrame      }    }  }  </code></pre>    <p>系统默认的动画是渐隐渐显，可以获取 animate 前后布局信息，比如某个子 node 两种布局中的 frame ，然后再自定义动画类型。如果想触发动画，主动调用 SomeNode 的触发方法 transitionLayout(withAnimation:shouldMeasureAsync:measurementCompletion:) 即可。</p>    <h2>内存泄漏</h2>    <p>为了方便将一个 UIView 或者 CALayer 转化为一个 ASDisplayNode ，系统提供了用 block 初始化 ASDisplayNode 的简便方法：</p>    <pre>  <code class="language-objectivec">public convenience init(viewBlock: @escaping AsyncDisplayKit.ASDisplayNodeViewBlock)  public convenience init(viewBlock: @escaping AsyncDisplayKit.ASDisplayNodeViewBlock, didLoad didLoadBlock: AsyncDisplayKit.ASDisplayNodeDidLoadBlock? = nil)  public convenience init(layerBlock: @escaping AsyncDisplayKit.ASDisplayNodeLayerBlock)  public convenience init(layerBlock: @escaping AsyncDisplayKit.ASDisplayNodeLayerBlock, didLoad didLoadBlock: AsyncDisplayKit.ASDisplayNodeDidLoadBlock? = nil)  </code></pre>    <p>需要注意的是所传入的 block 会被要创建的 node 持有。如果 block 中反过来持有了这个 node 的持有者，则会产生循环引用，导致内存泄漏：</p>    <pre>  <code class="language-objectivec">class SomeNode {    var nodeA: ASDisplayNode!    let color = UIColor.red    override init() {      super.init()      nodeA = ASDisplayNode {        let view = UIView()        view.backgroundColor = self.color // 内存泄漏        return view      }    }  }  </code></pre>    <h2>子线程崩溃</h2>    <p>AsyncDisplayKit 的性能优势来源于异步绘制，异步的意思是有时候 node 会在子线程创建，如果继承了一个 ASDisplayNode ，一不小心在初始化时调用了 UIKit 的相关方法，则会出现子线程崩溃。比如以下 node ，</p>    <pre>  <code class="language-objectivec">class SomeNode {    let iconImageNode: ASDisplayNode    let color = UIColor.red    override init() {      iconImageNode = ASImageNode()      iconImageNode.image = UIImage(named: "iconName") // 需注意SomeNode有时会在子线程初始化，而UIImage(named:)并不是线程安全        super.init()      }  }  </code></pre>    <p>但在 node 初始化时调用 UIImage(named:) 创建图片是不可避免的，用 methodSwizzle 将 UIImage(named:) 置换成安全的即可。</p>    <p>其实在子线程初始化 node 并不多见，一般都在主线程。</p>    <h2>总结</h2>    <p>一年的实践下来，闪烁是 AsyncDisplayKit 遇到的最大的问题，修复起来也颇为费神。其他bug，有时虽然很让人头疼，但由于 AsyncDisplayKit 是对UIKit的再封装，实在不行，仍然可以越过 AsyncDisplayKit 用 UIKit 的方法修复。</p>    <p>学习曲线也不算很陡峭。</p>    <p>考虑到 AsyncDisplayKit 的种种好处，非常推荐 AsyncDisplayKit ，当然还是仅限于用在比较复杂和动态的页面中。</p>    <p> </p>    <p>来自：http://qingmo.me/2017/07/21/asyndisplaykit/</p>    <p> </p>