滚动和翠鸟设置图像时的主线程阻塞

Question

我一直在运行缓慢的滚动性能，我注意到当我滚动并使用非缓存图像调用 setImage 时，下载发生时性能滞后。

if let imageURL = URL(string: presentable.imageUrl) {
    let resource = ImageResource(downloadURL: imageURL)
    photoView.kf.setImage(with: resource, options: [.transition(.fade(0.2))])
}

我的理解是，Kingfisher 在后台线程上下载这些，然后在主线程上显示它们，但主线程似乎暂时被阻塞了。删除.transition 对这种情况没有帮助。

关于如何提高我的滚动性能的任何想法？谢谢

Answer 1

当图像大于图像视图时，iOS 需要操作较大的 UIImage 对象，这可能会导致 UI 出现明显的卡顿。如果您适当地调整图像大小（在后台线程中），它可以解决这个问题。

幸运的是，Kingfisher 有一个处理器可以为您做到这一点。正如Cheat Sheet 所说：

将DownsamplingImageProcessor 用于高分辨率图像

考虑一下我们想在表格视图或集合视图中显示一些大图像的情况。在理想的世界中，我们希望为它们获得更小的缩略图，以减少下载时间和内存使用。但在现实世界中，也许您的服务器并没有为您准备这样的缩略图版本。新添加的DownsamplingImageProcessor 救援。它在加载到内存之前将高分辨率图像下采样到一定大小：

imageView.kf.setImage(
    with: resource,
    placeholder: placeholderImage,
    options: [
        .processor(DownsamplingImageProcessor(size: imageView.size)),
        .scaleFactor(UIScreen.main.scale),
        .cacheOriginalImage
    ])

通常，DownsamplingImageProcessor 与.scaleFactor 和.cacheOriginalImage 一起使用。它为您的 UI 提供了合理的图像像素比例，并通过缓存原始高分辨率图像来防止将来下载。

我用小图像创建了一个小测试并确认它是丝般光滑的，但是当我使用大图像时，我在滚动行为中遇到了卡顿。但是当我在大图场景中添加了这个DownsamplingImageProcessor时，它又变得如丝般顺滑了。

Answer 2

更新

self.imageView.contentMode = .scaleAspectFill

到

self.imageView.contentMode = .scaleAspectFit

为我做了诀窍。

我在UITableViewCell 中嵌入了UICollectionView。每个UICollectionViewCell 都有一个图像视图，它使用 Kingfisher 从 URL 加载图像。我的表格视图滚动很生涩，我尝试了不同的方法，包括不绑定模型和为每个单元格设置数据。但没有任何区别。一旦我更改了图像视图的内容模式，它现在滚动非常流畅。

根据 Rob 的回答，即使图像尺寸较小（在我的情况下甚至是 480 x 320），也可能需要将模式设置为 .scaleAspectFill 来进行一些处理。将模式更新为.scaleAspectFit 后，即使是大尺寸图片也能流畅滚动。