データ量の多い画面の更新をWebアプリケーションに効率的に実装する方法

Question

約100の一意のデータ値を表示する画面があるエンジニアリングタイプのWebアプリケーションを想像してください。ユーザーは、右矢印/左矢印をクリックすることで画面を「ページ送り」でき、画面は次の100ページの値で更新されます。特定の仕様に基づいて適切なページが見つかった場合、ユーザーはそのページを永続ストレージに保存できます。

これを技術的に実装して、ユーザーインタラクションを高速化するにはどうすればよいですか？

アプリの例

上記はPageです。 Pageには6 data blocksオン（すべてが表示されているわけではありません）。各data blockには13〜20個のデータポイントが含まれます（これらは〜100データポイントです）。ユーザーはクリックして次または前のページを表示し、すべてのデータポイントが新しいデータポイントで更新されます。適切なPageが見つかったら、保存できます（表示されていません）。

画面上の各データブロックはデータベース内のエンティティを表すため、必要に応じて、ブロックごとに1つのデータID整数を内部的に渡すだけで、ブロック内のデータをデータベースから取得できます。

現在の実装

TL; DR：6000ポイントの巨大なデータブロックを事前に生成し、すべてをユーザーのブラウザーに送信して、JavaScriptにフィードします。そのデータブロック内のデータのスライスを介してページを使用します。この部分はメモリ内で実行され、次のページに移動するためにサーバーへのラウンドトリップは必要ありません。

詳細：

すべてのデータポイントを持つすべてのブロックを事前に生成します（生成するページは約60ページあります）。 60ページx 100データポイント=格納する6000データポイント
ページ生成プロセス中にそのチャンクデータをデータベースに保存します（後でIDを使用して簡単に取得できるようにするため）
手順2のデータを使用して、JavaScript経由でユーザー画面を生成します。つまり、すべての6000ポイントは、ブラウザーのメモリにある巨大な構造で保持されます（ステップ2のディスクにもあります）。現在、ページングはJavaScriptを介して実装されています。巨大なデータチャンクからのデータの一部は、ユーザーがページを移動すると表示されます。それはすべてメモリ内にあるため、「高速」であるはずですが、まともであり、狂ったように高速ではありません。おそらくデータが非常に大きいためです。
ユーザーが選択#Xを選択して保存します。保存すると、データベースIDと選択番号がPHPスクリプトに渡されます。これらを使用して、手順2で以前に保存したレコードから正しいページが読み込まれ、さらに処理されます。

私が抱えている問題

データチャンクが大きすぎます
めちゃくちゃ巨大なレコードをデータベースとメモリに保存しています
現在すべてメモリにあるにもかかわらず、それはひどく速くありません

リファクタリングのアイデア

私はAJAXのようなデータを実行できると考えています。JavaScriptを使用してレコード間を移動する代わりに、AJAXを使用します。唯一の欠点は、現在のようにすべてがメモリ内にあるのではなく、インターネット接続に大きく依存することです。それでもそれは遅くなる可能性があります。しかし、アイデアは、AJAXを使用して、新しいページごとにサーバーへのラウンドトリップを実行し、新しいリクエストごとに100ポイントのみをロードすることができるということです。巨大な6000ポイントのデータではありません。ただし、アプリケーションはまだこの巨大なデータブロックがあることを認識している必要があります。60ページになることをどのように示すことができるのか、私は完全にはわかりません（現在、それらについて考える必要があるもの）すべてが1つの巨大なチャンクに事前生成されています）。

AJAX往復する前に、他の（より良い）方法があるかどうかを知りたいです。

質問

このWebアプリケーションを技術的に実装するより効率的な方法はありますか？

詳細情報が見つかりました

JS Graphicsライブラリーがページのレンダリングを遅くしていることがわかりました-各ページにグラフをレンダリングし、データからグラフポイントを引き出します。グラフィックレンダリングのdivを削除すると、ページングプロセスが大幅に高速化されます。それに比べて、AJAX（グラフなし）を使用してページングを実装した場合、「AJAXによるインターネット往復によるページング」は、「現在のJSページングとグラフィックスのない」に比べて遅くなります。

現在は次のようなことをしています

300 + K JSONをHTMLページの非表示のDIVに印刷する
JSを使用してJSONのスライスをページングする

質問をする前に、このデータをHTMLページに渡すのはやりすぎで無駄であるように見えました。これを行うことはそれほど悪いことではなく、パフォーマンスへの影響はデータではなくグラフのレンダリングであったと私は思います。

データを1つの大きなチャンク（すべてのページを含む）に内部的に保存すると、もっとうまくできると思います。おそらく、代わりに各ページを個別に保存して、ユーザーがデータを保存するときに、すべてのページを持つレコードではなく、そのレコードのみをプルアップできるようにすることができます。しかし、そうする努力が必ずしもより効率的であるかどうかはわかりません。ですので、執筆の時点では、そのままにしておくつもりです+ページのトリミングを調べてください。

Slawek · Answer

AJAX=を使用して、現在のページから3ページ離れたページをロードできます。たとえば、ページ1にいる場合-1〜3ページのデータを取得するリクエストを発行します。「次へ」をクリックすると、ページ2（メモリ内）のデータが表示され、ページ1〜4を返すように要求が発行されます。

20ページでは、17〜23ページなどのデータをリクエストします。

新しいデータが必要かどうかによって異なりますが、それが問題にならない場合は、各ページのデータを配列に保存するだけで、AJAX呼び出し中に-ブラウザのメモリに既にあるデータをスキップできます。したがって、単純化するために、最初の3ページのデータをロードし、次にユーザーが次にクリックしたときにページ4のデータをロードするなどして、データをプリフェッチするため、ユーザーはそれがリアルタイムではないことに気付きません。