3

各結果に 2 つのボタン JQM コントロールグループが含まれる結果を返す製品検索があります。

一度に 24 のレコードを送信するので、次のように 24 のコントロール グループを拡張します。

<div data-role="controlgroup" data-type="horizontal" class="submitButton linkBox">
    <input type="button" class="singleLoader" data-brand="#d#" data-index="#e#" value="#tx#" />
    <input type="button" class="selector" data-brand="#d#" data-index="#e#" data-iconpos="notext" data-icon="fav" value="#tx#" />
</div>

コントロールグループをプレーンな HTML として送信し、クライアントで拡張すると、サーバーの応答は1sec, data send20kになり、JQM がコントロールグループの拡張に忙しいため、ページがさらに約 1 ～ 2 秒間停止します。

私は今、別の方法を試しています。

  $.mobile.ignoreContentEnabled = true;

コントロールグループの代わりに完全に強化されたマークアップを送信します。だから今、私はこれを送ります：

<div data-enhance="false" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
     <div class="ui-controlgroup-controls">
           <div data-icon="" data-iconpos="" class="ui-btn ui-corner-left ui-btn-up-c" aria-disabled="false">
                <span class="ui-btn-inner ui-corner-left">
                     <span class="ui-btn-text">#tx#</span>
                </span>
                <input type="button" value="#tx#" class="ui-btn-hidden" aria-disabled="false">
      </div>
      <div data-icon="fav" data-iconpos="notext" title="#tx#" class="ui-btn ui-btn-icon-notext ui-corner-right ui-controlgroup-last ui-btn-up-c" aria-disabled="false">
           <span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
                <span class="ui-btn-text">#tx#</span>
                <span class="ui-icon ui-icon-fav ui-icon-shadow">&nbsp;</span>
           </span>
           <input type="button" value="#tx#" data-icon="fav" data-iconpos="notext" class="ui-btn-hidden" aria-disabled="false">
       </div>
    </div>
 </div>

これにより、 への転送サイズと へ34kの応答時間が増加1.5secしますが、強化するものが何もないため、ページは著しく速く感じられます。ただし、を使用するdata-enhance=falseと、これはデバイスのパフォーマンスに影響することもわかりました。

質問:
他の誰かがこれを処理する方法について経験がありますか? ページが速く感じられる場合、大きなファイル サイズ/転送時間/パフォーマンス ヒットを選択する必要がありますか?

4

2 に答える 2

2

Ok。基本的に3つのオプションがあります。Firebug を使用してすべてを実行し、ファイルのサイズ/読み込み時間と、アイテムのレンダリングによる視覚的な失速を確認しました。

a)
そのまま、24 個の検索結果のそれぞれがリスト アイテムであり、それぞれに 2 つのボタン コントロール グループがあるリストビューをロードしています。

1 listview
24 list items
24 two button controlgroups

マークアップを本質的なものにスキミングすると、結果を送信20kしよ1secうとしていますが、すべてのアイテムが作成される前に、ページが視覚的にさらに約 1 ～ 2 秒間停止します。

b) data-enhance=false JQM によると、スキャンはパフォーマンス ヒットになるため、
これにも設定が必要です (こちらを参照)。なかなか気付かなかったけど。$.mobile.ignoreContentEnabled=truedata-enhanced

これを行うということは、自分で必要なものをすべて拡張する必要があることを意味します (私の場合はサーバー側)。そのため、完全に拡張されたマークアップを送信します (注: データ属性は JQM にのみ示されているように見えるため、データ属性を試して削除することもできます。配属クラス等）

検索が に返さ35kれまし1.5secたが、ページのレンダリングがはるかに高速だったので、これはずっと気分が良くなりました。


c)エンハンスしないtrigger('create')でください。ただし、createサーバー側を既に強化しているため、要素を強化するために要素を起動する必要がない場合はdata-enhance=false、暗黙のパフォーマンスヒットも保存するグローバル構成は必要ありません。

これもうまくいきます。ファイルサイズは変わらず、さらに速くなると思います（これが測定可能であることを願っています）...

したがって、今のところ、より多くのデータ (40kページネーションと拡張されたリストビュー/リストアイテムを含む) を送信することをお勧めします。

他の人がどのような経験をしたかまだ興味があるので、見つけたものを投稿してください。

于 2012-09-01T08:23:27.587 に答える
0

JQM のプログレッシブ エンハンスメントを正しく理解している場合、目的は、このクライアント側アプローチを使用して、クライアント側で提供されるプラットフォームに適応できるようにすることです (グレースフル デグラデーション: jQuery および動的要素 vs 表示 css 属性)。サーバー側ですべてをレンダリングする場合、異なるプラットフォームに拡張マークアップを提供する必要があるか、1 つのプラットフォーム (拡張マークアップをコピーしたプラットフォーム) のみをサポートできます。

バージョン XY 以降の Android Chrome ブラウザーのみをサポートするなど、後者が必要な場合は、これでパフォーマンスを向上させることができますが、そうでない場合は退屈になる可能性があります。

デスクトップでは 1 秒かかりますが、Nexus 4 では耐えられない 6 秒かかる最大 60 のフォーム要素の拡張により、現在、同じパフォーマンスの問題に直面しています。これらは、拡張マークアップの提供を試みる前に共有したい私の考えです。Windows Mobile 8 と iOS7 プラットフォームもサポートする必要があるため、躊躇しています。

于 2014-01-30T10:54:37.257 に答える