0

Web 開発 (具体的には jQuery) では、事前にページを「プリロード」し、jQuery を使用して DOM を操作したり、その逆を行ったりする方がよいでしょうか。

以下の質問です。

<div id="item1"></div>
<div id="item2"></div>
<div id="element><!-- AJAX --></div>

$("#item1").click(function(e) {
     $("#element").load("ajax/response/containing/HTML_1.php");
});

$("#item2").click(function(e) {
     $("#element").load("ajax/response/containing/HTML_2.php");
});
.
.
.

対

<div id="item1"></div>
<div id="item2"></div>
<div id="element>
   <div id="item1_content" style="display:none"><? include('/path/to/html_1'); ?></div>
   <div id="item2_content" style="display:none"><? include('/path/to/html_2'); ?></div>
</div>

$("#item1").click(function(e) {
     $("#item1_content").show();
     $("#item2_content").hide();
     //Possibly do an AJAX call that simply returns JSON data and do something with it
});

$("#item2").click(function(e) {
     $("#item2_content").show();
     $("#item1_content").hide();
     //Possibly do an AJAX call that simply returns JSON data and do something with it
});
.
.
.

バックエンドはフロントエンドが操作する JSON データのみを返すため、2 番目の方法の方がより洗練されていることがわかります。最初の方法では、PHP スクリプトは実際に HTML を返す必要があります。

ダイアログを表示するなどの単純なことにはAJAX呼び出しが必要になるため、最初の方法はサーバーにさらに打撃を与えると思います（すべてのコンテンツが方法2に含まれているため、必要がなかったとしても）。

2 番目の方法は、すべてのデータ操作を JS で行っているため、クライアントへの負担が大きくなるようです。ただし、最初の方法は HTML 応答を div にダンプし、DOM を再フォーマットするため、それが同じくらい激しいかどうかはわかりません。

読み込み時間の影響はどうですか? 最初の方法は、表示されることのない要素を含む巨大なドキュメントを基本的にレンダリングする必要がありますが、1 回のリクエストで行います。2 番目の方法は、100 万回のリクエストを行う必要がありますが、DOM は小さくなります。

4

1 に答える 1

0

ページのソースを表示したときに訪問者に何が表示されるか気にしますか? その場合は、AJAX を使用してください。

サーバーの速度が問題になる可能性はありますか? AJAX を使用すると、非常にわずかな (ただし顕著な) 遅延が発生する可能性があります。それが問題になる場合は、hide/show を使用してください。

ただし、Jack と Rory が指摘したように、すべてはあなたが何をしているかにかかっています。一部のデータ読み込みを条件付きにすることで初期ページをはるかに高速にレンダリングできる場合は、AJAX を使用します。

ただし、AJAX を使用すると、ページがさらに複雑になります。多くはありませんが、少しです。将来の開発者はあなたのページを維持できますか? (ほぼ間違いなく、はい)

最終的な考慮事項: AJAX はとても楽しいものです。

于 2013-09-26T19:14:16.960 に答える