使用 AJAX 拉入页面元素,还是简单地隐藏和显示它们更有效
Is it more efficent to use AJAX to pull in page elements, or simply hide and show them?
在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。
你关心访问者在查看页面源代码时看到什么吗?如果这样做,请使用 AJAX。
服务器速度是否有可能成为问题?使用 AJAX 时可能会有非常轻微(但明显(的延迟。如果这是一个问题,请使用隐藏/显示。
然而,正如杰克和罗里指出的那样,一切都取决于你在做什么。如果可以通过使某些数据加载条件更快地呈现初始页面,请使用 AJAX。
但是,AJAX 会给您的页面带来额外的复杂性。不多,但一点点。未来的开发人员是否能够维护您的页面?(几乎可以肯定,是的(
最后考虑:AJAX很有趣。
相关文章:
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- 数据表-隐藏/显示列
- $scope变量,ng隐藏/显示
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- JQuery隐藏/显示无法正常工作
- 隐藏/显示下面的分区根据是否选择某个选项进行选择
- 使用类而不是id在JavaScript中隐藏显示
- 我想隐藏/显示我的SVG元素,同时在anguarJS中使用它
- 隐藏/显示图像
- Javascript 中的表 - 隐藏/显示列
- 仅使用Javascript隐藏/显示元素,而不会弄乱DOM
- 隐藏/显示 js 代码不会在 IE8 或更低版本上运行
- Magento:根据所选国家/地区隐藏/显示输入字段
- 货到付款选择隐藏/显示付款方式
- "隐藏/显示”;元素和更改按钮背景图像
- Bootstrap Collapse.js切换菜单的隐藏/显示
- 如何隐藏/显示<面板>使用jquery
- 在php中隐藏/显示切换回声结果
- 如何使用jquery使2个按钮切换css,而只使用1个按钮.不显示隐藏/显示
- JQuery隐藏/显示不起作用