采用Compositional Layout的UICollectionView插入item时滚动卡顿跳动如何解决

问题根因分析 #

• 预估高度设置不合理：当前使用最大预估高度433，和部分Cell实际最小高度137差值过大，Compositional Layout会依赖预估高度计算全局contentSize，滚动或插入数据时系统需要反复修正高度计算，导致布局重绘卡顿、contentOffset异常跳动。
• 分页插入逻辑缺失防抖动与偏移校正：无重复请求防护容易触发多次插入，插入时未校正滚动偏移会导致列表位置异常跳动。
• 宽度计算方式有隐患：使用初始化时的collectionView宽度写死绝对宽度，若布局创建时collectionView frame未完成布局，会导致Cell尺寸计算错误，加剧高度计算偏差。

修复方案 #

1. 优化布局配置 #

将固定绝对宽度改为比例宽度，调整预估高度为接近大部分Cell的平均高度，同时建议增加高度缓存机制进一步提升性能：

// 优化后的布局代码
let groupSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0), 
    heightDimension: .estimated(200) // 调整为接近你业务中Cell的平均高度即可
)
let itemSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0), 
    heightDimension: .estimated(200)
)
let groupItem = NSCollectionLayoutItem(layoutSize: itemSize)
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [groupItem])
let section = NSCollectionLayoutSection(group: group)
section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 23, bottom: 0, trailing: 23)

如果业务允许，可增加高度缓存：在cellForItem返回Cell后，将Cell实际高度缓存到对应数据模型中，下次构建布局时直接使用缓存高度作为预估高度，完全避免高度计算偏差。

2. 优化分页触发逻辑 #

增加请求状态锁，避免重复触发分页请求：

// 新增请求状态变量
var isRequesting: Bool = false

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    // 新增请求状态判断
    if indexPath.row == feedItems.count - 1 && !isLastPage && !isRequesting {
        isRequesting = true
        getCommunityFeed()
    }
}

// 接口请求完成回调中重置请求状态
func getCommunityFeedCompletion(success: Bool, newItems: [FeedItem]) {
    defer { isRequesting = false }
    guard success else { return }
    // 后续插入数据逻辑
}

3. 修复插入数据时的跳动问题 #

使用批量更新插入Cell，同时校正滚动偏移：

let oldCount = feedItems.count
feedItems.append(contentsOf: newItems)
// 你这里Feed流是第4个分区，索引为3
let insertIndexPaths = (oldCount..<feedItems.count).map { IndexPath(row: $0, section: 3) }

let beforeContentHeight = collectionView.contentSize.height
let beforeOffsetY = collectionView.contentOffset.y

collectionView.performBatchUpdates {
    collectionView.insertItems(at: insertIndexPaths)
} completion: { [weak self] _ in
    guard let self = self else { return }
    let afterContentHeight = self.collectionView.contentSize.height
    let addedHeight = afterContentHeight - beforeContentHeight
    // 若插入前已经滚动到底部，保持底部位置，否则维持原有滚动位置不跳动
    if beforeOffsetY + self.collectionView.bounds.height >= beforeContentHeight - 20 {
        self.collectionView.setContentOffset(CGPoint(x: 0, y: beforeOffsetY + addedHeight), animated: false)
    }
}

4. 通用滚动卡顿优化 #

• 开启集合视图预加载：collectionView.isPrefetchingEnabled = true，系统会提前预加载即将展示的Cell，降低滚动时的计算压力。
• Cell内所有耗时操作（如图片加载、文本排版）全部异步处理，避免占用主线程资源，图片加载推荐使用成熟的三方库（如Kingfisher、SDWebImage）处理异步解码与缓存。
• 避免在cellForItemAt、willDisplay等高频调用方法中做复杂计算，所有可提前计算的属性（如文本高度、控件尺寸）提前计算并缓存到数据模型中。

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