如何从视频URL生成缩略图并加载到TableView？代码致界面卡顿

看起来你遇到了TableView滚动时因为同步生成视频缩略图导致的卡顿问题——这很常见，因为你当前的代码是在主线程里同步处理视频资源的，而AVAsset解析视频、生成缩略图是耗时操作，会直接阻塞UI刷新，让滚动变得不流畅。

下面是一套完整的优化方案，从异步处理、缓存到复用保护，一步步解决问题：

核心优化方向 #

• 把缩略图生成移到后台线程，绝不阻塞主线程
• 加入缓存机制，避免重复处理同一个视频URL
• 优化生成配置，减少内存和性能消耗

1. 重构异步缩略图生成方法 #

放弃同步的copyCGImageAtTime，改用AVAssetImageGenerator的异步API，它会在后台完成处理，然后回调到主线程更新UI：

func generateThumbnail(from url: URL, completion: @escaping (UIImage?) -> Void) {
    let asset = AVAsset(url: url)
    let generator = AVAssetImageGenerator(asset: asset)
    generator.appliesPreferredTrackTransform = true
    // 关键：设置缩略图最大尺寸，避免生成远超单元格需求的大图，浪费内存
    generator.maximumSize = CGSize(width: 120, height: 120) // 根据你的单元格大小调整
    
    let targetTime = CMTimeMake(value: 1, timescale: 30) // 取视频第1/30秒的帧
    generator.generateCGImagesAsynchronously(forTimes: [NSValue(time: targetTime)]) { _, image, _, result, error in
        guard error == nil, let cgImage = image else {
            DispatchQueue.main.async {
                completion(nil)
            }
            return
        }
        let thumbnail = UIImage(cgImage: cgImage)
        DispatchQueue.main.async {
            completion(thumbnail)
        }
    }
}

2. 在TableView中安全异步加载 #

在cellForRowAt里，要处理单元格复用的问题——不然滚动时会出现旧的缩略图错误显示在新单元格上。同时先设置占位图，提升用户体验：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "VideoCell", for: indexPath) as! VideoCell
    let videoURL = yourVideoURLArray[indexPath.row]
    
    // 先设置占位图，避免空白
    cell.thumbnailImageView.image = UIImage(named: "video_placeholder")
    // 给单元格绑定当前URL，用于后续校验
    cell.videoURL = videoURL
    
    // 异步加载缩略图
    generateThumbnail(from: videoURL) { [weak cell] image in
        // 校验：如果单元格已经被复用给其他URL，就跳过更新
        guard let cell = cell, cell.videoURL == videoURL else {
            return
        }
        cell.thumbnailImageView.image = image ?? UIImage(named: "video_placeholder")
    }
    
    return cell
}

3. 添加缓存，避免重复生成 #

用NSCache来缓存已经生成的缩略图，这样同一个URL不用重复处理，大幅提升滚动流畅度：

// 定义全局缓存（可以放在类内部或者全局作用域）
private let thumbnailCache = NSCache<NSURL, UIImage>()

func generateThumbnail(from url: URL, completion: @escaping (UIImage?) -> Void) {
    // 先检查缓存，有就直接返回
    if let cachedImage = thumbnailCache.object(forKey: url as NSURL) {
        DispatchQueue.main.async {
            completion(cachedImage)
        }
        return
    }
    
    // 下面是之前的异步生成逻辑...
    let asset = AVAsset(url: url)
    let generator = AVAssetImageGenerator(asset: asset)
    generator.appliesPreferredTrackTransform = true
    generator.maximumSize = CGSize(width: 120, height: 120)
    
    let targetTime = CMTimeMake(value: 1, timescale: 30)
    generator.generateCGImagesAsynchronously(forTimes: [NSValue(time: targetTime)]) { _, image, _, result, error in
        guard error == nil, let cgImage = image else {
            DispatchQueue.main.async {
                completion(nil)
            }
            return
        }
        let thumbnail = UIImage(cgImage: cgImage)
        // 存入缓存
        thumbnailCache.setObject(thumbnail, forKey: url as NSURL)
        DispatchQueue.main.async {
            completion(thumbnail)
        }
    }
}

额外优化小贴士 #

• 取消无用请求：如果单元格快速被复用，可以取消之前未完成的缩略图生成请求，避免浪费资源。你可以给每个单元格关联一个AVAssetImageGenerator实例，在复用的时候调用cancelAllCGImageGeneration()。
• 控制并发数：用OperationQueue来管理缩略图生成任务，限制最大并发数（比如3-5个），避免同时处理太多视频导致CPU过载。

内容的提问来源于stack exchange，提问作者Pramod Shukla