滚动时主线程阻塞，Kingfisher设置图像

Question

我一直在降低滚动性能，我注意到当滚动并且var Q = require('q') function Add() { var a, b, c a = 5 b = 6 c = a + b console.log("Inside Add()") } var display_promise = Q.denodeify(Add) display_promise().then(function() { console.log("Addition function completed") }, function() {s console.log("Error") }) 被非缓存图像调用时，性能会在下载发生时滞后。

setImage

我的理解是，翠鸟将它们下载到后台线程中，然后在主线程中显示它们，但是主线程似乎被暂时阻止了。删除if let imageURL = URL(string: presentable.imageUrl) { let resource = ImageResource(downloadURL: imageURL) photoView.kf.setImage(with: resource, options: [.transition(.fade(0.2))]) } 并不能解决问题。

关于如何改善滚动效果的任何想法？谢谢

Answer 1

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

幸运的是，翠鸟拥有可为您完成此任务的处理器。正如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

是我的把戏。

我在UICollectionView内嵌入了UITableViewCell。每个UICollectionViewCell都有一个图像视图，可使用Kingfisher从URL加载图像。我的表格视图滚动非常混乱，我尝试了其他方法，包括不将模型绑定和将数据设置到每个单元格。但是没有任何改变。更改图像视图的内容模式后，它现在可以非常平滑地滚动。

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