制作超快列表和精选集视图

制作超快列表和精选集视图

构建始终平滑滚动的列表和精选集视图：探索单元格生命周期，学习如何应用这种知识去除粗糙滚动和丢帧。我们还将向您展示如何通过优化图像加载和自动单元格预取改进整体滚动体验，避免代价高昂的故障。为了充分理解本视频内容，我们建议观众要基本熟悉 diffable 数据源和组合布局。

资源
相关视频

WWDC21
- UIKit 中的新功能
WWDC20
- 差量数据源的改进
- UICollectionView 新发现
Tech Talks
- 探索 UI 动画阻碍与渲染循环
WWDC16
- iOS 10 中 UICollectionView 的新功能
下载

♪ ♪ 大家好我是阿迪蒂亚克里什那德文我是UIKit团队的工程师列表或集合视图是许多app的核心为了提供绝佳的使用体验能够顺畅滚动屏幕是非常重要的这个视频将引导你设计出滚动起来迅速又顺畅的列表与集合视图让我们用这个app来示范这个app用集合视图来展示诱人旅游景点的图像列表看起来似乎挺简单一张景点的照片加上两个标文这个视频会教大家设置的方法以及要如何达成人们想要的高性能首先我们要来学习怎样稳扎稳打地使用 “局部更新数据源”和 “单元格注册”这两个应用程序接口我们会先重温集合视图单元格的运作周期接着说明为什么有时滚动的动作不顺畅以及预取的尖端设定将如何避免这种情况发生最后帕特里克会说明当单元格的内容为异步导入时要怎样正确更新单元格以及如何用新的UIImage 应用程序接口将各种装置的滚动都提升到完美的最佳性能好我们先来看看这个app的数据是如何组成的这个范例app检索了一列供显示的图每张图都由这个DestinationPost结构表示 DestinationPost符合identifiable 意思是它有着可以储存标识符的ID属性每个DestinationPost 都有专属的标识符即使其他属性改变此标识符不变局部更新数据源是用来储存模式中项目的标识符而不是模型对象本身因此这个范例app的局部更新数据源是通过ID属性来将数据输入的而不是通过DestinationPost 这是app使用的局部更新数据源我们刚刚说过它用DestinationPost.ID类型作为项目的标识符这里的区段类别是同一例的枚举因为这个app只有一个区段为了将数据源输入 app会先建立一个空白的快照然后修改主要的区段接着它会从后备储存撷取所有的图然后修改它们的标识符如此一来如果DestinationPost中的其他属性改变了在局部更新数据源里的表示法仍保持不变因为标识符并未改变最后的步骤是将快照应用到指定数据源在iOS 15之前应用没有动图的快照会被内部转译成reloadData 这对性能会有负面影响因为集合视图必须丢弃所有屏幕上的单元格再重新把它们全部建立起来 iOS 15发布之后应用没有动图的快照只会触及到差异处不会多做别的在iOS 15的环境下局部更新数据源还多了新的reconfigureItems方法让更新显示的单元格内容变得更容易我们之后会在视频中详细介绍它的功能首先我们把数据从数据源导入单元格显示于屏幕上单元格注册是非常好用的设定将同类别单元格的设定全部归于一处让我们可以便捷地从局部更新数据源存取标识符 UICollectionView会将每个用过的注册都保存在重复使用队列里您只需要为各类别的单元格建立一次的注册就够了我们来看一下简化的app单元格注册传递进来的postID 用来检索DestinationPost 以及含带图像的涵盖数据对象 DestinationPost的属性则用来设置单元格的标题和图像要使用注册须在数据源的单元格提供者里面调用dequeueConfiguredReusableCell 请注意注册要先在单元格提供者之外创建然后再用在提供者里面这点对性能表象很重要要是先在提供者里创建注册集合视图就无法重复使用这些单元格大家应该都明白单元格的设定了我们现在来讨论单元格要在何时设定还有单元格的运作周期是怎么回事单元格的运作周期有两个阶段准备阶段和显示阶段准备的第一个步骤是撷取将要设定的单元格 UICollectionView需要单元格的时候会从数据源里提取如果是可局部更新的数据源它就会执行单元格的提供者并回传结果一旦单元格的提供者开始执行集合视图就会利用注册将新的单元格出列如果单元格是在重复使用池里 UICollectionView则会调用prepareForReuse 将这个单元格出列如果重复使用池是空的它就会初始化一个新单元格这个单元格接着会从注册传递到设定的处理程序 app就是在这时将显示的单元格的项目标识符和索引路径建立好设定好的单元格会被返回集合视图准备进行下个步骤
集合视图查询单元格找出想要的配置属性并调整单元格的大小这时单元格的准备已完成可以进入下一个阶段：显示 willDisplayCell被调用到委托单元格即在UICollectionView中显示此时单元格出现在屏幕上单元格如果继续显示它的运作周期就不会变当单元格滚动出屏幕 didEndDisplaying被调用单元格就会立刻返回重复使用池单元格可以再从重复使用池中出列重复这整个过程我们来看看当这些基本步骤完成后 app使用起来是什么感觉这个app特写秘鲁的库斯科和加勒比海的圣卢西亚我们往下滚动app 查看其他的旅游景点但是你看滚动并不顺畅
这种滚动的停滞现象叫做“卡顿” 要了解造成卡顿的原因我们得先来看看app 是如何更新显示的每个图帧都一样当屏幕有碰触的事件发生就会传送给app app接着会更新视图和各层的属性譬如滚动视图的contentOffset 会在拖曳手势做出时改变变更所有视图在屏幕上的位置如此变更之后 app的视图和层就会做出配置这个过程称为“提交” 接着层的树状图会送往算图服务器每个图帧都有提交期限也就是同图帧中所有的提交都必须完成的时间点 app图帧提交所需的时间取决于显示的刷新速率譬如和60赫兹的iPhone相比有着120赫兹较高刷新速率的iPad Pro 它的app完成图帧提交需要的时间会比较短我们来看一下滚动集合视图或表格的单元格时很常看到的一个情况当新单元格显示时提交时间就会变长这时这个新单元格会被设定并开始配置再来有两个图帧它们就是已经显示在屏幕上正被滑动的单元格这两个图帧的提交时间很短因为这时并不需要新单元格滚动幅度一旦变得够大新单元格就会显示这个模式会反复进行那是什么造成刚才示范过的卡顿呢？当图帧的提交费时过久没能在期限前完成更新的部分就无法整合入图帧中显示状态将使得前个图帧继续留在屏幕上直到提交完成被延迟的图帧要到这时才能算图这就是提交卡顿滚动时因此有短暂的停滞感
若想要了解更多相关信息以及其他类型的卡顿请观看 “Expore UI aimation hitches”视频为了避免卡顿发生 UICollectionView和UITableView 在iOS 15里都有全新的单元格预取机制
我们现在回头看这个耗时过多导致滚动卡顿的单元格这里有个关键观念一般而言不是每个图帧都需要一个单元格有两个图帧的提交时间很短运作量相当少 iOS 15的单元格预取正是利用这多出来的时间在短暂的提交结束之后马上开始准备下一个新单元格
然后当终于需要单元格时直接显示它就行了这就是为什么预取的单元格显示时图帧提交得这么快因为该做的都预先做好了预取单元格所需的时间和造成卡顿的时间差是一样的但因为我们可以预先处理卡顿也就不会发生了为了弄清楚其间的过程让我们逐个检视这些提交进行预取前我们提交了这个图帧因为不需要单元格提交很快就结束了离期限还有一大段时间 iOS 15系统并不是坐等下个图帧而是辨识到这个情况并利用多余的时间开始进行下一个单元格的预取接下来的这个图帧情况就复杂些了因为被预取的单元格耗时过多它其实导致这个图帧的提交比预期时间要晚才开始进行不过即使提交过晚开始因为所需时间很短它仍然可以远在期限前就结束和我们之前看到的没有进行预取的图解比较就会发现这时不再有提交是超过期限的因此做好单元格预取后卡顿也就不会发生了这也是说你的app可以有多达两倍的时间准备单元格绝对不会导致卡顿不仅如此为享有这个绝佳的新功能你唯一需要做的事就是用iOS 15软件开发工具包来构建app 上回我示范的时候 app是用iOS 14的软件开发工具包构建的让我们来看看用iOS 15的软件开发工具包构建的app滚动起来会是什么样子
这真是太棒了！看来预取的设定完美达成了我们想要的目标滚动做起来顺畅无比而我们连改动一个程序代码都不需要记住你唯一需要做的就是用iOS 15的软件开发工具包来构建app UICollectionView的新预取机制扩充了 iOS 10引入的设置单元格预取如今支持清单也支持所有组合式配置这个全新的预取机制就是在UITableView里也能使用预取可以免除卡顿并改善滚动的性能也能降低电量使用增加电池寿命如果单元格可以很快准备好多出来的时间就能让系统用更节能的方式运作而依旧避免卡顿就算你没看到卡顿让你的单元格设定和配置运作保持最高效率依然是非常重要的现在让我们来看看预取如何影响单元格的运作周期这是我们之前看过的运作周期没有预取两个阶段界限分明单元格预取是在准备阶段进行的远在单元格需要出现在屏幕之前为了让预取发挥最大功能单元格一定要在这个阶段完全设定好不要等到单元格显示了才加紧工作当单元格返回集合视图大小会做调整取得所需的配置属性这也是预取的一项功能预取后会出现这个介于两阶段间的状态单元格即在这里等候进入显示面对这个新阶段 app面临两个状况若是使用者突然改变滚动的方向准备好的单元格有可能不会显示还有单元格显示之后可能滚动出屏幕立刻回到等待状态同一个单元格可以不止一次通过同样的索引路径来显示我们不再需要将结束显示的单元格立即放进重复使用池预取让滚动做起来顺畅原因无非是它可以省下更多时间在换帧速率较高的装置上 app仍然可能会在滚动时产生卡顿帕特里克接下来会进一步说明 app如何设定单元格他也会介绍一些做法来减少显示图像时每次提交所需的时间谢啦阿迪蒂亚大家好我是帕特里克来自High-Level Performance团队我将教导大家如何将同一个范例app里现有的单元格更新以及如何用iOS 15的一些最新应用程序接口以最高的性能显示图像范例app以装置磁盘中的图像构建滚动app时单元格会在进入屏幕前准备其中的图像会直接从文件系统中加载现在我们要做的是显示储存在远距服务器的图像当单元格滚动入屏幕时图像有可能不会显示在视图里当视图刚开始显示时里头是空的只有在服务器的存取请求完成后图像才会填入让我们试着扩展注册的设定处理程序来支持这个新的做法这里我们可以看到在这个注册的设定处理程序里涵盖资料已经从涵盖数据库撷取过来了涵盖数据库一定都会将图像返回但是图像的涵盖数据可能变得不完整而需要下载涵盖数据对象通过isPlaceholder属性将此指出这种情形发生的时候我们可以要涵盖数据库下载完整图像加载操作完成后我们就可以更新单元格的视图了这里我们用现有的单元格对象设定视图的涵盖数据这个做法是错的单元格会按照不同的旅游景点而被重复使用而当涵盖数据库加载最后的涵盖数据时我们获取的单元格对象可能已经被设定到不同的图了我们该做的不是直接更新单元格而是告知集合视图的数据源需要更新的部分是哪些 iOS 15引入 reconfigureItems快照方法在准备好的单元格里调用reconfigureItems 将会重新执行注册的设定处理程序要用reconfigureItems 而不是reloadItemsf 因为它重复使用这个项目的现有单元格而不是将新单元格出列并做设定在这个范例app里我们将宣告setPostNeedsUpdate方法然后调用reconfigureItems 在传递进来的ID上
现在回头看注册的设定处理程序当图像是占用符时我们下载完整的涵盖数据然后调用这个新方法 reconfigureItems就会再次调用这个处理程序不过现在呢 fetchByID 返回的会是完整涵盖数据而不是占用符这么做可以将所有的视图更新程序代码归在同一处一旦有了数据就可以异步更新单元格若想充分利用准备时间我们也可以将downloadAsset方法用在prefetchingDataSource里进行集合视图项目的网络下载从数据源预取开始就对了它能让你在单元格显示前有更多时间下载涵盖数据减少使用者看到占用符内容的时间
我们来看看这个app的运作还不错可是滚动时有明显的卡顿卡顿似乎与新图像进入屏幕时同时发生新单元格要是准备好了卡顿是不会发生的只有当全分辨率的图像被更新时卡顿才会发生这是因为将图像的显示解码需要时间而有些图像譬如那些较大、非占用符的涵盖数据会因为档案过大而无法实时解码当单元格注册的设定处理程序最初被调用而其涵盖数据是占用符时它的程序代码就会异步请求加载完整图像以完成设定之后当涵盖数据终于下载好了单元格设定处理程序就会用最新的图像重新执行当视图要提交新的图像时得先把即将显示的图像在主线程上准备好这可能花上很多时间要是app错失了提交期限卡顿就会产生准备图像是必要的过程所有的图像都需准备好才能显示
算图服务器只能显示位图图像也就是只有原始像素数据的图像图像的格式分很多种譬如PNG、HEIC和JPEG 它们都经过压缩必须在处理、拆解之后才能显示视图要提交新的图像时会先进行这个程序且是在主线程上进行按理来说我们可以预先准备好图像完成后才在界面上更新这么一来主线程永远不会受阻也不会产生卡顿 iOS 15引入准备图像的应用程序接口让你可以全面掌控图像准备在哪里进行、何时进行这些应用程序接口产生的新UIImage 只包含算图器所需的像素数据视图一旦设置好了就不需要再做其他的操作这种接口有两种形式一种是同步的可在任何线程上执行另一种是异步的在内部的UIKit的连续队列上执行
当使用这个应用程序接口时要用我们创建出来的UTImage 在视图里设一个占用符图像然后调用这个新应用程序接口在较大的图像的背后开始进行准备完成后我们可以直接设在视图上事先准备好的图像为所有以图像为主的app 解决了一个大难题但是还有需要注意的地方准备好的图像包含原初图像的原始像素数据只要仍然存于内存中图像可随时在视图中显示但这也表示它占用了很多的内存必须小心节制地存于缓存里最后由于形式的关系它们并不适合用磁盘储存应储存于磁盘的是原本的涵盖数据最后一点要注意的是图像准备可以运用预取预取让图像有多余的时间下载和准备这过程若是有充裕时间来操作使用者看到占用符的时间就短也可能根本不会看到在范例app里我们已经有异步的图像检索路径当下载完成之后我们就可以在调入完成处理程序前准备好涵盖资料这些涵盖数据很庞大但是也很有用所以一旦图像准备好了我们就可以将它们缓存图像缓存使用图像的大小来评估准备好的图像所占的内存量当单元格要求涵盖数据时我们要在从服务器那里撷取过来之前先去检查缓存如果图像比较小我们就可以多缓存些图像可能很大所以iOS 15引入一种功能相似的应用程序接口来准备图像的缩图缩图可以调整图像让需准备的图像变小它确保图像按照想要的大小被读取和处理因此省下许多中央处理器运作的时间和内存空间
使用的方式和Image Preparation接口一样首先用一个UIImage 在视图里设占用符图像然后以视图的大小来作为缩图的预设大小以调用新的调整大小的应用程序接口
当准备好之后直接用新的缩图来更新视图和Image Preparation接口一同使用 iOS 15的app 让视图的加快处理变得更加容易也更能有效避免卡顿在处理图像时使用的异步应用程序接口必须能在图像准备好时就更新界面同时使用的占用符图像必须够小才能达到同步显示若和预取及reconfigureItems一起使用显示集合视图以及列表的异步内容都变得异常简单性能也再好不过了
快速建好集合视图和表格的方法如下一用iOS 15的软件开发工具包来创建你的app 你会发现多种最新的性能优化很重要的是请务必利用我们最新的预取功能来有效化你的集合视图和表格的表现所有我们示范过的应用程序接口都可以在这个视频里的示例程序代码里找到赶快试一试也务必将准备图像和调整大小的应用程序接口运用在你的app里这会让你的集合视图和表格操作起来快如闪电谢谢大家观看这个视频 [欢快音乐]

// Structuring data

struct DestinationPost: Identifiable {
    // Each post has a unique identifier
    var id: String
    
    var title: String
    var numberOfLikes: Int
    var assetID: Asset.ID
}

2:01 - Setting up diffable data source

// Setting up diffable data source

class DestinationGridViewController: UIViewController {
    // Use DestinationPost.ID as the item identifier
    var dataSource: UICollectionViewDiffableDataSource<Section, DestinationPost.ID>
    
    private func setInitialData() {
        var snapshot = NSDiffableDataSourceSnapshot<Section, DestinationPost.ID>()
        
        // Only one section in this collection view, identified by Section.main
        snapshot.appendSections([.main])
        
        // Get identifiers of all destination posts in our model and add to initial snapshot
        let itemIdentifiers = postStore.allPosts.map { $0.id }
        snapshot.appendItems(itemIdentifiers)
        
        dataSource.apply(snapshot, animatingDifferences: false)
    }
}

3:47 - Creating cell registrations

// Cell registrations

let cellRegistration = UICollectionView.CellRegistration<DestinationPostCell,
                                                         DestinationPost.ID> {
    (cell, indexPath, postID) in

    let post = self.postsStore.fetchByID(postID)
    let asset = self.assetsStore.fetchByID(post.assetID)
    
    cell.titleView.text = post.region
    cell.imageView.image = asset.image
}

4:03 - Using cell registrations

// Cell registrations

let cellRegistration = UICollectionView.CellRegistration<DestinationPostCell,
                                                         DestinationPost.ID> {
    (cell, indexPath, postID) in
    ...
}
   
let dataSource = UICollectionViewDiffableDataSource<Section.ID,
                                                    DestinationPost.ID>(collectionView: cv){
    (collectionView, indexPath, postID) in
  
     return collectionView.dequeueConfiguredReusableCell(using: cellRegistration,
                                                           for: indexPath,
                                                          item: postID)
}

13:58 - Existing cell registration

// Existing cell registration

let cellRegistration = UICollectionView.CellRegistration<DestinationPostCell,
                                                         DestinationPost.ID> {
    (cell, indexPath, postID) in

    let post = self.postsStore.fetchByID(postID)
    let asset = self.assetsStore.fetchByID(post.assetID)
    
    cell.titleView.text = post.region
    cell.imageView.image = asset.image
}

14:17 - Updating cells asynchronously (wrong)

// Updating cells asynchronously 

let cellRegistration = UICollectionView.CellRegistration<DestinationPostCell,
                                                         DestinationPost.ID> {
    (cell, indexPath, postID) in

    let post = self.postsStore.fetchByID(postID)
    let asset = self.assetsStore.fetchByID(post.assetID)
    
    if asset.isPlaceholder {
        self.assetsStore.downloadAsset(post.assetID) { asset in
            cell.imageView.image = asset.image
        }
    }
    
    cell.titleView.text = post.region
    cell.imageView.image = asset.image
}

15:15 - Reconfiguring items

private func setPostNeedsUpdate(id: DestinationPost.ID) {
    var snapshot = dataSource.snapshot()
    snapshot.reconfigureItems([id])
    dataSource.apply(snapshot, animatingDifferences: true)
}

15:23 - Updating cells asynchronously (correct)

// Updating cells asynchronously

let cellRegistration = UICollectionView.CellRegistration<DestinationPostCell,
                                                         DestinationPost.ID> {
    (cell, indexPath, postID) in

    let post = self.postsStore.fetchByID(postID)
    let asset = self.assetsStore.fetchByID(post.assetID)
    
    if asset.isPlaceholder {
        self.assetsStore.downloadAsset(post.assetID) { _ in
            self.setPostNeedsUpdate(id: post.id)
        }
    }
    
    cell.titleView.text = post.region
    cell.imageView.image = asset.image
}

15:52 - Data source prefetching

// Data source prefetching

var prefetchingIndexPaths: [IndexPath: Cancellable]

func collectionView(_ collectionView: UICollectionView,
                    prefetchItemsAt indexPaths [IndexPath]) {
   // Begin download work
    for indexPath in indexPaths {
        guard let post = fetchPost(at: indexPath) else { continue }
        prefetchingIndexPaths[indexPath] = assetsStore.loadAssetByID(post.assetID)
    }
}

func collectionView(_ collectionView: UICollectionView,
                    cancelPrefetchingForItemsAt indexPaths: [IndexPath]) {
    // Stop fetching
    for indexPath in indexPaths {
        prefetchingIndexPaths[indexPath]?.cancel()
    }
}

18:43 - Using prepareForDisplay

// Using prepareForDisplay

// Initialize the full image
let fullImage = UIImage()

// Set a placeholder before preparation
imageView.image = placeholderImage

// Prepare the full image
fullImage.prepareForDisplay { preparedImage in
    DispatchQueue.main.async {
       self.imageView.image = preparedImage
    }
}

19:51 - Asset downloading without image preparation

// Asset downloading – before image preparation

func downloadAsset(_ id: Asset.ID,
                   completionHandler: @escaping (Asset) -> Void) -> Cancellable {
  
    return fetchAssetFromServer(assetID: id) { asset in
        DispatchQueue.main.async {
            completionHandler(asset)
        }
    }
}

19:58 - Asset downloading with image preparation

// Asset downloading – with image preparation

func downloadAsset(_ id: Asset.ID,
                   completionHandler: @escaping (Asset) -> Void) -> Cancellable {
    // Check for an already prepared image
    if let preparedAsset = imageCache.fetchByID(id) {
        completionHandler(preparedAsset)
        return AnyCancellable {}
    }
    return fetchAssetFromServer(assetID: id) { asset in
        asset.image.prepareForDisplay { preparedImage in
            // Store the image in the cache.
            self.imageCache.add(asset: asset.withImage(preparedImage!))
            DispatchQueue.main.async {
                completionHandler(asset)
            }
        }
    }
}

20:50 - Using prepareThumbnail

// Using prepareThumbnail

// Initialize the full image
let profileImage = UIImage(...)

// Set a placeholder before preparation
posterAvatarView.image = placeholderImage

// Prepare the image
profileImage.prepareThumbnail(of: posterAvatarView.bounds.size) { thumbnailImage in
    DispatchQueue.main.async {
        self.posterAvatarView.image = thumbnailImage
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

WWDC21

WWDC20

Tech Talks

WWDC16