3

私はテーブルと膨大な量のデータを扱ってきました。私の Web サイトには、1 万行のテーブルがあります。このテーブルには動的検索、フィルターなどがあります。パフォーマンスを考慮して純粋な JavaScript を使用してきましたが、この行数では遅延が発生します。

純粋な JavaScript の代わりに、より優れたパフォーマンスを発揮する方法を知っていますか?

EDIT>一度に1万行をロードする必要があります。それらすべてをブラウザに 5 秒でロードできます。主な問題はフィルターと検索です...

EDIT2> 検索は動的です。名前で検索し、最初の文字でフィルタリングできます。私は何ヶ月もそれに取り組んできました...

探す：

  1. フィールドに 3 文字を超える文字があり、その長さと文字が変更された場合にのみ検索します (入力時の onchange イベントは、文字が変更されたときに複数回トリガーされる可能性があるため、いくつかの検証を使用して一度だけトリガーされるようにします)
  2. 検索された文字列に一致する各行が別のテーブルにコピーされます。元のテーブルが非表示になり、新しいテーブルが表示されます。
  3. ユーザーが検索フィールドを変更するか動的検索をキャンセルすると、新しいテーブルは消去されます。
  4. 結論: 不要な要素を非表示にするよりも、必要な要素を含む新しいテーブルを作成する方が高速です。

フィットラー

  1. 行は実際には 25 個のテーブル (A ～ Z + アルファベット以外の文字) にあります。
  2. キャラクターを選択すると、そのテーブルのみが表示されます
  3. 結論: 不要な行を非表示にするよりも、テーブル全体を非表示にする方が高速です

返信ありがとうございます。可能な解決策を絞り込むことができるように、いくつかの追加情報を編集しました...

4

4 に答える 4

4

データベースからコンテンツを取得し、PHP のようなものでロードすると仮定しています (ここでは PHP を想定します)。

Javascript に、フィルタリングを行う php ファイルへの ajaxcall を作成させ (実際には、データベースにそれを行わせる必要があります。はるかに高速です!)、結果のテーブルを画面に戻すことができます。

上記と組み合わせたより高速な方法は次のとおりです。配列の最初の行のすべての ID を取得し、それらを保存します (セッションでは快適に動作する可能性があります)。

フィルタリングする必要がある場合は、PHP にテーブル全体を取得させないでください。保存されている ID のみにフィルタを適用し、一致する行を JavaScript に送信してください。

次に、javascript に次のような処理をさせます:
- すべてを可視に
設定 - 結果の ID を非表示に設定 (ユーザーが複数のフィルター アクションを実行する可能性があるため、削除を優先して非表示にしますか?)

別のアイデアが頭に浮かびました。ロード時に表示する必要がない場合は、すべてのテーブルを非表示にして「検索して表示してください」というメッセージで初期ロードを開始できます。

于 2013-08-08T17:47:55.330 に答える
1

このケースを処理する一般的な手法は、データをメモリまたはデータのサブセットにロードし、テーブルの行をリサイクルして、実際に何千もの行を作成しないようにすることです。これでクリエイティブになり、エンドレスにスクロールするように見える Web インターフェイスを作成できますが、実際には dom 要素を再利用してシャッフルしているだけです。

Web、モバイル、またはデスクトップ インターフェース上にあるかどうかにかかわらず、よく構築されたほとんどのデータ グリッド ウィジェットは、この手法を使用して特定の問題を処理します。

ほとんどの場合、一度に数万行のデータを表示しても、実際にユーザーが恩恵を受けることはありません。

于 2013-08-08T17:53:33.397 に答える
0

ユーザーが見るべきものだけをサーバーからフェッチします。誰もが指摘したように、そのページに10,000行ある必要はありません。

ページネーションの概念を使用すると、ページ ごとに数行がフェッチされて表示されます。JQuery の Ajax は、サーバー側関数を呼び出して行をフェッチし、ページに追加することができます。

ここではバックエンドの詳細はわかりませんが、struts フレームワークにはdisplay:tableタグがあり、.NET フレームワークにはGridViewクライアント側のページネーション用にあると信じています。

于 2013-08-08T18:15:49.453 に答える