JSON テンプレートは、AJAX 経由でコンテンツをロードし、パフォーマンスを向上させるのに役立ちますか?[閉まっている]

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

質問

私たちは、Twitter アカウントの下にある Twitter の設定パネルによく似た動的ダッシュボードの開発に取り組んでいます。ダッシュボードには多くのコントロールがあるため、多くのコンテンツが動的に入力されます。そのため、現在はこれが私たちのやり方です。

これは左側のパネルのメニューの 1 つです。

<a href="javascript:void(0);" onclick="fnGetFiles();">Files</a>

これは、HTML を取得するために呼び出される関数です。

function fnGetFiles(){
  $('#mainDashboard').html('<div class="rightContainer"><div class="tabLoader"></div></div><div class="clear"></div>');
  $.get(USER_DASHBOARD+'file_share/files.php',function(data){
  $('#mainDashboard').html(data);
});

したがって、基本的にはHTMLを直接添付（追加）します。ただし、私はTwitterダッシュボードを通過しただけです enter image description here
1 つ目は、左側のさまざまなメニュー間を移動するために実行される URL 処理です (参照用に画像を追加)。オンザフライで変更されるだけで、コンテンツがロードされます。 検査する このコードでは、HTML を JSON 文字列として送信していることに気付きました。
正確にはわかりませんが、これはそうなります パフォーマンスを向上させる 私の場合は制作が少し苦手なので、これと同様のことを実現するためにどのようなフレームワークを使用できるかを正確に知りたいと思っています(また、スクリプト間の AJAX 競合の問題にも直面しています。）。使っています PHP、jクエリ 私のアプリケーション用に。
から情報を得ようとしました 開発者ツイッター.com,そしてブログ しかし、これに関する具体的な情報は見つかりませんでした。
可能であれば、私を導き、それに光を当ててみてください。
お時間をいただきありがとうございます。

役に立ちましたか？

解決

HTML、JavaScript、画像、その他のクライアント側要素はすべて 静的. 。彼らはそのままでいるべきです。JavaScript 内で要素を動的に作成する必要はありません。

AJAX 呼び出しを終了するだけで済みます。 HTML にデータを入力するために必要なデータ, をクリックし、このデータを DOM に追加します。JSON / XML はプロトコルのようなものです。

通信プロトコルは関係者間で合意する必要があります。

JS > PHP > JS の場合、JSON は標準を設定し、単に使用するだけなので、選択するのに最適な「プロトコル」(合意された通信方法) です。 json_encode() / json_decode() PHP 内で、そして $.parseJSON() jQueryを使用している場合。JSON の使用は、単に合意されたメッセージング形式であり、開発者としては、それが「標準」であるため、使用することを約束する必要があります。

必要のない余分なデータを回線経由で送信することは望ましくありません。必要がない限り、HTML を送信しないでください。必要なデータのみを要求して応答します。

ここではあまり大げさなことは言いませんが、このようなことを行うのに役立つ素晴らしいツールがたくさんあります。たとえば、AngularJS では、次のようなステートメントを使用して、サーバーから返された JSON で DOM を自動的に更新できます。 ng-repeat. 。これは基本的に、サーバー (ダッシュボードとサーバーの両方) から取得したデータを DOM 要素に設定するためにカスタム JavaScript を記述する必要がないことを意味します。 私の ダッシュボードは現在実行中です）。

これに加えて、リアルタイム データに対する AJAX リクエストの負荷を開始することが AJAX リクエストの目的ではないため、私は WebSocket を使用しています。データが 5 ～ 10 秒ごとに必要な場合は問題ありませんが、それ以上の頻度で、WebSocket などの双方向テクノロジーが必要な場合は、React PHP と Ratchet などの実装を学習する必要があります (機能するようになったら)。 、しかし、それは素晴らしいです）。

まず、クライアント側とサーバー側の両方で使用する「プロトコル」について合意します。その後、必要なデータのみを送受信します。 必要, 、そしてそれは 変化. 。それ以外のものは静的であり、帯域幅を無駄にするだけです。HTML を渡さないでください。最後に、速度の点で、JSON の送信とプレーンテキストの送信 - 文字通り、送信する文字の長さに依存します。それでおしまい。いずれにせよ、これらの利点はいずれにしても非常に微々たるものであるため、HTML を送信する場合を除き、心配する必要はありません。あなたは。

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