如何使用 LOAD 或 HTML 来最好地 UNLOAD DIV 中的内容来管理资源?
我正在使用 jQuery 1.6.2。
在母版页中,我打开几个 div,稍后将通过使用按钮填充信息:
<input type="button" id="ButtonOne">
<input type="button" id="ButtonTwo">
<input type="button" id="ButtonThree">
<div class="SectionDiv" id="DivOne"></div>
<div class="SectionDiv" id="DivTwo"></div>
<div class="SectionDiv" id="DivThree"></div>
我进行调用来填充 div,如下所示:
$("#ButtonOne").click(function() {
$("#DivOne").load("FileOne.html");
});
当我填充一个 div 时,我想删除另一个 div 中的所有内容分区。我用两种不同的方式做到了这一点。像这样:
// METHOD ONE
$("#ButtonOne").click(function() {
// UNLOAD ALL DIVS
$(".SectionDiv").load("BlankPage.html");
// LOAD THE DIV THAT NEEDS TO BE LOADED
$("#DivOne").load("FileOne.html");
});
// METHOD TWO
$("#ButtonOne").click(function() {
// UNLOAD ALL DIVS
$(".SectionDiv").html("");
// LOAD THE DIV THAT NEEDS TO BE LOADED
$("#DivOne").load("FileOne.html");
});
在方法一中,我加载了一个没有内容的页面(一个完全空的页面)的 div。在方法二中,我使用 html("") 具有相同的效果(?)。
虽然这两种方法具有相同的视觉结果,但在删除 div 中的现有变量或更好地从 DOM 中分离元素等方面,其中一种方法是否比另一种方法具有明显的优势?在某些环境中,一个比另一个更快吗?一个人比另一个人占用更多资源吗?
I am using jQuery 1.6.2.
In a master page, I open up several divs that will later be populated with info through the use of buttons:
<input type="button" id="ButtonOne">
<input type="button" id="ButtonTwo">
<input type="button" id="ButtonThree">
<div class="SectionDiv" id="DivOne"></div>
<div class="SectionDiv" id="DivTwo"></div>
<div class="SectionDiv" id="DivThree"></div>
I make a call to populate the divs like this:
$("#ButtonOne").click(function() {
$("#DivOne").load("FileOne.html");
});
When I popule a div, I want to get rid of everything in the other divs. I have done this two different ways. Like this:
// METHOD ONE
$("#ButtonOne").click(function() {
// UNLOAD ALL DIVS
$(".SectionDiv").load("BlankPage.html");
// LOAD THE DIV THAT NEEDS TO BE LOADED
$("#DivOne").load("FileOne.html");
});
// METHOD TWO
$("#ButtonOne").click(function() {
// UNLOAD ALL DIVS
$(".SectionDiv").html("");
// LOAD THE DIV THAT NEEDS TO BE LOADED
$("#DivOne").load("FileOne.html");
});
In method one, I load the div with a page that has no content, a completely empty page. In method two, I use html("") with the same effect(?).
While these two methods have the same visual outcome, does one have a distinct advantage over the other for killing existing variables in the divs, or detaching elements better from the DOM, or anything? Is one faster in certain environments than the other? Does one hog more resources than the other?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
方法一导致请求无缘无故地获取空白页(因为你知道它是空白的,所以不需要请求)。所以本质上方法二是方法一的优化版本,因为它节省了无用的额外 HTTP 请求。
Method one causes a request to get the blank page for no reason (because you know it is blank, there is no need for a request). So essentially method two is the optimized version of method one because it saves the useless additional HTTP requests.
尝试上述操作,由于有多个
.SectionDiv
元素,因此您必须循环遍历每个元素。try the above, since there are more than one
.SectionDiv
element, you have to loop for each element.