1

背景: jQuery モバイル アプリ (単一の .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 を使用することを好みます。

ありがとう！

クリス。

4

1 に答える 1

0

just a guess but maybe this happens due to the fact that the default browser behavior triggers custom events and invokes some scrolling mechanism whereas the $.mobile call avoids this overhead...

I do not think you can improve that so easily but maybe try to use a small delay to perform this asynchronously

$('#largeListView').on('vclick', 'a[href="#subView"]', function (e) {
  var id = $(this).data("id");
  setTimeout(function() {
    theSubView.setId(id);
  }, 0);
});
于 2012-04-19T10:04:19.780 に答える