1

アイテムを挿入する必要があるフォームがあります。フォームの html は次のとおりです。

<form action="test.php" class="form" method="post">
    <?php for($i=0; $i<=500; $i++): ?>
        <div class="formRow itemList">
            <select class="chzn-select" tabindex="2" name="items[]">
                <option value="3">Toys</option>
                <option value="4">Books</option>
                <option value="5">Shirts</option>
                <option value="6">iPad</option>
            </select>
            <span style="width:7%;float:left;margin-left:2%;" style="">
                <input type="text" name="quantity[]" class="est_quantity" placeholder="quantity" value="10"/>
            </span>
            <span style="width:7%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="cost[]" class="est_cost" placeholder="cost" value="100"/>
            </span>
            <span style="width:7%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="rate[]" class="est_rate" placeholder="rate" rate="200"/>
            </span>
            <span style="width:7%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="size[]" class="est_size" placeholder="size"/>
            </span>
            <span style="width:7%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="cartonnum[]" class="est_carton_no" placeholder="carton no."/>
            </span>
            <span style="width:8%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="numofcarton[]" class="est_cartons" placeholder="ctns."/>
            </span>
            <span style="width:8%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="qtyctn[]" class="est_qtyctn" placeholder="qty/ctn"/>
            </span>
            <span style="width:7%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="cbm[]" class="est_cbm" placeholder="cbm"/>
            </span>
            <div class="clear"></div>
            <a href="#" class="itemRemove">Remove</a>
        </div>
    <?php endfor; ?>
</form>

そしてそれはこのようになります。

  • 行に 9 つの入力要素があります。
  • 時には 300 から 500 の項目を入力する必要があります。
  • 500 * 9 = 4500 個の入力要素になります。

コードは以下でテストされています:

  • ブラウザ: google chrome 18.0.1025 および safari 5.1.3
  • オペレーティングシステム: OSX 10.7.3
  • 環境: ローカル

コードを実行しようとすると、深刻なパフォーマンスが得られます。これが統計です。

ページ読み込み時間:

  • 一般的なページの読み込み時間: 平均 2.4 秒。
  • css スタイルを適用した場合: 平均 5.3 秒。
  • css スタイルが適用され、いくつかの js ライブラリが含まれている場合: 平均 3.1 秒
    - js ライブラリを含めた後、ページの読み込み時間が短縮される理由がわかりません。jQuery、jQuery ui、および jQuery Chosen Plugin などのプラグインを使用しています。

マウスとキーボードのフォーカス時の入力要素の応答時間:

ここは物事が範囲外になりがちな場所です。

  • 要素にいくつかの値を入力しようとすると、Google Chrome でページがフリーズします。
  • Safari では、他の要素にフォーカスを移す際に 4 秒のラグがあります。いくつかの入力要素にいくつかの焦点を移した後、遅延時間は数ミリ秒に大幅に短縮されます。

私が気づいた奇妙なことは<form>、コードから属性を削除したときです。両方のブラウザでラグがほとんどないかまったくない状態で、パフォーマンスが向上します。この動作を引き起こしているものは何もわかりません。

このプラグインを使用して動的にフォーム要素の行を挿入しています: MultiField

だから私の質問は：

  • ロード時間の速度を改善し、さらに重要なことに、ブラウザによるスクリプトの実行を停止させる奇妙な動作を停止するにはどうすればよいですか?
  • フォーム要素の使用時にブラウザがこの動作を引き起こす理由は何ですか?

パフォーマンスを向上させる可能性のあるライブラリ、ヒント、またはパフォーマンスの向上に役立つあらゆる種類のライブラリを大歓迎します。

ありがとうございました。

4

1 に答える 1

3

300 ～ 500 個のアイテムを入力する必要がある場合もあります。いつもではありません。そして、本当にそれらすべてを 1 ページに入力する必要がありますか?

497 個の項目を Web フォームに入力した後にブラウザがクラッシュしたら、かなりイライラするでしょう。これに続いて、あなたのオフィスへの技術サポートの電話がかなり乱暴になります :-)

一度にすべての入力フィールドを必要としないように、少量のデータ (一度に 10 個のアイテムなど) を保持する方法を見つけてください。これにより、パフォーマンスが向上し、精神病の顧客から少し安全になります.

たとえば、クライアント側に保存されている Cookie の値によって識別される、一度に 10 個のアイテムをサーバー側のデータベースに押し込みます。一度に 10 アイテムのシナリオは、適切なページ サイズです (ユーザーは 10 アイテムのチャンクでリストを編集します)。Web ベースの商取引では、ショッピング カートなどを使用して、この種のことを常に行っています。

ユーザーがリスト全体を送信する場合、Cookie の値を使用してすべてのページを結合し、まとまりのある作業単位を送信します。

于 2012-05-07T07:05:50.323 に答える