UICollectionView Cell中WebView滚动后重复加载的解决方案咨询

这种Cell复用导致WebView反复加载的情况我碰过好多次，尤其是带复杂渲染的本地内容，确实挺影响用户体验的。给你几个实用的解决方案，你可以根据自己的业务场景选择：

1. 缓存已加载完成的Web内容/状态 #

因为是本地数据，你可以给每个数据模型加一个唯一标识（比如uniqueId），然后维护一个全局缓存字典，专门存储已经加载渲染完成的内容：

var webContentCache: [String: String] = [:] // key是数据uniqueId，value是加载完成后的最终HTML内容

在WebView的webView(_:didFinish:)回调里，把渲染完成的HTML内容存入缓存。之后在Cell的配置方法里，先检查缓存：

func configure(with model: YourModel) {
    if let cachedContent = webContentCache[model.uniqueId] {
        // 直接加载缓存好的内容，跳过复杂渲染
        webView.loadHTMLString(cachedContent, baseURL: Bundle.main.bundleURL)
    } else {
        // 加载原始本地数据
        webView.loadHTMLString(model.rawHTML, baseURL: Bundle.main.bundleURL)
    }
}

这样只要加载过一次，后续复用Cell时直接用缓存内容，完全避免重复渲染耗时的问题。

2. 让WebView跟随Cell复用，而非每次重建 #

很多开发者会在prepareForReuse里直接清空或销毁WebView，这其实是没必要的。你可以让WebView作为Cell的固定子视图，只在内容变化时重新加载：

class WebCollectionViewCell: UICollectionViewCell {
    let webView = WKWebView()
    private var currentModelId: String?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        // 一次性初始化WebView并添加到Cell
        webView.frame = contentView.bounds
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        contentView.addSubview(webView)
    }
    
    func configure(with model: YourModel) {
        // 如果当前Cell已经加载过该数据，直接跳过
        guard currentModelId != model.uniqueId else { return }
        currentModelId = model.uniqueId
        // 加载新数据
        webView.loadHTMLString(model.rawHTML, baseURL: Bundle.main.bundleURL)
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // 不要在这里清空WebView，仅按需停止未完成的加载
        webView.stopLoading()
    }
}

这种方式让WebView本身被复用，只有当数据变化时才重新加载，避免了WebView的销毁重建开销。

3. 用快照优化视觉体验（适合非交互场景） #

如果你的WebView内容不需要用户交互（比如只是展示图表和文本），可以在WebView加载完成后生成快照，当Cell滚出屏幕时用快照代替WebView显示，滚回来时先展示快照，后台再确认内容状态：

// 在WebView加载完成回调里生成快照
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.takeSnapshot(with: nil) { [weak self] image, error in
        guard let self = self, let image = image else { return }
        self.snapshotImageView.image = image
        // 隐藏WebView，显示快照
        self.webView.isHidden = true
        self.snapshotImageView.isHidden = false
    }
}

// Cell配置逻辑
func configure(with model: YourModel) {
    if currentModelId != model.uniqueId {
        currentModelId = model.uniqueId
        // 开始加载时显示WebView，隐藏快照
        snapshotImageView.isHidden = true
        webView.isHidden = false
        webView.loadHTMLString(model.rawHTML, baseURL: Bundle.main.bundleURL)
    } else {
        // 直接显示快照，用户看不到加载过程
        webView.isHidden = true
        snapshotImageView.isHidden = false
    }
}

这种方式能让用户滚动回来时立刻看到已渲染好的内容，完全感知不到加载延迟。

4. 利用WKWebView的本地缓存机制 #

WKWebView本身支持本地资源缓存，你可以配置持久化缓存存储，让JS、CSS、图表相关资源被缓存，即使WebView复用，第二次加载也会直接从缓存读取：

// 初始化WebView时配置缓存
let config = WKWebViewConfiguration()
let dataStore = WKWebsiteDataStore.default()
// 允许本地文件访问（加载本地数据必须开启）
config.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")

let webView = WKWebView(frame: .zero, configuration: config)

这种方式不需要额外维护缓存字典，利用系统自带的缓存机制就能大幅加快重复加载速度。

内容的提问来源于stack exchange，提问作者Nilesh Tupe