ハイブリッドアプリのパフォーマンスを向上する
ハイブリッドアプリ開発の勉強会に参加しました。
http://www.zusaar.com/event/2967003
その中で、ハイブリッドアプリのパフォーマンスを向上させるテクニックを聞いたのでまとめます。
ハイブリッドアプリをパフォーマンスを意識せずに作った場合、ネイティブアプリと比べて動作が遅くなってしまいます。
パフォーマンスを上げて、いかに軽快に動作させるかがハイブリッドアプリ開発では重要だと思いました。
1. クリックイベントを使わない
クリックイベント、a要素を使わず、touchイベントで処理する。
tappableやfastclickなどのライブラリを利用すると良い。
クリックイベントでは、ダブルクリックでない事の確認を行っている分レスポンスが遅い。
2. CSSアニメーションを使う
アニメーションにCSSTransitionを使う。
JavaScriptでやるよりもはるかに早い。
3. jQueryではなくZepto.jsを使う
jQueryはPCのWebブラウザ向けライブラリであり、モバイル向けに使うには余計な処理が多い。
zepto.jsはモバイル向けに最適化されたライブラリ。
jQueryの互換APIが提供されている。
4. 動作確認は遅い方で行う
WebViewはAndroidよりもiOSの方がはるかに早い。
動作確認は遅い方のプラットフォームで行った方が良い。
iOSで動作確認を行いながら開発を進めて、開発終了後にAndroidで使い物にならないというケースがあり得る。
5. なるべくリフローを起こさない
リフローするごとに、画面全体のレイアウトの再計算処理が走る。
以下がリフローを起こす原因。
- 内部テキストの変更、iput要素への入力
- DOMツリーの操作
- width,height,marginなどの変更
6. リフローのコストを下げる
要素のwidth,heightは固定で指定する。
フローベースのレイアウトを避ける。
position,absolute,fixedを積極的に使う。
要素位置や大きさを変えるには、transformを使う。
DOMDocumentFragmentsを使って、DOM要素の繰り返し挿入を避ける。