サーバー側で PHP を使用し、jQuery と JavaScript でカスタム MVC を使用して、一種のプロジェクト管理ツールを構築しています。
ユーザーがプロジェクトに人を追加するのに役立つポップアップがあります。ポップアップが表示されたら、ユーザーはグループ (学生グループとしましょう) を選択する必要があります。その後、プロファイルを選択して現在のプロジェクトに追加できます。
70 人から 120 人のグループでテストしたところ、わずかな遅延で動作します。
しかし、1,000 人の大規模なグループをテストすると、更新時間が長すぎて、Chrome がスクリプトを停止するか、もう少し待つかを尋ねてきます... iser エクスペリエンスには良くありません!!!
データは JSON 形式でサーバーから取得されます。
{"users": [ { "uid" : "cortes", "firstname" : "Francois", "lastname" : "CORTES", "mail" : "..." } ], /* 1000 ユーザー レコード以上 * /}
データはこの HTML でフォーマットされます (カスタム疑似 Mustache テンプレート)
<li>
<div class="wrapper">
<p class="title"> {{firstname}} {{lastname}} {{mail}} </p>
<p> {{uid}} </p>
<p> <input type="checkbox" id="select-{{uid}}" /> </p>
</div>
</li>
jQuery を使用してリストを作成し、いくつかのリスナーを追加します - ポップアップの検証前に状態をローカルに保存する選択/選択解除 - 各リスト要素にマウスを合わせると一種のハイライト [コード][コード] 私の質問は HOW TO TRACK PERFORMANCE LEAK と HOW TO です修理する ？
もちろん、コードは少し醜く、維持するのが難しいです。もちろん、この問題をすばやく修正する必要があります...誰かが私を助けてくれますか?
編集：コメントと投稿をありがとう。
もう少し説明 : 通常、グループには 50 ～ 200 人が収容されます。1,000 人のグループは、全体の 90% が一時的に統合されただけであり、技術的および管理上の理由によるものです。しかし、パフォーマンスを強制し、UI の反応性を確保することは大きな課題です。
今のところ、テストに失敗しています...
@Chris：JSONの生成とサイズの時間を計るためにPHPでテストコントローラーを構築しています
@Dandavis：はい、今のところこれを行います。jQuery を使用してページから一般的な DIV テンプレートを取得し、ワイルドカード {{example-data-name}} を example-data-value に置き換えた JavaScript 文字列の JSON データを 1,000 回ループし、次にそれを DOM に挿入します ( jQuery) をバインドし、イベント リスナー (jQuery も) をバインドします...醜いコード、同意しますが、自家製であり、BackBone や Knockout を使用してリファクタリングする方法も時間もありません...
ドキュメントフラグメント? うーん...もっと掘り下げる必要があります！
@ajax81 : ページの読み込み時にキャッシュされる静的 JSON ??? なぜ...おそらく、既存の作業と労力を変更する最も簡単な方法です!
@Alberto：私が心に留めている役立つヒント。上でコメントしたように、今日の午後にテストを開始します
私の感覚では、PHP は (データ サイズと生成速度に関して) その仕事を正しく行っていますが、m カスタム テンプレート アプローチはデータ全体を処理するのに効率的ではありません!
ユーザーは通常、小規模 (50) から中規模 (120) のレコード リストをスクロールするため、データをページ分割する必要はありません。1,000 はストレス テストです。これは夏季 (休日) にのみ発生しますが、成功すれば、ユーザーの毎日のエクスペリエンスが向上し、パフォーマンスの低いシステムでのクラッシュから保護されます。
よろしく。
編集して問題を解決する
PHP
私はthz PHPスクリプトをベンチマークしました：1,000レコードの抽出とJSON生成は実行時間0.25秒未満、長さ100ko未満です...サーバー側で特に問題はありません。
アプリからの冗長性とネットワーク トラフィックを制限するためだけに、PHP 内キャッシュを使用してデータベースと LDAP 要求を制限するために、サーバー側でいくつかの最適化を行いました。
Javascript
次に、テンプレートの使用法を変更しました。今度は、1,000 個の JSON レコードをループし、テンプレートを評価して結果を生の HTML 文字列に追加し、次に LI 要素を UL に追加します。
この時点で、このリストは視覚的にユーザーに表示されます。
後で、JSON データを再度ループしてイベント ハンドラーをバインドします (チェックボックスをクリックし、周囲の DIV をクリックし、その DIV をポインターでホバーします...) が、リストはまだ表示されています。
リストを更新する際の待ち時間は目に見えますが、非常に短く、1.5 秒未満です...リストを待っている間にユーザーが繰り返しクリックするのを防ぐために、砂時計のアイコンを追加するかもしれません。
これでタイミングテスト成功 です 通常の使用では、リストは 150 人を超えないので、1,000 で OK なら ... 私にとっては OK :-)
助けてくれてありがとう（@all）。