現在開発中のアプリがようやく完成間近の形になってきたので、機能以外の改善も行い始めました。
それがアプリの速度改善！
特にAndroidで動作させると遅いので、調べながらではありますが、手を付け始めています。
今回参考にしたサイトはこちら。
PhoneGapアプリのパフォーマンスを改善する10のポイント -Adobe MAX 2013
https://news.mynavi.jp/article/20130520-am2013pg/成功するPhoneGapアプリを開発するための高速化＆UXテクニック
http://blog.asial.co.jp/1142
どちらも2013年の記事なのでやや古めですが、参考になりそうな内容です。
で、まずは手っ取り早く試せそうなものを一つずつ試してみました。
1．ハードウェアアクセラレーションを意識してCSS Transitionsを利用する
具体的には、CSSに下記のスタイルを適応することです。
transform: translate3d(0, 0, 0);
このスタイルを追加することで、HTML DOMの描画にGPUが用いられるようになるとのこと。
そうすると、滑らかな描画を実現でき、さらにアプリの速度が大きく向上することもあるそうです。
ただし、あまり多くのHTML DOM要素の描画にGPUを用いると、GPU上の利用可能メモリーが埋まってしまう可能性があり、そうすると突然アプリがクラッシュする危険性もあるとのこと。
特に、深くネストされたDOM要素にこのスタイルを適応すると、上記のようにアプリがクラッシュすることがあるため、安易に追加するのは控えるべきですね。
2．Clickイベントは使用しない
スマートフォンのClickイベントは、画面がタッチされてから発生するまでに300msほどの遅延があるため、Clickイベントの仕様は、動作が遅くなる原因になります。
そのため、代わりにTouchStartを使用するか、FastclickなどのスマホでのClickイベントの応答速度を早くするライブラリを利用するのが良いとのこと。
ちなみに、開発中のアプリには、このFastclickを導入しています。
Fastclick の導入については、こちらを参考にしました。
スマホのクリック応答速度を劇的に速くしてくれる 『FastClick』 の使い方
http://phiary.me/fastclick-usage/
3．コンテンツのリフローを控える
リフローとは、要素の位置や大きさなどの再計算を行うことを指します。
リフローの計算は負担が大きいので、必要最小限に抑えるべきとのこと。
…これやってる…。
でも、この処理はどうしてもやらなければならないので、どうにかならないか確認しなければですね。
あとは、下記も効果的とのこと。
- DOM要素の数を減らす
- 深くネストされたHTML DOM構造を避ける
…これもやっちゃってるなぁ…。
これについては、コードを確認して、削れそうなところは削らねば。
4．テストする
最後のポイントとしては、実際のデバイス、実際のデータを使い、実際の環境でテストする、とのこと。
特に、少し古めのスペックが低めの端末でテストするのがよさそうですね。
私は、私用の端末はそこそこ良いものを買ってしまったので、案外サクサクと動いてしまい、あまり参考にならない…。
会社にあるテスト用端末をお借りしなければですね。
他にもまだ改善点はありますが、とりあえず私が試せたもの、確認したものは以上です。
とりあえず、リフローを改善しよう…！
私と同じくCordovaのアプリを開発している方は、是非参考にしてみてください。
