table viewが未完成の状態でも、完成部分については表示されるようにしたい。

Question

table viewが未完成の状態でも、完成部分については表示されるようにしたい。

table view のcellを生成するための処理が重く、全てを完成してから表示するスタイルだと
ユーザーをかなり待たせることになってしまうので、cellが生成し次第、cellを表示するように
したいと思いここ数日作業をしているのですが、うまくいきません。
アドバイスをご教示いただけたらと思います。

    override func viewDidLoad() {
        super.viewDidLoad()
        重い処理A() //この重い処理がすべて完了してから、セルが生成されます。
　　　　 tableView.reloadData()
    }


　　func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "tableViewCell", for: indexPath)
   　　　重い処理B()//セルの生成にはこの処理の影響で時間がかかります。
        return cell
    }
    

Comments

[hoshi-takanori]

重い処理とはどのような性質のものですか？ データを用意するのと、それを表示するのと、どちらが重いのでしょうか？ 一般論としてはバックグラウンドで処理するとか処理結果をキャッシュするとか一覧画面ではプレビュー的なものを表示して詳細画面で詳しく表示するなどが考えられますが…。

[funakenshi]

コメントありがとうございます。

重い処理Aは、これから表示するコンテンツを特定するためのkeyの一覧の作成処理で、重い処理Bは、重い処理Aによって取得されたkeyを用いて、データをスクレイピングする処理になります。なので、Aの完了がB開始の条件となっています。かかる時間は、Aが15秒、Bが一つのセルあたり5秒くらいだと思います。

Aについてはuserdefaultの活用によりキャッシュが可能ですが、Bに関してはちょっとアイデアが浮かびません。プレビューについても、このviewで情報を得られないとあまり意味がなくなってしまう状況です。

よろしくお願いします。

[hoshi-takanori]

なるほど、それは重そうですね。スクレイピングに関しては、データを取得する部分はバックグラウンドで並行して処理できる (というか、cellForRowAt で実際にデータ取得などの処理を行うのは良くない) と思いますが、タスクを管理するのが面倒でしょうね。頑張ってください。

[funakenshi]

大変貴重なご意見ありがとうございます。
早速、cellForRowAtでのデータ取得処理を他の部位に移動いたしましたところ、
動作が早くなったように感じます。
丁寧なご指摘、ご対応どうもありがとうございました。

Answer 1

「重い処理A」でデータを取ってきて、その結果に応じて「重い処理B」を行い、その結果に応じてセルを表示するのであれば、アプリの起動時に「重い処理A」と「重い処理B」を直列に処理し、「重い処理B」が完了し次第 tableView のリロードを行えば良さそうに思います。「重い処理B」は並列化することで、データが収集できたセルから表示させることは可能です。

ただし、厳密にコントロールするのであれば、配列への追加（append）は並列する他のスレッドと競合する可能性も否めないため、排他処理をするなどの必要はあるかと思いますし、データが取得できない時の処理などを考える必要もありそうです（hoshi-takanoriさんがおっしゃっているタスクの管理には、このことも含まれるのではないかと思います）。

また、テーブルセルが全て表示されるまではそれなりの時間がかかるため、UI的にはデータを待っている間は何らかの表示を行う必要もあると思います。

下記は到着したデータだけ逐次表示する例ですが、もちろんセルの数は固定にして表示することもできますし、さほど難しくないのではないでしょうか。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    @IBOutlet weak var tableView: UITableView!
    var dataArray: [String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // 重い処理Aのつもり。1秒後に処理を完了し重い処理Bを実行する
        // 実際も重い処理Aは非同期処理にする
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
            // 重い処理Bのつもり。ここでは10個の非同期処理を追加している
            // それぞれ1から5秒後に処理を実行する
            // 重い処理Bも非同期処理にする
            for i in 1...10 {
                DispatchQueue.main.asyncAfter(deadline: .now() + Double.random(in: 1...5)) {
                    // セルに表示するための配列に要素を追加。
                    // もちろん、表示したい内容に応じて適切に変更する。
                    self.dataArray.append("task (i) was finished")
                    // 追加のたびにセルをリロードする
                    self.tableView.reloadData()
                }
            }
        }
        
        tableView.dataSource = self
        tableView.delegate = self
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 行数は固定にせず、揃っているデータの数だけにする
        return dataArray.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "Cell") else {
            return UITableViewCell()
        }
        // ここでは表示に特化する
        cell.textLabel?.text = dataArray[indexPath.row]
        
        return cell
    }
}

Comments

[funakenshi]

懇切丁寧にご指導いただき、ありがとうございました。
「重い処理B」の並列化について、データの性質上時系列でセルに表示させる必要があったため、
検討いたしましたが、今回は実装を見送る形になりました。
しかし、データソースの作成場所を移動したことにより、処理が大幅にスピードアップし、
標題の一部表示の必要性自体がなくなりそうです。

大変勉強になりました。ありがとうございました。

[TsukubaDepot]

「時系列で表示」というのが具体的にどういう状態なにかわかりませんが、対策としてはいろいろ考えられるかと思います。
並列化したとしても、リロードごとにセルに表示させたい情報をソートするとか、最初からセルだけは作っておき、新しい情報が追加されたらそこだけリロードするなどです。
いずれにせよ、処理が大幅にスピードアップしたということであればよかったかと思います。

[funakenshi]

>>最初からセルだけは作っておき、新しい情報が追加されたらそこだけリロードする
このアイデアを使うことで、並列処理化に成功し、セルの生成速度が爆速になりました。
本当に助かりました。お礼申し上げます。