JQueryMobile パフォーマンスチューニング TIPS

JQueryMobileの開発で役立ちそうなTIPを纏めました。

■　パフォーマンス関連のTIPS

何度も表示される利用性の高いページを、素早く表示させたい。

【対処方法】

Ajax遷移すると、始めにロードしたページと現在表示されているページの２つのDOMがHTML内に存在している。この属性を追加するとページ遷移してもDOMが消えずに残るようになる為、読み込み速度が早くなる。ただし、その分メモリーを消費する為、検討が必要です。

<div data-role="page" data-dom-cache="true">  

ページがスムーズにスクロールしない。

【対処方法】
マウスオーバーのアニメーションが原因でスクロールがスムーズに動かない事がある。カーソルが要素の上に乗った際のスタイルの実行を遅らせる事で対応できる。

$.mobile.buttonMarkup.hoverDelay = 5000;

デバイスの性能が足らず、ページ遷移アニメーションが遅くなる

【対処方法１】
もっとも早いフェードでも300msのオーバーヘッドが生まれる。パフォーマンスを重視するのであれば、いっそのことページ遷移アニメーションを無効にする。

 $.mobile.defaultPageTransition = 'none';

【対処方法２】
ページ遷移中に重たいJavascriptが処理中だとページ遷移アニメーションが遅くなる事がある。ページのJavascriptファイルを遅れて読み込ませる事で改善できる。

 <script type="javascript/lazy" src="hoge.js" />

$(document).on('pageshow', '#page-id', function() {
     var jsLazy = $('script[type="javascript/lazy"]');
     jsLazy.attr('type', 'text/javascript').remove().appendTo('head');
});

ページ遷移の際にアニメーションがチカチカと点滅して表示される。

【対処方法】
表示するページの高さは、ページ遷移アニメーションのパフォーマンスに大きく影響する為、検索結果一覧などの長くなりがちなコンテンツを非表示としておき、遅れて表示させる事で改善できる。

<div class="lazy" style="display:none;" >
・・・
</div>

$('[data-role="page"]').live('pageshow', function(){
     $('.lazy').show();
});
$('[data-role="page"]').live('pagebeforehide', function() {
     $('.lazy').hide();
});

タップした時の反応時間を短縮する

【対処方法】

tapイベントやclickイベントは、長押しやダブルクリックに対応するために、300msの遅延が発生する。vclickイベントを利用する事でこの待ち時間を無くすことが出来る。

$(document).delegate('a', 'vclick', function(e){
    e.preventDefault();
    var link = $(this);
    $.mobile.changePage(link.attr('href'), {
        transition: link.jqmData('transition')
    });
});

※　ただし、一部のAndroidデバイスで、event.preventDefault(); で Aタグのデフォルトイベントをキャンセルしても、Aタグのhrefが先に処理されてしまう事象が確認された。href属性は、javascript:void(0);として利用する事で回避する事が出来る。

その他のパフォーマンス関連

・リンク先のページを先に読み込む。data-prefetch要素を付けることで、画面表示にリンク先のDOMを事前に読み込んでおくことができる。

<a href="/hoge" data-prefetch>ページ2</a>

・戻るページのスクロール位置を復元させないようにすることで、画面再描画のパフォーマンスをあげる。

$.mobile.minScrollBack = 9999;

・実機だと、スワイプ画像などのアニメーションがスムーズに動かない場合がある。GPUアクセラレータを利用する事で改善出来る可能性がある。

-webkit-transform:translate3d(0,0,0)

・カスタムビルドで、すべてのフォームとウィジットを外す。必要最低限の機能だけを利用する事で余計なオーバーヘッドを減らすことが出来る。 http://jquerymobile.com/download-builder/

・画面を指定サイズ以上スクロールした場合は、ページ遷移アニメーションを行わない。

$.mobile.getMaxScrollForTransition = function () {
    return 480;
};

■　ハマったこと

・ 画面遷移後にhistory.back()して、再度画面遷移すると、遷移前の画面に自動で戻ってしまう現象がP01-Dなど一部のAndroid端末で発生する。以下の何れかの設定をすることが回避が出来る。

【対処方法１】

$.mobile.hashListeningEnabled = false;
→　但し、Ajax遷移する場合に、history.backしても元の画面が表示されなくなる。Ajaxを利用しない場合や、戻るボタンを考慮する必要がない場合は、こちらで対応します。

【対処方法２】

$.mobile.pushStateEnabled = false;
→　但し、Ajax遷移した場合に、http://xxxx/?q=xx#/xxxx/?type=1 のように、次画面のURLがハッシュの後ろに表示される。（リロードした場合は、画面ロード後にハッシュの後ろのURLがAjaxで読み込まれる。）

■ POSTでAjax遷移する場合の注意(検索条件が多いなどの理由でGETパラメータの文字数制限を回避する場合など)

・リロード時すると保持していたクエリーが消えてしまう。

【対処方法】：data-role="page" を指定したタグに、data-url属性を追加して、ページのURLを指定する。

<div data-role="page" data-url="${currentUrl}">

・iOS6だとAjaxのPOSTがキャッシュされてしまう。

【対処方法１】：レスポンスヘッダに「Cache-Control: no-cache」を指定する。

SetEnvIf Request_Method "POST" IS_POST
Header set Cache-Control "no-cache" env=IS_POS

【対処方法２】：POSTするデータに毎回違う値を付加する。

'time=' + new Date().getTime()

■　知ってると便利なこと

$.mobile.firstPage
→　画面遷移した際の始めのページのDOMを取得する。（Ajax遷移の場合に便利）

$.mobile.activePage
→　今表示されているページのDOMを取得する。（Ajax遷移の場合に便利）

$.mobile.showPageLoadingMsg();
→　ページローダーを表示する

$.mobile.hidePageLoadingMsg();
→　ページローダーを非表示にする

$.mobile.path.parseUrl(URL);
→　URLをエンコードする

$.mobile.showPageLoadingMsg('a', 'ページのロードに失敗しました。', true);
→　メッセージを表示する

参考資料
http://www.slideshare.net/yoshikawa_t/jquery-mobile-tips-20120719