【Swift】ニュースアプリの快適なタブめくりを実現するためには？

Question

こんばんわ
Swift+Firebase+XLPagerTabStripを利用して、ニュースアプリを作成しています。

基本部分は完成したのですが、画面表示が遅い問題があります。
立ち上げの際もそうですし、タブめくりした際の表示はより遅い状況です・・・・

有名なグノシー他、ニュースアプリですと
タブ切り替えの際はなんのストレスもなく、即時表示されていますが、
どのような仕組みかご存知でないでしょうか？
曖昧な依頼で恐縮ですが、快適に表示されるコツや参考サイト、参考コードをご存知でしたら
お力添えいただけると幸いです。

■基本情報
・画面イメージ
・構造

• タブ毎にストーリーボード、swiftがあります。
• 表示、切り替え時に、表示された画面のviewdidloadでfirebaseのタブに該当する箇所より情報を取得後、tableviewをリロードして表示

■検討していること
１タブ目表示時に、3タブ目までの情報をfirebaseより取得しておくことで解決できるのかなと思いましたが、
表示されないかもしれないタブの情報を取得するのは無駄なのかなとも思っています。
世間一般的にはどうなのかご存知でないでしょうか。

■読み込み速度が遅い理由
「 let imageData = try? NSData(contentsOf: url! as URL,options: NSData.ReadingOptions.mappedIfSafe)」の処理に約１秒かかってしまいます。。。

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ContentsTableViewXib") as! ContentsTableViewXib
        cell.selectionStyle = UITableViewCellSelectionStyle.none

        let dict = items[(indexPath as NSIndexPath).row] //jsonデータを代入
 
        let contentsTableImage = cell.viewWithTag(3) as! UIImageView
        imageURL = dict["Image"] as? String //0.000(s)　//dictから画像URLを取得
        let url = NSURL(string: "(imageURL!)") //0.000(s)　
        let imageData = try? NSData(contentsOf: url! as URL,options: NSData.ReadingOptions.mappedIfSafe) // 1.179(s)
        let img = UIImage(data:imageData! as Data) //0.030(s)
        contentsTableImage.image = img //0.000(s)
        
        return cell
        }

Answer 1

先読みでよいと思います
大手は先読みしていないところもありますが、あれは色々工夫して速度を上げてるのでアレで良いんだと思います
（問題はpageViewControllerの先読み方法です）

今後のポイントとしてはa
・viewの表示が遅いのか、APIが遅いのかを調べる
・PageViewControllerのデフォルトの先読みはviewDidLoadまでしか呼ばれない

あたりだと思います
私が自分で実装するなら横UICollectionView使っちゃいます。iOS10から先読みが強化されたので（ただ全部合わせて１画面になるので設計に注意が必要ですが）

Comments

[HNSZ]

kosanai様
ご丁寧にありがとうございます！
遅い理由の特定ができておらず、実施してみた結果として、
APIは問題ないのですが、
jsonから取得した画像urlデータをtableviewcellに表示するタイミングで、
１枚毎に約１秒かかってしまっていました。

ソースを本文に追加しておりますので、ご覧いただけないでしょうか。
この時間を短縮するには、画像ローダーの導入で解決されるものでしょうか？
あるいは、ソースコード自体に改善の余地がございますでしょうか？

もしご存知でしたらご教示いただけると嬉しいです。
宜しくお願いします。

＞横UICollectionView使っちゃいます
こちらの検討ができていなかったため、速度比較してみたいと思います。
情報ありがとうございます！

[kosanai]

一旦ソース見ずに予想で書きますが、おそらく画像のロードをメインスレッドでやってるのではないでしょうか
もしそうならば、画像ダウンロード＆反映を非同期処理でやるべきですが
理解するのに少し時間がかかるので一旦便利なライブラリを使って動くか確認するのも手です
https://qiita.com/H_Crane/items/422811dfc18ae919f8a4

[HNSZ]

kosanai様
ライブラリの共有ありがとうございます！
Kingfisherにて満足行く表示速度になりました。
ありがとうございます。

仕組みは追って理解いたします＞＜

Answer 2

何を優先させたいのかによって、対応方法や方針が変わると思います。
今回のあれば、画面の表示速度を優先したいということであれば、それを基準に実装すれば良いと思います。

何の処理に時間がかかり遅いのかは計測すれば、判断出来ると思いますが実施済みでしょうか。
すぐに思いつくのは、以下の要素です。
・画面描画
・データ取得(通信部分、データベースからの読み取り)
・メディアデータなどの容量が大きいものがある

それぞれ、早くする方法としては
・画面描画する量を減らす(不要な部分は描画しない)、そもそものデザインを見直す
・事前にキャッシュしておく。(アプリが起動される前に、事前にサービスなどで読み取っておく)
・読み取り頻度が高いものは、データベースから毎回読むのではなくメモリに一時保存しておく
・メディアデータもキャッシュや小さいデータ(サムネイル画像)などが活用出来ないかを検討する

上記の内容は、特別なアプリではなくとも検討される内容だと思います。
有名どころのアプリは、さらに計測やチューニングをしていると思いますが、それらはまずは計測がしっかり出来ないと検討すら出来ないと思います。

参考になれば幸いです。

Comments

[HNSZ]

Miyake様
ご丁寧にありがとうございます！
計測ができておらず、、実施いたしました。

結果として、jsonから取得した画像urlデータをtableviewcellに表示するタイミングで、
１枚毎に約１秒かかってしまっていました。。

ソースを本文に追加しておりますので、ご覧いただけないでしょうか。
この時間を短縮するには、画像ローダーの導入で解決されるものでしょうか？
あるいは、ソースコード自体に改善の余地がございますでしょうか？

もしご存知でしたらご教示いただけると嬉しいです。
宜しくお願いします。

[YasuhiroMiyake]

画像ローダーが何を指しているのかが分かりませんので、それで解決するかどうか不明です。
何を解決したいのかによって、変わります。
表示速度がというのであれば、表示速度はほぼ一瞬で表示されているということで解決済みだと思います。
画像の取得速度を解決したいということであれば、いろいろな考え方が出来ます。
・取得する画像サイズを小さいものに変える(相対的に取得時間が短くなる)
・並列でダウンロードする。(平均1秒であれば、それが同時に10枚ダウンロードしてもほぼ1秒です)
・ダウンロードするタイミングを変える。(先読みも一つの方法だと思います)

ソースコードでこうすれば良い　というのを公開するのは簡単ではあるのですが、
このサイトの趣旨に反するので説明だけにさせて頂きます。

[HNSZ]

Miyake様
ご回答ありがとうございます！
ひとまず、ライブラリKingfisherにて対処いたしました。

頂いたアドバイス中心に細部はこれから実施して改善します。
画像サイズはすぐにでもできそうです。
ありがとうございました。