滚动时 UITableView 滞后

Question

在我们的应用中，我们从服务器动态填充表格视图。

滚动时表格滞后。

所以我创建了一个调度队列：

    var queue = DispatchQueue(label: "myqueue")

然后在tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 方法中我做了：

    queue.async {
            DispatchQueue.main.async {
                cell.placeIconView.layer.cornerRadius = cell.placeIconView.frame.width / 2
                cell.placeIconView.clipsToBounds = true
            }
            
            let poiImgs = HttpResponseHolder.shared.POIS[indexPath.row].imagesUrls
            
            if poiImgs!.count > 0 {
                let url = URL(string: poiImgs![0])
                
                let data = try? Data(contentsOf: url!)
                DispatchQueue.main.async {
                    cell.placeIconView.image = UIImage(data: data!)
                }
            }
            
            if poiImgs?.count == 0 && HttpResponseHolder.shared.POIS[indexPath.row].detailsOnWeb == false {
                
                DispatchQueue.main.async {
                    cell.placeIconView.image = UIImage(named: "img_poi_placeholder")
                }
            }
            
            if poiImgs?.count == 0 && HttpResponseHolder.shared.POIS[indexPath.row].detailsOnWeb == true {
                
                DispatchQueue.main.async {
                    cell.placeIconView.image = UIImage(named: "url_img_placeholder")
                }
            }
            
            DispatchQueue.main.async {
                cell.dotImgView.isHidden = true
            }
            
            if self.showCrowdingState == true {
                let crowdIndex = HttpResponseHolder.shared.POIS[indexPath.row].crowdingLevel
                
                DispatchQueue.main.async {
                    cell.dotImgView.isHidden = false
                }
                
                switch crowdIndex {
                case 1:
                    // green
                    DispatchQueue.main.async {
                        cell.dotImgView.image = UIImage(named: "greenDot")
                    }
                case 2:
                    // yellow
                    DispatchQueue.main.async {
                        cell.dotImgView.image = UIImage(named: "yellowDot")
                    }
                case 3:
                    // green
                    DispatchQueue.main.async {
                        cell.dotImgView.image = UIImage(named: "redDot")
                    }
                default:
                    break
                }
            } else {
                DispatchQueue.main.async {
                    cell.dotImgView.image = nil
                }
            }
        }

如您所见，我将单元配置放在后台线程中（并在主线程中推回 UI 更新）。

这解决了延迟问题，但是当我滚动表格视图时，加载其内容会延迟。

我是不是搞错了什么？

Answer 1

您可以缓冲 ui 更新任务，最后您可以使用单个 dispatch 语句在主队列上运行。

queue.async {
    typealias Task = () -> Void
    var operations:[Task] = []

    operations.append {
        cell.placeIconView.layer.cornerRadius = cell.placeIconView.frame.width / 2
        cell.placeIconView.clipsToBounds = true
    }
    operations.append {
        cell.placeIconView.image = UIImage(data: data!)
    }
    operations.append {
        ...
    }
    
    DispatchQueue.main.async {
        operations.forEach({ $0() })
        operations.removeAll()
    }
}