求助：将HTML内容加载到CollectionViewCell的Label中时ScrollView滑动卡顿

问题根源 #

你在cellForItemAt:里实时解析HTML文本，遇到带<br>、<p>等标签的内容时，解析和文本布局计算会占用主线程资源，加上CollectionView滚动时频繁复用cell，就会导致滑动不流畅甚至停滞。

具体解决方案 #

1. 提前异步解析HTML并缓存结果 #

不要在cell配置时实时解析HTML，而是在获取到数据源后，在后台线程批量完成解析，再刷新UI：

// 假设你的数据模型新增了cachedAttributedExcerpt属性存储解析后的富文本
DispatchQueue.global(qos: .userInitiated).async {
    for (index, news) in self.newsData.enumerated() {
        guard let htmlData = news.excerpt.rendered.data(using: .utf8) else { continue }
        let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [
            .documentType: NSAttributedString.DocumentType.html,
            .characterEncoding: String.Encoding.utf8.rawValue
        ]
        do {
            let attributedText = try NSAttributedString(data: htmlData, options: options, documentAttributes: nil)
            DispatchQueue.main.async {
                self.newsData[index].cachedAttributedExcerpt = attributedText
                self.collectionView.reloadItems(at: [IndexPath(row: index, section: 0)])
            }
        } catch {
            print("HTML解析失败: \(error)")
        }
    }
}

2. 用NSAttributedString替代纯文本赋值 #

直接给label的attributedText赋值，系统会自动处理<br>、<p>带来的换行，且布局计算效率更高：

// 在cellForItemAt:中直接使用缓存好的富文本
if let attributedText = newsData[indexPath.row].cachedAttributedExcerpt {
    cell.titleLabel.attributedText = attributedText
} else {
    // 解析未完成时显示占位文本
    cell.titleLabel.text = "加载中..."
}

3. 预计算并缓存Cell高度 #

滚动时实时计算cell高度是卡顿的重要原因，提前计算高度并缓存：

// 在数据模型中新增cachedHeight属性
// 解析完富文本后计算高度
let labelWidth = UIScreen.main.bounds.width - 32 // 与cell内label的实际宽度一致
let maxSize = CGSize(width: labelWidth, height: CGFloat.greatestFiniteMagnitude)
let height = news.cachedAttributedExcerpt?.boundingRect(with: maxSize, options: .usesLineFragmentOrigin, context: nil).height ?? 0
news.cachedHeight = height + 20 // 加上cell内其他元素的高度和间距

// 在UICollectionViewDelegateFlowLayout中返回缓存高度
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let height = newsData[indexPath.row].cachedHeight ?? 100 // 默认高度
    return CGSize(width: collectionView.bounds.width, height: height)
}

4. 优化Label布局设置 #

给cell内的label设置固定的preferredMaxLayoutWidth，避免布局计算混乱：

// 在CollectionViewCell的awakeFromNib或初始化方法中设置
override func awakeFromNib() {
    super.awakeFromNib()
    titleLabel.preferredMaxLayoutWidth = UIScreen.main.bounds.width - 32 // 与计算高度时的宽度一致
    titleLabel.numberOfLines = 0
}

验证效果 #

完成上述优化后，HTML解析和高度计算都在后台线程完成，主线程只负责UI赋值，CollectionView滚动时就不会出现卡顿停滞的情况了。

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