HTMLテーブルの差分AJAX更新？

StackOverflow https://stackoverflow.com/questions/602322

  •  03-07-2019
  •  | 
  •  

質問

25x20 HTMLテーブル（ゲームボード）に基づいたゲームがあります。ユーザーは3秒ごとに「移動」できます。 AJAXリクエストをサーバーに送信し、サーバーはHTMLテーブル全体を再レンダリングしてユーザーに送信します。

これは簡単に記述できましたが、多くの帯域幅を浪費します。大きなテーブルの完全な更新の代わりに差分を送信するのに役立つ、クライアント（できればjquery）またはサーバー側のライブラリはありますか？通常、特定のリロードで変更されるのは5〜10個のタイルのみであるため、3秒ごとに500個すべてではなく、これらのタイルのみを送信することで、帯域幅の使用を1桁削減できます。

また、より良い代替案を提案できる場合は、「あなたはばか、HTMLテーブルを使用しているのはなぜですか」タイプのコメントも受け付けています。たとえば、HTMLテーブルを使用する代わりに検討すべきCSS / DOM操作技術はありますか？テーブルを使用しますが、IDの各td座標（＆quot; 12x08＆quot;など）を指定し、jqueryを使用してセルをidに置き換えますか？

説明：タイルは画像ではなくテキストです。

役に立ちましたか？

解決

ゲームボードを多次元javascript配列としてモデル化できます：

[[x0, x1, x2, x3 ... xn],
.....
.....]

各エントリは、行を表す配列です。各セルには、ゲームの駒/正方形の数値が保持されます。

このモデルは「契約」にすることができます。 JSONとしてajax経由でサーバーに送信します。サーバーは同じ配列を計算し、UIに送り返します。その配列をテーブル、div、または好きなものにレンダリングできます。 Prototype.jsとjQueryを使用すると、dhtmlを非常に簡単に作成できます。

この配列形式は、マークアップを含むHTML応答全体よりもはるかに小さくなります。また、任意の方法でボードを自由にレンダリングできます。

この形式をさらに圧縮して、デルタを送信するだけです。例：ユーザーが変更したタイルの座標を保存し、サーバーに送信します：

[(x1, y2),.....(xn, yn)]

または、他の方法でそれを行うことができます：完全なモデル配列をサーバーに送信し、サーバーにデルタを計算させます。

Spontyをチェックし、数分ごとにajaxトラフィックを監視します。非常によく似た処理を行います： http： //www.thesponty.com/ クライアントは完全なモデルをサーバーに送信し、サーバーは差分を送信します。

他のヒント

サーバー側の更新間の状態がわかっている場合（質問に関するコメントを参照）、JSONを使用してデータを送信します（正確な構文は不明です）：

[
    { x: 3, y: 5, class: "asdf", content: "1234" },
    { x: 6, y: 5, class: "asdf", content: "8156" },
    { x: 2, y: 2, class: "qwer", content: "1337" }
]

それを圧縮（余分な空白などを削除）し、gzipして、Javascriptに送信します。驚くべきことに、これを読むためのJavascriptコードはそれほど複雑ではありません（単にDOM操作）。

デルタを考えずに：

JSONを使用すると、このようなことを非常に簡単に行うことができます。独自の圧縮形式も展開できます。

gzipを使用してデータを圧縮すると大いに役立つと思います。現在、ほとんどのブラウザはこれをサポートしており、応答のサイズを大幅に削減します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top