【Cordova】ion-listのパフォーマンス改善について

Question

###前提・実現したいこと

• 開発環境：Cordova(7.1.0) + Ionic(3.19.0)
• 対象：iPadアプリ
• 画面情報をREST APIで取得し、画像及びテキストのリストをスクロール形式で表示させたい
• 表示する画像はiPad内にある（事前にオンラインストレージからダウンロードしている）
• リスト表示の処理を1秒以内で行いたい
• リストの画面描画は、<ion-list>タグを使用している

###発生している問題

• 画像とテキストを含むリストをスクロール形式で150件表示する際に、処理に時間がかかる
  • 処理の内訳：REST APIに1～2秒、画面描画に5～6秒

###試したこと

• cordova-plugin-sdwebimageを使用しようとしたが、Cordova3.*までしか対応していなかったため、使用できなかった。

パフォーマンスが悪く困っています。
おそらく、リスト表示に150件のコンテンツを読み込んでいるために処理に時間がかかっていると思うので、
iOSでいうSDWebImageのようなライブラリを使って、パフォーマンス改善を行いたいと考えています。
ご教授の程、よろしくお願いいたします。

Answer 1

150件表示とありますが、もっと少ない件数（30件とか）ずつ取得するような方式に変更するのはいかがでしょうか？
REST API、画面描画ともに時間がかかっているようなので、まずはファーストビューの描画を早くすることに注力するのが良いかと思いました。

また、画面描画ですがInfiniteScrollを利用すればスクロールの終端で次の件数を取得する処理を走らせることができます。
参考：
https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

また、画面描画はVirtualScrollを使用すれば描画速度を上げることができます。こちらは、リストの描画する数を調節してくれるので、リストの数が増えても描画処理が重くなることはありません。
ただし、リストで表示するアイテムの高さ(Height)が均一じゃないとつかえないので注意が必要です。

参考：
https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/

Comments

[gucchi28]

xiacaさん、ご回答ありがとうございました。

VirtualScrollに変更しただけで、描画速度が格段に速くなりました！
ありがとうございました。

REST API側は別途チューニングが必要なようなので、
今後も継続して検討していきたいと思います。

ベストアンサーとさせていただきます。