遅いjQuery Mobileページ遷移をスピードアップ - なぜですか？

Question

背景：jQueryモバイルアプリケーション（1つの.htm、複数のjqmページ）があります。ページの1つにリスト項目がかなり多いリストビュー（300-500）が含まれています。ここではパフォーマンスの境界をテストしていますので、現在私のカスタム "ページング"はCSSを使用して、一度に25アイテムを除くすべてのアイテムを非表示にします。このアプリはPhoneGapを使用してデバイスに展開されます。

だから、私の質問に。

私は、リスト内のアイテムをクリックすると、以下のコードを使用すると、リストアイテムのリンク先のページへのナビゲーションがデバイス上で非常に鈍いことがわかりました。これは、クリックを扱うリスト項目格納それからIDを抽出し、その後、クリックがページナビゲーションを実行することができます。

$('#largeListView').on('vclick', 'a[href="#subView"]', function (e) { 

     theSubView.setId($(this).data("id")); 
    }); 

ただし、以下のコードは非常に高速です。また、IDを格納したが、その後のナビゲーションを引き起こしてクリックを防止し、手動で代わりにページを変更します。

$('#largeListView').on('vclick', 'a[href="#subView"]', function (e) { 

     theSubView.setId($(this).data("id")); 

     e.preventDefault(); 
     $.mobile.changePage('#subView'); 
    }); 

迅速に解決の唯一の欠点を（私の知る限りでは）項目は任意のUIが表示されないということですクリックが発生したというフィードバック。

誰もがなぜ私はここに広大なスピードの改善を得て、オプション1をスピードアップする方法があるのか​​知っていますか？

このようにデザインを邪魔するのは好きではありません。良いパフォーマンスを得るには、オプション1を使用することをお勧めします。

ありがとうございます！

Chris。

Answer 1

ただの推測が、おそらくこれが原因デフォルトのブラウザの動作は、カスタムイベントをトリガし、$ .mobile呼び出しは、このオーバーヘッドを回避でき、一方、いくつかのスクロール機構を呼び出すという事実のために起こる...

私はあなたができるとは思いませんこれを簡単に改善しますが、これを非同期的に実行するために小さな遅延を使用しようとします。

$('#largeListView').on('vclick', 'a[href="#subView"]', function (e) { 
    var id = $(this).data("id"); 
    setTimeout(function() { 
    theSubView.setId(id); 
    }, 0); 
});