TableViewと画像のレンダリング？キャッシュ？について

Question

ツイッターのようなサンプルを組んでいます。

サーバから投稿一覧のJSONを取得してテーブルビューにはめるが、ついでに、そのJSONに記述されてる投稿画像のURLにもリクエスト送って画像取得、ImageViewに反映させるというものです。

正常に動作する見本コードで、画像を表示するUIImageViewのサブクラスのコードですが、理解ができない部分が一箇所あり、コメント入れています。画像を取得した後の処理についてです。

該当のソースコード

let imageCache = NSCache<AnyObject, AnyObject>()

class CustomImageView: UIImageView {

    var imageUrlString: String?
    
    func loadImageUsingUrlString(urlString: String){
        
        imageUrlString = urlString
        
        let url = URL(string: urlString)
        
        image = nil
        
        if let imageFromCache = imageCache.object(forKey: urlString as AnyObject)  as? UIImage {
            self.image = imageFromCache
            return
        }
        
        URLSession.shared.dataTask(with: url!) { (data, res, err) in
            if err != nil {
                return
            }
            DispatchQueue.main.async {
                let imageToCache = UIImage(data: data!)

                // この処理はなぜ必要？
                if self.imageUrlString == urlString {
                    self.image = imageToCache
                }

                imageCache.setObject(imageToCache!, forKey: urlString as AnyObject)
            }
        }.resume()
    }
}

Twitterのように、すごく長いコンテンツになった時に、TableViewの画面外の部分を消したり、再描画させたりとかそういう所で、正常に表示させるための処理なのだとは思うのですが、TableViewのことを理解しきれていないためか、腹落ちしていません。どういう時に再描画されるのかとかも。
なお、キャッシュがある場合はキャッシュを使う。キャッシュがない場合はキャッシュをセットするという所は理解できています。

解説をお願いしたいです。

Answer 1

TableViewのセル(とその中にあるビュー)はスクロールして画面外に出たら次の表示に使いまわされます。
画像のダウンロードは時間がかかる場合があるので、ダウンロード開始から完了の間にセルが使いまわされて別のURLが設定されている可能性があります。
そうすると、もし使いまわされる前のダウンロードが使いまわされた後のダウンロードよりも遅かった場合に前の画像で上書きしてしまうことになりますので、違う画像が出てしまいます。
ですから、ダウンロード完了時にはURLが変わっていないか(本当にこの画像を表示してよいか)確認が必要になります。

Comments

[eternalbeginne]

詳しい説明ありがとうございます。症状についてすごくイメージできました。

回答を読んで、別のことが気になったんですけど、
セルが自動的に「使い回される」ということは、
もしキャッシュのような仕組みを入れていなかったとしたら、
大きくスクロールを行ったり来たりして、セルの再利用がされるような行為を繰り返せば、
セルが画面内に入って来たタイミングで、たとえその画像が、一回でも描画したことがあったとしても、サーバへのリクエストが何度でも発生してしまうことに繋がるのでしょうか？

[toki_td]

こういった場合はキャッシュは必須ですが、使いまわされるかとかキャッシュがあるかどうか以前に、件数がものすごく多い場合に高速で下のほうまでスクロールしていけばリクエストは多発します。
あまりにもリクエストが頻発したりサーバーに負荷がかかるなら、スクロール中はリクエストしないとか、リクエストを行うまで数百ms程度待ってみてURLが変わらなかったらリクエストする、とかリクエストをキューに入れて同時にリクエストできる数を制限する、といった負荷軽減策が必要になるかもしれません。

[eternalbeginne]

ありがとうございます。とても参考になりました！
安定したサービスとして提供するには、色々と考えるべきことは多くありますね。