使用 AJAX 拉入页面元素，还是简单地隐藏和显示它们更有效

在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 数据。 使用第一种方法，PHP 脚本必须实际返回 HTML。

我认为第一种方法会对服务器造成更大的冲击，因为诸如显示对话框之类的简单事情将需要 AJAX 调用(即使它不需要，因为所有内容都包含在方法 2 中(。

第二种方法似乎会对客户端造成更大的打击，因为我正在 JS 中进行所有数据操作。 然而，第一种方法将 HTML 响应转储到div 中并重新格式化 DOM，所以我不确定它是否同样激烈。

加载时间的影响如何？ 第一种方法必须基本上呈现一个巨大的文档，其中包含可能永远不会显示但只有一个请求的元素，第二种方法必须发出一百万个请求，但结果是较小的 DOM。